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.

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.

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

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Test Subject: Hi-Fi Figma Prototypes

Methodology:

Participants:

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.

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.

Increase availability of pricing information.

Clarify labeling within product information architecture.

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.

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

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.