The final project to complete my UI / UX Specialization from Cal Arts.
“Imagine that you've been hired by an entrepreneur who wants to open a new, delivery-only establishment that delivers food (or drinks) to customers living nearby. You have been asked to plan and design the restaurant’s website. The centerpiece of this website will be an online food customization and ordering system. “
Rather than making a fictional restaurant, I wanted to apply my learnings to help a real business. So, I reached out to the owner of Fluffy as Fluff, a Japanese soufflé pancake sandwich restaurant that has been open for less than a year.
Role:
Product Designer
Timeline:
5 weeks
Practices:
Branding, Research, Wireframing, Prototyping, Information Architecture, Visual/UI Design, UX Design
Tools:
Figma, Adobe Illustrator
Discovering user and business needs through taking demographics and ordering habits from past orders, customer feedback, and stakeholder interviews.
After preliminary research, it was important to do an audit of the website to understand its current user flow, and see where the frustrations for customers are, and determine what can be improved.
Major Usability Issues
The largest issue I found through the site audit was the ordering process for customers. In order to simplify the steps and determine which screens were needed, I created a sitemap with important decision points in the user journey.
While Shopify makes it easier for small and big businesses alike to open an online store, there are many features not available to users without paying for third-party plugins along with their monthly fees.
While local delivery and pick up options are built into Shopify plans, choosing a pick up time is one of the features not included. It became clear that there weren't any easy solutions to integrate local delivery and pick up decisions into the checkout portion. Any hopes for adding that feature either required a paid app (Shopify third-party plugin) or a developer; neither of which fit the budget constraints of the project.
Sticking with Shopify’s built-in features, I worked around the limitations by splitting up local delivery and pick up products, making it the first decision point for customers and reducing the number of product pages from 8 to 5.
While it was a good amount of reduction, this solution required a lot of loops, and counting on the user to make minimal mistakes (i.e. choosing the correct type of delivery, not forgetting to choose a pick up time), which would cause extra work for the client in the backend otherwise.
Fluffy as Fluff is a fun and approachable brand to match with their jiggling soufflé pancakes. Not wanting to change this, I updated their branding and styles to better match their vibe and keep the site accessible.
Still not quite happy with our interim solution, I decided to revisit the wireframes and Shopify limitations. Many sketches, more research and hours later, we were able to find a free, customizable product variable plugin.
With this, were were able to be more flexible in our product page design. Now, we could reduce the product pages down to 1, and allow for more product customization that wasn't available in previous solutions.
With the biggest issue solved, I went on to designing the rest of the screens, with a major addition being the FAQ page, where customers can find answers to common questions, freeing up the business owners to continue developing their products.
Would have saved a lot of time if I first got more familiar with the Shopify platform first, to understand further constraints before breaking out to design. Any next steps would include testing the current design with users for further iteration, and then launching.