Timeframe/tools

• Three-week Agile sprint consisting of research, wireframing, low-fidelity prototypes up to high-fidelity mockups

• Sketch

• InVision

• Zeplin

• Whimsical

• Xtensio

• Pen and paper

The goal: To translate the in-store experience online, but simplifying the shopping experience so that users can navigate the website quickly and efficiently. Instead of a chaotic and busy layout, I wanted to design an organized and intuitive website.

Final product: High-fidelity mockup of an organized, functional, and attractive e-commerce website where customers can easily find and purchase what they are looking for.

Research: I conducted user interviews and employee interviews; practiced contextual inquiry at Decade to observe how people shopped; compared similar gift stores’ websites for competitor analysis; then created personas, user flows, and a site map.

Some findings…

• While interviewing users, I found that many customers loved the store’s visual appeal in its thematic display, some calling it their favorite store. Customers said it’s a great store to browse and to get gift ideas, but conversely that it can be hard to track down specific items.

• Currently, there are no products sold through Decade’s website.

Personas: Two personas were developed based off user interviews using Xtensio. One is the more casual shopper looking to browse the site and see what products pique their interest. The other is a more focused shopper set on finding and purchasing specific items without wasting time.

User flows, site map and competitor analysis: Next, I mapped out the user flows of each respective persona to navigate through the e-commerce site using Whimsical. Creating the personas for Janice and Jillian helped to inform what each user might prioritize as well as what features were universally important. The goal was not to bombard users with unnecessary pages or information - simple and sleek is best.

Wireframing and prototyping: There were many iterations in Sketch before arriving at my final prototype. Prior to thinking about a color palette and overall aesthetic, I sketched out some ideas to highlight the most crucial information architecture of the site. I started at a lower fidelity prototype to ideate on layout organization possibilities.

Iterations: I conducted usability testing to the site’s flow and started making tweaks to the design, focusing on a more seamless and intuitive user flow for each customer. Users expressed that it could be overwhelming when there was too much information crammed into any single page.

Responsive web design: The next step was transitioning to a responsive design, starting with mobile and expanding to a desktop design. At this point, I considered the aesthetic and feel of the existing store and strived to translate that into a fluid online experience.

Transferring store brand online: Above are images of the brick-and-mortar store, giving a feel for Decade’s personality and aesthetic. I sought to translate their in-store appeal to a website that matched it, while allowing users to search for exactly what they wanted.

Responsive design lessons: Moving into the responsive design phase, I honed in on atomic design techniques to make the most essential elements of the mobile design stand out in the desktop version.

More iteration: After more user testing, I condensed content on the Product Description Page to only include the most important info. The goal was to make the process as simple for the user as possible while showing the information needed to make a purchase or bookmark for later.

Reflections: After several rounds of conducting research, sketching and wireframing, ideating and prototyping, the final mockup was designed to provide each user with an online shopping experience that was simple, easy, and as enjoyable as visiting the store itself.

My hope was that with a well-designed e-commerce site, Decade can continue to grow and expand its customer base locally and beyond. Customers who enjoy the store but find it difficult to shop in person can find their favorite products online and recommend their family and friends do the same.

With so many retail stores feeling the revenue pain of customers increasingly shopping online, it is more important than ever to have a strong website that will attract more customers to your business. For a store like Decade with a long history and dedicated customer base, merging their in-store success with an attractive, user-friendly online store can only propel their business forward in the future.