Pickle

To formalise my approach to UX design I completed a 10 week part-time User Experience Design course at General Assembly.

Throughout the 10 weeks all aspects of a lean UX process were covered, with weekly in-class projects as well as an ongoing major project that was presented and assessed at the end of the course. The following is an overview of my final project which included conducting user and competitive research, synthesizing research, personas, user goals and user flows, wireframing, user testing, prototyping and high-fidelity UI design.



Initial concept

As a pescartarian (or Vegequarian if you prefer!) ordering takeaway from online services like Just Eat and Hungry House can be a laborious process. Sifting through pages and pages of chicken to find the one seafood dish that I might want to order. I initially set out explore this problem as my final course project with one simple goal in mind...



Discovery

Starting with the Discovery phase of the project I immersed myself in the world of eating restrictions and intolerances. It was a lot more complicated that I had expected. As well as common eating preferences like vegan and vegetarian, there are also food intolerances, diets for medical reasons and allergies to foods like nuts and fish to name a few. To keep the project manageable I chose to focus the most common eating requirements/restrictions. With those in mind I did a competitive comparison, confirming my assumption that there was very little consideration given to eating requirements when ordering online. From there I defined my research goals and a set of draft questions to use for my user research.


Research Goals

  • Gain a broad understanding of the different types of dietary needs, (restrictions vs. preferences vs, allergies etc.) and the impact these have on people’s food choices and interactions with food.
  • Identify the current challenges facing people with special dietary requirements when ordering takeaways online.
  • Determine if there is a want from the dietary requirement community for a online takeaway ordering service catering to their needs.
  • Use findings to explore solutions to the current limitations

Research Questions

  • What are your dietary requirements/restrictions/preferences?
  • How do these requirements/restrictions/preferences a ect your approach to eating/preparing/buying food? What special arrangements (if any) do you need to make when eating/preparing/buying food?
  • Can you recall a situation where your requirements/restrictions/preferences have caused you difficulty or inconvenience?
  • How often to you order food from takeaway restaurants? Where from and why from that particular restaurant?
  • If it was easier to order appropriate food online, would you order more often?
  • If you do not prepare food for yourself, where do you get your food from and why?

My user research took the form of online surveys, Skype interviews and face to face interviews. I refined my questions as the series of interviews progressed, dropping those that were leading to less relevant information and adding new questions based of the success of previous answers and discussions.

Synthesising Research

I then synthesised my research into an affinity map, isolating six key pain-points and needs. From those I then created two personas. Millie is my primary persona, her goals, needs and user story cover the bulk of the issues that I found in my research - trust, ability to customise meals, in-depth information about the ingredients. Leigh, my secondary persona is concerned more about the health aspect of the food he orders. I only focused the primary persona for now with the view to address my secondary persona in Phase 2.



The Solution

With my personas and my research I started to look at how to go best solve the problem, and created my hypothesis. I then started my concepting, starting with user flows. Initially my user flow added the ability to customise dishes to what was otherwise a fairly standard online takeaway service. The user finds a dish, customises dish to suit their needs and adds to cart. After exploring this more I realised this was potentially a time consuming process for the user having to manually customise every dish, especially in the case of repeat users.

To improve this I reworked the flow so when a user visits the website they have the option to create a user profile, inputting their eating preferences & restrictions. These preferences are then automatically applied to any menu that they view, essentially making every dish viewed at every restaurant compatible with their specific requirements.


Prototyping

My low-fidelity sketches proved that the overall flow was working but that I needed to included a deeper level of detail to test the wording and functions within the app. On my mid fidelity prototype I shifted to visualising on an iPad after making the decision to design my app as a responsive website rather than a mobile app. I visualised a combined signup/on-boarding and the restaurant menu page where a lot of the pain points were addressed and tested. I testing this prototype using digital wireframes created in Sketch and compiled into a prototype using Marvel.

View Marvel Prototype



Testing & Hi-fidelity

On my high fidelity prototype I added the branding and refined the layout and overall styling. The onboarding text was reduced, and reworded to better highlight how the personalised user menu feature worked. On the menu page, additional information on the restaurant was added, the customising function was improved to allow users to undo changes they made to dishes and to new ingredients. I also increased the visibility and importance of the two menus - the "Personalised" menu and the restaurant’s "Standard" menu by adding large buttons at the top of the page to toggle between the two.

View Marvel Prototype



Testing & Refinements

I have highlighted two usability improvements here that came out of my user testing. The first is the add to cart function. There was confusion in almost every test between the ‘finished customising’ button and then having to add that to the cart. I reworked this process so the dish is added straight to the cart when the done button is clicked. Testing proved this to be a big improvement over the previous prototype.

The second improvement was again to do with the “users personalised menu” and “restaurants standard menu” function. There was still some uncertainty here about the difference between the two menus. To address this issue I added a ‘loading’ style pop up to remind the user that the app is actually filtering and personalising the restaurant menus to suit their profile. Testing proved this to be an improvement in the users understanding of the two menus.

View Marvel Prototype