User Experience Design Case Study: Good Old Gold Ecommerce Website Redesign
Project Brief
Good Old Gold is a long-standing retailer of designer, estate, and custom jewelry, located in Massapequa Park, New York. It is the home of the Superior Hearts & Arrows Diamonds. In January 2015, Good Old Gold became a client of Ideal Brand Marketing, a boutique ecommerce design agency where I served as Senior Web Designer.
My Role
For four months, I served as the initial designer of the Good Old Gold ecommerce homepage redesign. I designed the shopper personas, website’s information architecture, and the visual design of the homepage before handing the project off to junior designers.
Problem Statement
Who are Good Old Gold’s online shoppers, and how might we create a luxurious online shopping experience that better serves their various wants and needs?
The main goal of the redesign was to increase online customer engagement to drive traffic into the physical storefront. It was essential to understand who the online shopper was to engage them more effectively. I set out to design well-researched user personas, a clear webpage hierarchy, and a sophisticated visual interface to match Good Old Gold’s dazzling inventory.
Part 1: Shopper Persona Design
The first part of the case study examines the design of the five archetypal ecommerce shopper personas, which become an essential user experience tool in this and other ecommerce projects.
Part 2: Homepage & Navigation Design
The second part of the case study examines Good Old Gold’s overall website architecture and homepage redesign, which set the visual tone and the navigation patterns for the rest of the redesign.
Part 1: Shopper Persona Design
Due to limited resources, creating a unique shopper persona for each ecommerce project was not a feasible endeavor. However, it was critical to understand each client’s online audience to make design decisions that are better suited to their wants and needs.
To address this issue, I created five archetypical ecommerce shopper personas based on data from the Ecommerce User Experience report by the Neilson Norman Group. I designed the proto-personas to focus on just the essentials — context, user goals, frustrations, and habits.
The personas are scannable, easy to reference on mobile or desktop, and serve as the basis for all the subsequent ecommerce design projects. Smaller, more compact versions of these personas help focus on the user’s wants and needs across other deliverables.
Part 2: Homepage & Navigation Design
I begin by conducting a heuristic evaluation
After the initial and exploratory stakeholder interviews, I evaluated Good Old Gold’s existing homepage to discover potential improvement areas. Here, I use the framework of 10 Usability Heuristics for user interface design developed by Jakob Nielsen.
A heuristic evaluation is an in-depth analysis of an interface that examines its strengths and failures. This exercise helps explore the existing interface through the lens of usability, efficiency, and effectiveness of the experience.
Assigning archetypal shopper personas and writing user stories
I determined Good Old Gold’s primary and secondary shopper personas and developed detailed user stories based on the stakeholder interview discoveries. As aforementioned, I adapted the personas from the five archetypical ecommerce shoppers, developed by the Neilson Norman Group, in their Ecommerce User Experience report.
A persona is a fictional character derived from user research that serves as the personification of some unique user group. Personas help designers develop a deeper understanding of users’ goals, motivations, and limitations, and most importantly, they build empathy for that user base.
Figuring out the website’s structure by designing a sitemap
During the assessment of the existing website, I mapped out the hierarchy of its webpages. With the assistance of the major stakeholders, I revised the site structure to be more manageable and intuitive. Our revisions culminated in the following sitemap:
A sitemap is a hierarchically organized diagram of the website’s pages. It helps visualize the basic structure and navigation of a website.
Planning and designing the navigation and homepage content
Using the finalized sitemap, I begin to plan out the website’s homepage content and navigation links. My content strategy proposals included low-fidelity homepage wireframes, a responsive content model, and high-fidelity header and footer wireframes.
A content model is a diagram for visualizing structural relationships and strategizing content. A well-prioritized content model serves as the basis of a webpage’s content presentation order and design.
Designing the responsive grid, navigation, and menu
I then design annotated wireframes that define the behavior of Good Old Gold’s responsive grid, navigation, and menu at various breakpoints. These deliverables serve primarily as hand-off documents and reference documentation for the website developers.
Designing responsive homepage wireframes and mockups
I expand on the low-fidelity wireframes designed for the homepage content model and create responsive, high-fidelity desktop, tablet, and mobile homepage wireframes. The following are the final, annotated Good Old Gold high-fidelity homepage wireframes next to the final mockups for context.
Referencing my visual inspiration mood board
During my time at Ideal Brand Marketing, the boutique ecommerce agency I worked at while redesigning Good Old Gold’s homepage, I created a physical mood board of well-designed ecommerce interfaces, experiences, and navigational patterns. This board served as reference and inspiration during various stages of the design process, including stakeholder interviews, content strategy, and — most notably — during the user interface design process.
Designing the visual aesthetic and user interface
I refined Good Old Gold’s existing logo, brand colors, and typography. Then, I designed a modular, scalable user interface system and pattern library for the homepage, navigation menus, and the rest of the webpages across the entire ecommerce website.
Good Old Gold Project Hand-off
After designing the homepage to the client’s satisfaction, the project was handed off to junior designers to redesign the remainder of the website using the approved style guide.
