ABC Groceries
A online grocery shop offering recipe inspiration
With Amanda Basso & Thomas Pedelaborde
2017 / Ironhack / Paris, France
For this student project, we designed a website for an imaginary grocery shop that wanted to keep up with the competition by offering its customers two services:
1. Online shopping with local delivery
2. A premium feature to stand out from other online grocery shops
We applied design thinking to discover what shoppers need in an online grocery shopping experience, and what kind of premium feature might engage them.
Our solution was an online grocery shop featuring a recipe sharing community.
How we did it: first, UX research & design:
An interview guide canvas helped us figure out what data we needed from our users:
A lean UX canvas tool helped us focus on the business problems we needed to solve (rather than what solution to develop) and then break down the business problem into assumptions, from which we identified the riskiest hypotheses we can test -- the hypotheses that, if wrong, would make the project fail.
A lean UX strategy blueprint helped us think about how the design will help the business win in its strategy by providing value to customers in a uniquely meaningful way:
Once user interviews and surveys were completed, we organized the resulting data into an affinity map to gain insights and decide on a direction to pursue:
Then came brainstorming -- here you see Thomas's mind mapping:
We brainstormed further with the "round robin" technique, which inspired a website structure to support our recipe community idea.
We created a persona to represent all our users. "Julia" helped us keep focused on the direction we chose -- easier than trying to think about all the things are users said and potentially going off on a tangent.
Mapping out a typical user journey helped us discover opportunities to solve critical pain points:
Then came paper prototyping...
...and testing!
With our paper prototype (and thus our concept and site structure) validated, it was time to build the wireframe:
Once the wireframe prototype was tested and validated, we moved on to visual design, starting with a mood board to think about the "personality" our brand should have (still keeping our user research in mind!):
And then a style tile based on the mood board, to define design elements like color and typography:
We then applied the visual design to our wireframe, and you can see the results back at the top of the page.
Thanks for reading!
