Portfolio

Ice Cream Shop

I had the opportunity to design and build a website for a local food truck that serves specialty shaved ice.

Ice cream shop website

Key features

SnoMo’s Shaved Ice is a small food business that serves a variety of gourmet shaved ice. They serve the central Florida area in various locations as part of the local food truck community.

SnoMo’s approached me with a need for a website that allows customers to browse their menu and learn more about their company.

The process

When working with clients from various industries with different budgets and levels of establishment, the research process tends to vary a little each time.

Client discovery

Perform a guided exploration of the company and expected outcome of the project.

Research

Collect feedback, then simplify ideas to identify data patterns. Translate patterns into actionable goals. Systemize goals in Customer Journey Map.

Wireframes

Keeping user needs in mind, lay out key elements to test how the customer's journey may be supported through UI

Lo-Fi Prototypes

Build a low fidelity prototype to test and observe user flows and identify any incomplete or concerning architecture

Visual Design

Finalize Style Guide using specs defined in Discovery. Craft mockups based on Style Guide, user testing, and stakeholder feedback

Some of my client notes, pre-digitization

Discovery phase

In order to define project goals, I began with Client Discovery. This entailed learning about their brand, customers, business goals, and their expectations from this project.Β 

In this case, I was coming in with no prior food industry experience, so the client’s perspective was even more necessary to create a well-planned research outline.

"The goal of the site would be to give info about [the] shop and to help book catering events."

Over the years, I’ve pulled together a set of prompts that I’ve found helpful in projects – my custom Client Questionnaire (You can see it here). This has saved me time on low budget, small projects. In this case, however, I wanted to collect information on a more personal basis to a) speed up the collection process and b) form a personal relationship with my primary stakeholder to facilitate trust and engagement.

Research

After identifying the client’s goals, I shifted my focus to the user feedback. I was lucky to have access to plenty of feedback from customers. (Thank you, Floridians, for being so opinionated!)

During the discovery phase, I had learned that this client already had a solid handle on their digital marketing. Thanks to their work in this area, we had a fantastic resource from which we could and identify problem areas and opportunities.

I started by creating anΒ Affinity DiagramΒ in FigJam. I summarized one idea per square. Some feedback had multiple ideas. Other feedback offered nothing useful (“It was great, will return again!”) If I were to repeat the study, I would avoid open-ended questions and ask for specificity.

After organizing the ideas into individual squares, I grouped them by themes, then into similar groups of those themes. Eventually, larger and broader categories began to emerge; I tried several different possible groups before settling on four final categories and one “Misc” category.

The biggest challenge here was determining the importance of each theme. For instance, Group D only contains three items, but some of the “Misc” sub-items contain three items too – why didn’t they get their own group?

The answer is Project Goals. There are some ideas here that weren’t relevant to the problems I was trying to solve for, even though I wanted to keep these details in mind when requesting assets/copy or determining CTAs. Those were the ideas that fell into the Misc group.

Armed with data organized into groups with actionable messages, I got to work on the Customer Journey Map. This is a bit different than a User Journey in that I’m including data from experiences the user has outside of this product (website). Since the product is expected to be used during the customer’s visit to the physical location, the experiences of both are intertwined.

I’ll be honest – I’m not a huge fan of detailed User Personas in many cases. I believe they can be too restrictive when trying to plan designs that work for a diverse group of people. When creating a full Customer Journey Map, though, they’re helpful in empathizing with the experience people may have with the brand as a whole.

Organizing feedback into Affinity Diagram groups
Insights were collected in an Affinity Diagram and organized into themes.
Three Customer Personas created for SnoMos
Three Customer Personas, with the [mildly cringe] archetypes: "Busy Mom," "Family Man," and "Fun-Loving Husband."
SnoMo's Customer Journey Map
This Journey Map would have been fun to do with other designers/stakeholders!
SnoMos Wireframes
The first wireframes I sketched for a few sections of Snomo's new homepage.

Wireframes

A lot of ideas were pumping after the research process, so I jumped straight into paper wireframes to get my thoughts onto paper before they fell out of my head.

It was interesting revisiting these after finishing the project, because a lot of the ideas I thought were critically important here actually got de-scoped later during iteration. It’s interesting how some features of the final product are wildly different than how I originally concepted them, while other features were spot on from the get-go.

While planning the visual design, I was simultaneously wondering how the custom post type hierarchy might best reflect the flavors, flavor combinations, and how the user could discover them intuitively. I remember actually feeling guilty for doing this! At the time (late 2021) I thought I had to choose either design or development as my main discipline if I wanted to be an expert in a field. I didn’t realize I could do both and still be taken seriously as a full-time designer! After all, “planning ahead” becomes intuitive after a certain number of years wearing both design and dev hats in a freelance role.

Screenshots of Snomos Social Media
SnoMo's already had a fun brand image established through their social media.

Visual design

Through their posts and promo assets, SnoMo’s had established a consistent visual identity that was recognizable to their customers. It was therefore important to me to remain in line with the branding language they had developed.

The Style Guide was the first page in their Figma file. I began by defining existing palettes, fonts, and recurring design patterns. From there, I was able to flesh out these guidelines by considering the contexts in which they would be used.

The goal was not to limit future designs with a standard, but to provide a framework that would guide designs under SnoMo’s unique personality.