Client

Gotta Have S'more

Annalisa Mastroinni Johnson, Owner

Team

Jamie Namba, UX Designer

Mentor

Bob Duncan, Senior Product Designer

Timeline

4 weeks

2020, September - November

Background

Gotta Have S'more (GHS) is a specialty dessert company based in Los Angeles, California. While the product is available on multiple third-party websites, the long term business goal is to funnel most GHS orders through their own website so that customers can avoid inflated prices, and the company won’t have to pay third-party fees.

Design Challenge

Because the current GHS website is not reliably functional or available, the main challenge at the beginning of the project was to work within the existing branding to refresh the current website and in doing so, establish better trust in the brand.

After conducting moderated user walk throughs and a heuristic evaluation of the existing website, I refined the primary problem statement to guide my redesign.

How might we clarify and simplify the purchasing flow so that users feel empowered and confident when ordering through the GHS website?

Design Objective

In addition to refreshing the overall look and feel of the website, my design solution accomplishes the following outcomes:

• Clarify and simplify the purchasing flow through a redesign of the website information architecture and user flows
• Increase customer trust and confidence by implementing consistency and standards across page layouts and content

If you'd like to learn more about my design process for this project, please scroll on!

Preparation

• Stakeholder Meeting
• Project Timeline
• Research Plan

Research

• Market Research
• Competitor Analysis (Flows & Design Patterns)
• User Interviews & Testing of Existing Website
• Customer Journey Map
• Research Validation - Heuristic Evaluation
• Priority Improvements

Ideate & Define

• Project Goals
• Site Map
• Page & Feature Requirements
• New User Flow
• Feature Prioritization Matrix
• Sketch

Design

• Wireflow
• Mid-Fi Wireframes
• Mid-Fi Prototype

Test

• Usability Test
• Findings Synthesis

Iterate

• Priority Revisions
• Hi-Fi Prototype
• Responsive Cases
• UI Kit

Tools

Airtable • Evolve • Figma • Google Suite • Miro • Notion • Zoom

Needs Assessment & Project Timeline

To kick off this project, I met with the client to establish their current operations process, business objectives, and project needs. Annalisa and I had worked together in my previous job, so I was familiar with their product. However this meeting was still important to learn more about the people behind the business, their operations process, and their clientele. It also helped to set expectations and goals for the website redesign.

To ensure that I would meet the 4-week project timeline, I created a timeline on Notion to keep myself organized. By using calendar, kanban boards, and table views, I was able to plan ahead, track my progress, and stay on schedule to hit the project deadline.

Market Research Trends

Demand & Delivery

• The market for desserts is alive and well
• Demand for in home desserts expected to increase due to COVID-19
• Delivery options and individual packaging are important

Customization & Uniqueness

• Ability to customize along with unique flavors and textures are popular among young people and trending boards.

Health

• There is a slight trend towards healthier options and portion control - snack-able size is important.
• Important to include ingredient and allergen information (including vegan and gluten indicators)

Competitor Analysis

Analyzing direct competitor flows and design patterns gave me insight on common practices within the industry, and compiling the information in Airtable provided me with a gallery resource to refer back to when creating my own design.

Purchasing Flow Comparison

I mapped out a user flow of the existing GHS website to learn more about the product offerings and the platform functionalities. I then compared the GHS purchasing flow to its competitor flows to better understand where the GHS website is situated in the current landscape, focusing specifically on how competitors organized the various shipping and delivery methods.

Takeaway

In doing this background research and in talking to the owner, I learned that in order to ensure customers could correctly place their orders, the most important business constraint I needed to consider in my solution was that the current GHS fulfillment infrastructure dictates two different purchasing channels: Los Angeles shipping through the GHS website and national shipping through Goldbelly (a third party platform).

Empathizing with Customers

The next step was to assess the current GHS website to evaluate its strengths and areas for improvement with real users. To accomplish this, I conducted walk-through usability tests on the existing website with three participants.

Test Methodology

• Moderated remote video screen share sessions
• Brief interview
• Task: "Let's say you tried these desserts at an office party, and now you would like to order some for your friend's birthday. How would you go about doing that?"
• Survey assessment to rate overall experience with the website

Interview Findings Synthesis

I compiled my interview data onto an affinity map and a customer journey map to identify the core customer needs and key areas for improvement on the existing website.

Test Findings

Ordering Paths - It was not obvious to participants that they needed to follow a certain ordering path based on their delivery location (local vs. national delivery)

Customization - Participants had many questions about the level to which they could customize their orders

Website reliability - Post-test survey indicated lack of understanding in product offerings and lack of confidence in quality of execution. This was partly due to the fact that the purchasing function was not currently working.

Customer Goals & Needs

Users typically buy specialty desserts to celebrate special occasions or to indulge in something they cannot make at home.

Users need to make informed decisions and feel confident in the money they are investing in their purchase (transparent pricing and customization options).

