Mobile App User Voice Interface design for online grocery shopping
Timeline: 5 days (Design Sprint)
My role: research, user flows & stories, sketching,
wireframing, visual design, prototyping, motion graphic, responsive design
Tool: Adobe XD, Illustrator, Invocable
The big idea with the Design Sprint is to build and test a prototype in just five days. You'll take a small team, clear the schedule for a week, and rapidly progress from problem to tested solution using a proven step-by-step checklist. It's like fast-forwarding into the future so you can see how customers react before you invest all the time and expense of building a real product.
—— <SPRINT>
SPRINT AGENDA
Defining the Problem
On Monday, which was the first day of the design sprint, our team first focused on understanding and definingwhat problem we were trying to solve. Our goal is to design the voice user interface (VUI) to provide a better online ordering experience for customers. Our client is the Canadian online grocery store – Grocery Gateway owned by Longo’s.
We started off by listing down questions we wanted to answer for this sprint.
Some questions include:
In what situation do people use voice command?
How can voice command process orders?
Who can benefit?
How is voice command more effective than typing order?
We then moved on to create a map to illustrate how a customer might move through and navigate the shopping experience on Grocery Gateway using the voice command function.
Inspired by the Google‘s “I’m Feeling Lucky” function ( Though it’s debatable that whether it is a useful or quirkiest function, we still got some inspiration from it), we came up with an interesting idea —— the “Yummy Yummy” function.
How Might We?
In order to optimize our idea we continued brainstorming and delved into the “How Might We?”technique.
This technique allowed us to define potential opportunities, challenges and it allowed us to see the big picture, and it reminded us to not jump to the solutions quickly.
HMW Apply the recipe order function in voice command?
HMW open the inspiration function says ‘Yummy Yummy’ ?
HMW inform users the voice command has been received?
HMW make ordering on the go easier?
HMW order items based on a specific recipe?
We started off with lightning demos. We benchmarked other companies such as Google and Amazon, and see how they tackled using voice in their interface. We captured ideas of what people liked from those ideas they used, and determined which ideas might be useful for us to include or possibly enhance our design.
Boot up crazy 8’s Sketching:
After the Lightning Demos, we diverged and individually started to sketch out some ideas and solutions that addressed the problem we were trying to solve in this sprint.
After getting a better understanding of what design solutions we should focus on based on our prioritization grid outcome, we reviewed our Crazy 8’s sketches together and picked out the best solution to explore and prototype for the sprint.
Making Decisions - prioritization grid
Since we already had lots of ideas from Tuesday Sprint’s Crazy 8, at this stage, we need to make a decision to finalize our GUI Design.
Essentially the prioritization helped us determine what was the most important component we should focus our attention on when finalizing out design solutions.
After getting a better understanding of what design solutions we should focus on based on our prioritization grid outcome, we reviewed our Crazy 8’s sketches together and picked out the best solution to explore and prototype for the sprint.
Storyboard
Wireframe
we started off by taking our solution sketches and rapidly wireframed them digitally.
Hi-fidelity prototype
After wireframing, we proceeded to create the high-fidelity prototype to our solution. The prototypes were created based upon the original design of Grocery Gateway. We focused on creating reasonable and well-organized Voice User Interface and tried to apply our uniquely inspired ideas on the Voice User Interface.
Yummy Yummy!
‘Yummy Yummy’ is our special feature for inspiring users by recommending them some recipes ideas.
Users have an option to pick Breakfast, Lunch, Dinner, or Baby Food recipes.
Baby’s Food
The Baby’s Food recipe is mainly for families who are constantly busy at home taking care of their children. And where these families find it difficult to prepare meal plans and cook meals because of their busyness, and exhaustion as mealtime rolls around.
Prototype Video
Yummy Yummy
Order and Remove items
User Testing Script
Following that, we started to draft out our usability test script where we created scenarios and tasks for our users to complete during the test.
Getting Feedback
Firstly, we conducted a usability test with 5 participants. Then we analyzed our participants’ feedback and organized them into a feedback grid to get a visual representations of our findings.
Our Team won the best Capstone Project Award
Retrospective
What worked WELL?
HMW notes were going well to generate our special concept ‘Yummy Yummy’.
Map was created well to set the structure for us to follow.
We all enjoyed the Crazy 8 sketches. It helped us inspiring a lot better.
We got lots of good feedbacks to improve our ideas from our participants after we conducted the usability testings
What DIDN’T go well?
Adobe Xd had very limited functions of prototype for the Voice User Interface
While conducting the usability testings, the VUI featured prototype was not accurate and responding well.
The original user interface of Grocery Gateway still needs to be improved.
What we might try NEXT?
Have more options of recipes for ‘Yummy Yummy’.
Try using a different prototyping tool to create a better voice prototype.
Not only relying on VUI, show enough text information.
Add the filter that can filter the recipes by type. i.e. “vegan”, “paleo”, or other dietary types.
BONUS SCENE – RESPONSIVE DESIGN
We used Invocable to promote our VUI Prototype, build a chart of the voice interactions. At the same time, we transformed the mobile interface to Web pages, created the responsive design
