MY PROCESS & ROLE:
As the sole designer on this project, I was involved end-to-end from research to strategy to the design process. Starting with understanding client goals and needs and the target audience using personas, I identified user pain points and needs. This was followed by ensuring content and functionality requirements in accordance with client goals and user needs. Based on that, I envisioned & designed the first round of information architecture through a sitemap and low fidelity wireframe. This was tested on users through on online tree survey. Finally, a look and feel was established and a brand identity was created, leading to a high fidelity mock up of the final site.

Information Architecture - SiteMap

USER TESTING - ASSUMPTIONS, DISCOVERIES, LEARNINGS:
A site map was created based on content and functionality requirements and tested on users belonging to the target group as well as some in other metropolitan cities such as New York, LA, San Francisco, and Melbourne. 
The site map was 80% successful with only one user pathway that needed reconsideration: cancelling a meal plan had to be placed upfront, even 'before' the user gets involved in the ordering process to maintain complete transparency.

The least successful user pathway given the task to cancel a meal plan 

BRANDING
User testing was followed by making necessary tweaks in the wireframes and diving straight into creating the look and feel of the website which included establishing a brand identity, color palette, type treatment and photography.​​​​​​​
FROM WIREFRAMES TO HIGH FIDELITY PROTOTYPES:
Based on user research and a few more tests, the following was the development from wireframe stage to prototype. As you notice below, the header menu bar finally got collapsed into a hamburger menu on the right so the image of food gets more real estate. Also a few changes were incorporated in terms of the placement of the Zipcode field since that was the first thing we wanted the user to check before browsing the rest of the site. Footer items were also added to tackle a few details that were previously missing.

Video Walkthrough of Prototype

Back to Top