Sage is a local meal delivery service that aims to deliver ready-to-go cooked meals right to their customersā doorsteps. It is currently owned and operated by Carrie, a former cook and chef at a local catering company.
As the company continues to grow, Carrie would like to have a quicker way to take orders and payments. In addition, it would be great to have a better way to show customers how the business work. An icing on the cake would be providing a seamless ordering process for the user.
For research, I conducted market search to look at the current trends of meal delivery services. I opted for a quick competitive analysis to look at some direct competitors that are also located in the Seattle area. Then I moved on to gathering more specific insights through a survey and user interviews.
The goal of the research phase is to hopefully answering some of the following questions:
Many meal delivery services have an emphasis on specialty meals and dietary restrictions. With the rise of electronic ordering of grocers for pick up and delivery and online sales of grocery items from e-retailers and major grocery stores, meal deliveries have exploded over the past few years.
I sent out a survey and conducted user interviews to understand why people signed up (and cancelled) a meal delivery service.
I used the survey to gather quantitative data on how they generally feel about a meal delivery service while the user interviews gave me detailed insights on their goals and pain points.
I conducted 4 user interviews. All four interviewees had experiences using HelloFresh. Price seems to be the most important factor for when people are choosing a meal delivery service.
After conducting user interviews and the surveys, I was able to outline more defined features and create a user flow that would best suit this project. I only had a timeline of 4 weeks to complete this project so it was important to prioritize what features to add onto the responsive website.
I created a short list of features based on the findings and believed these would also help Carrie solve some of the problems she was facing with the current Sage website.
For the redesign of Sage, I decided that it wasnāt exceptionally crucial to have a lot of features. Here is the list of the features I ended up building out.
After defining the important features that must be implemented and also defining the user flow, I moved on to sketching out wireframes and looked at how various sections and pages would seamlessly sync up with the others. I explored a few different options here.
I didn't do a lot of ideation for this project. After a few rounds of initial sketches, I went ahead and started creating wireframes on Figma. Even though I initially wanted to focus more on the ordering and payment, I explored some layouts for the homepage as well.
Use the arrows to navigate:
Slide 1 shows the first iteration of the ordering process which is essentially an infinite scroll.
Slide 2 shows the second iteration of the same process but this time, I decided to separate each time into individual steps.
The website is built on Squarespace, instead of replicating the components on squarespace, I created a basic style guide that would help me create high fidelity prototypes later on for usability tests.
I picked the colors based on her current brand and also color-picked a few accent colors from the primary images used throughout the website.
I explored different layout options and defined the styles for the website in the Ideate phase so it made sense to move on to building out the actual prototype that I will later use to conduct usability tests. I really do enjoy testing with high fidelity prototypes if time permits that because I generally am able to get better feedback and insights.
Use the arrows to view steps 1 through 4 of the ordering process.
I was able to do two rounds of testing with the prototypes I built. The first one was a moderated usability test session. From that, I was able to gather insights of how users might proceed to order meals off the Sage website.
Due to time constraints, I ended up using Maze to do a remote, unmoderated testing session. I decided to try to utilize Maze because I thought it would be helpful to try to test out different softwares that I might encounter in the future.
I set out a few basic objectives for the usability test.Ā The main goal is to find out how people feel about having a third party payment (instead of an integrated one). Also, I wanted to see if people feel delighted about the overall experience.
In short, the first iteration didn't fare so well. Nonetheless, I did gather valuable feedback. It was good I 'tested' early and decided to do a second round of usability testing.
Selecting meals and dietary restrictions.
Use the arrows to see the difference between the first and section iterations.
Review and Payment
Use the arrows to see the difference between the first and section iterations.
For this project, I went down a pretty standard design process. Nonetheless, I do realize that Iāll have to check back on my own documentations more frequently. A lot of the hiccups I encountered during the design process (and the usability test that came after) could have been mitigated if I actually referred back to the documents that I created.
Overall, I think having two testing sessions was helpful because I was felt like I was really designing to solve the pain points of users. I think this project is somewhat difficult because without considering the marketing aspect of things, just having good UX is probably not going to help the business grow. But I think having good UX would at least make users feel delighted and confidently choose Sage as their meal delivery service š