Pro-Bono Client E-Commerce Website Redesign and Information Architect Restructure
Role: UX/UI Designer & Project Manager
Teammates: Christian C. & Greg D.
Skills: User Research, Visual Design, Information Architect, Competitive & Comparative Analyses, User Interviews, Affinity Mapping, Persona, User Flow, Journey Mapping, Sketching, Wireframing, Mood Boards, Prototyping, Usability Testing, Usability Test Surveys
Timeline: 2 Weeks
Tools: Figma, Slack, Google Forms, Google Docs, Zoom
Earth Made Kitchen is a small culinary business founded and operated by Amanda H. She started Earth Made Kitchen by posting virtual cooking classes during the pandemic. Looking at Earth Made Kitchen now, the business has expanded to private classes, group classes, and a few in-person classes.
Amanda came to our team wanting a revamp of her website and branding. As a team, we hypothesized “By updating the information architecture/navigation, visual design, and copy, users will be more compelled to sign up for virtual cooking classes.”
What is Earth Made Kitchen?
The original Earth Made Kitchen site Amanda presented to us at the client meeting.
The final Hi-Fi prototype with the brand redesign and new top navigation bar.
Project Goals
On the statement of work, we highlighted three main goals to our client…
Improve the site information architecture and navigation to more quickly direct users to high-priority actions (signing up for classes, email subscriptions, etc.)
Streamline the flow for users looking for and booking classes, and find ways to make it exciting
Redesign visual elements and branding of website, updating it to better reflect EMK’s voice and grab the attention of target users
Phase 1: Research
Before we proceeded with user interviews, our team researched competitors to examine what works well for other cooking class websites. In addition, familiarizing ourselves with other cooking class sites allowed us to craft a strong set of interview questions. There wasn’t one site that stood out from others but, there were features that could elevate Earth Made Kitchen. We kept in mind our MVPS for this scope of the project as we looked into these features.
Competitive Analysis
My team and I interviewed Mothers because this was the specific user group Amanda stated as one of her top customers. We performed a mini-usability testing on Earth Made Kitchen’s current site as well to see what areas were lacking.
User Interviews
Phase 2: Ideation
User Persona
Our team came together after the interviews and created Tammy. She was the voice that followed us throughout the project because there were moments in the project when it was easy to design something that looked “aesthetic”, but it always went back to… “What does Tammy need? How can we help solve her problem?”
After seeing what Tammy’s values and pain points were, I thought to myself…
How might we save Tammy’s time with meal planning, prep, and cooking?
How might we empower Tammy to confidently explore new dishes?
How might we provide a way for Tammy to learn to cook intuitively?
How might we engage Tammy’s value of family in her cooking?
Let’s Start Cooking!
As a team, we designed our own sketches to narrow down which designs fit best for each screen we envisioned. Below are the sketches I drew. Many of the elements I drew were decided on for the final prototype. Sketching is a step I always value because I can better understand my teammates’ style of design and see different variations of the same idea. I feel more confident when I create the strongest foundation before adding any visual elements.
The key aspect we kept in mind was to stay within the same checkout flow process through Eventbrite because Amanda wanted to still partner up with Eventbrite. This gave us more time to focus on the goals we set and cleaning up the aesthetic/branding of the page to match what Amanda described her brand as, “modern, simple, friendly, and clean”.
Phase 3: Design and Plating
Mid-Fidelity+
During the Mid-Fi+ stage, I took charge of cleaning up the new layout, designing the info cards, and implementing specific dish images. I believed that images were the main showcase points for a culinary website because it’s a huge deciding factor for a user. In adding the photos to the Mid-Fi+ I wanted to bring in stronger feedback to make improvements to the Hi-Fi. Mid-Fi+ was an idea of keeping everything within a grey-scale but adding some photography and fonts.
Mid-Fi+ Testing
Mid-Fi+ Testing Results
I was pleased with the results because I knew the changes would improve the user experience. I examined where users weren’t as satisfied in the survey and took this in mind to make tweaks to the Hi-Fi design. Moving forward to the Hi-Fi prototype, I was motivated since most of the users were impressed by the new direction our team took with the new branding aesthetic.
Branding Style
Cleaning up the Kitchen… I mean Prototype!
In the final Hi-Fi prototype, we created a new branding throughout the site to embody the client’s style, “simple, modern, playful, and pops of colors”. Circling back to our persona, Tammy will be more enticed to interact with the website, have a better sense of credibility for the brand, navigate the website more seamlessly, and become a better cook for her family. Our client loved the final prototype and will be moving forward with our redesign for her business! Click here for the Figma Prototype!
What I learned…
“Explaining the Why to your design decisions is always important.”
Among the design teammates, there were disagreements deciding on various decisions such as color, typography, placement, etc. However, I always defend my choices with a why. My why always started with reminding my team what our client needs and the user that we must design for. In addition, I carried confidence in my designer style which I explained why things worked best with each other, whether that be fonts, colors, or photography. Our team moved forward with the design styles I advocated for because it ultimately did benefit our client and user best.
“Understanding what your client envisions.”
Doing an activity with our client to understand the brand feel, style, and colors helped my team narrow down elements more quickly. This project taught me that working with smaller businesses may mean helping clients learn more about their brand because they will learn through the explanation of the designer how powerful visual design brings together their business.
“Project planning and communicating make a huge difference.”
As the project manager for my group, there were moments in the project our timeline didn’t go as planned; but, I learned to adapt and think fast. I was skilled in time blocking and prioritizing tasks that must be completed each day. In addition, I emphasized an open dialogue to allow other designers to express their opinions and critiques. This ultimately created our best designs because each designer challenged the other through the process to narrow down and produce the most thoughtful designs.
NEXT STEPS
Moving forward into the future there are three next steps I would add to the recipe book ;)
I would aim to test 5-8 real existing customers of Earth Made Kitchen to see how they adapt to the changes and what they preferred.
I plan to research further into newsletter pop-ups. I would look into where the most effective spot to appear the interaction. In addition, I want to dive deeper into how discounts or promo codes can be a strong incentive of getting users to sign-up for newsletters.
One of Amanda’s common user groups is senior citizens. I’d love to do a user interview with senior citizens to see if there are variables that must be considered for accessibility.