Key features
- Elementor Pro
- CPT-UI
- Motion effects
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
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.
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.
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.