Users want to trust in the security of their purchase and execution of delivery.

Heuristic Evaluation

As a final assessment of the current GHS website, I conducted a heuristic evaluation of 60 different criteria based on Jakob Nielsen's 10 Usability Heuristics and the LEMErS principles.

Takeaways

Areas of non-compliance correlated to user pain points discovered in usability testing. Addressing the areas below would be essential in improving the overall user experience on the new GHS website.

Availability and presentation of information

Website, and therefore brand, trustworthiness in question

Guiding Problem Statement

Priority Improvements

Based on my research and an impact-effort matrix exercise, I prioritized three areas for the new website design that would solve for the problem of increasing user confidence and agency.

1. CTA & Purchase Flow: Create clear CTA that will guide customers down the correct purchasing flow

2. Availability of Information: Clear and consistent information

• Product detail information
• Customization offerings
• Delivery and shipping information

3. Check Out: Seamless and secure flow

Establishing an MVP

In order to define my solution, I began by laying out the different business and user goals within the context of technical considerations and constraints. Then I went to work on defining my MVP with a feature roadmap, user flow, and site map.

Information Architecture

At this point in the process, my main challenge was to explore different solutions to guide users down the correct purchasing channel (GHS for Los Angeles shipping; Goldbelly for national shipping). I went through several iterations of user flows and site maps throughout the define and wireframing phases before landing on the initial prototype solution.

After working on the wireframes and getting feedback from my mentor and peers, my final site structure focuses on the availability of information within each page to inform and guide the user toward the correct ordering portal.

Sketches & Task Flows

Wireframes

After establishing an MVP and finalizing the information architecture, I moved on to the branding and wireframes for the website.

Challenges:

• Building off the existing website copy, I took special care in crafting a sales pitch for the landing page to sell the value proposition of these unique desserts.
• I got a little too caught up in editing the existing product shots. While I believe that product shots are important for the final website implementation, I likely did not need to spend so much time here for my usability testing, as the owner agreed to retake the product shots at some point in the future.

Usability Testing

Test Subject: Hi-Fi Figma Prototypes

• National shipping purchasing flow
• Los Angeles shipping purchasing flow

Methodology:

• Moderated screen share session in which participants were asked to "Think Aloud" and complete tasks related to the overall purchasing flow.
• Survey assessment to rate overall experience and to assess user confidence in making purchase through new GHS website.

Participants:

• 4 participants
• Age range: late 20s - mid 30s
• Locations: California & New York

Usability Testing Findings

Using Evolve, I organized the test data to evaluate the results against my test plan goals and note any major usability issues in the prototype.

Measuring Success

Success for the goals outlined below will be measured by task completion rate, error free rate, and results from overall experience assessment survey completed by participants.

Test Goal #1: Participants understand the different product offerings and which products are available for purchase online.

Test Goal #2: Participants understand the different purchasing channels based on delivery type and different shipping methods.

Test Goal #3: Participants found check out process to be familiar and intuitive.

Test Goal #4: Participants find the company to be trustworthy and have confidence in their purchase.

Key Insights

The product is unique and intriguing, but because it is unfamiliar, availability of information is paramount.

Based on a comparison of survey results from the existing website walk through and my prototype, users reported increased trust, confidence, and satisfaction in brand and purchasing experience.

Information Availability

Increase availability of pricing information.

Clarify Labeling

Clarify labeling within product information architecture.

Branding & UI Kit

Without redesigning the Gotta Have S'more logo, I pitched some ideas on how to refresh the overall website branding to the company owner. I wanted to ensure that the new design reflected the playful and young-at-heart essence of their s'more product, but perhaps I went a little too young with my first iteration. After presenting my initial wireframes to the owner, we agreed to simplify the overall branding by removing the margin illustrations and focus on revamping the product shots for the website.

Final Prototype

Would you like to try purchasing one dozen of the Birthday Celebration Pack s'mores? Feel free to give my prototype a go.

Conclusion & Next Steps

By creating standards across the pages and including more information regarding shipping and delivery options throughout the purchasing flow, my design solution increased customer trust and confidence in the Gotta Have S'more brand. It was and is my pleasure to help Annalisa with her goals in growing her business.

I continue to work with her team to provide some creative direction on their new product shots to ensure that each s'more and s'more pack has side and cross-section shots. I am also working with them to find a website platform that will be easy for the team to manage and update on their own.

Lessons Learned

• In the wireframing phase and first round of usability testing especially, prioritize layouts and general structure. Don't spend so much time on photos, branding, and UI, as that may change down the road.
• Don't be afraid to get feedback as early as possible, and don't be so precious with your creations.

Acknowledgements

Thank you to...

• Annalisa, for the opportunity and partnership in redesigning the Gotta Have S'more website
• Bob Duncan for his guidance on this project
• Interview and usability test participants for their time and insights
• DesignLab peers for their feedback and suggestions
• You! For taking the time to check out my case study