+ 58 Gourmet
"User research and Ideation of an All-Responsive website for a Doral local bakery "
Challenge: How Might We help a local shops improve their online presence to be more competitive in the market
My Role: Research, Ideation, mind mapping, user flow, Sketching, Wire-framing, Prototyping, and UI.
My Client: + 58 Gourmet.
Timeline: 3 weeks
Goals:
- Design a full responsive E-Commerce website that allows users to easily purchase +58 Gourmet fresh products and find details about restaurant information.
- Understand Stakeholder’s and user needs, and look for a balanced solution that satisfies both.
- Uncover any other user's pain points and implement new features to solve them.
- Perform a full market research to understand competitors, +58 gourmet market position, and if there are any needs or gaps in the market that could be filled.
Stage 1. Discovery
Some years ago the head of the Industrial Engineering Department of Yale University said, “If I had only one hour to solve a problem, I would spend up to two-thirds of that hour in attempting to define what the problem is.”
Now it was our turn to think about our problem and understand it fully: who our user was? What are their needs? What competitors are doing to fulfill these needs? What are our stakeholder needs? What is our place in the virtual market compared to others? What can we do to change it? And many more we hoped to answer.
Interviews
The first step we took to understand our problem was getting the whole picture, for that reason we decided to do two completely different set of interviews:
One for the customers and another one for the stakeholders of the company to help us analyze what was needed on both ends and how we could tie it up together. .
User Interviews
Customer interviews were designed to capture the user’s perception, pain points, and appreciation of the business.
They were done by me on the restaurant grounds. How? Quite simply, I approached prospective interviewees that were arriving and explained the agenda: I needed their help answering some questions, and if they were so kind to help me out, they would get a reward for helping me out: A free “Pan Dulce”, a Venezuelan treat.
We managed to obtain the input we needed by using open, lead, and closed questions, collecting both quantitative and qualitative data. Some of the questions we asked were: purchase frequency, how did they hear about the place, knowledge about delivery options, how did they manage to stay up to date with restaurant updates, etc.
Stake Holders Interviews
Stakeholders' interviews were a little simpler logistically speaking, we set a time and date with them, I went to the bakery once again and Zoom my partner Andrea from there.
We started the conversation by asking about the beginnings of the bakery, what made them decide to create this business from scratch, where did they get their recipes, what is their mission and vision? Business objectives? That led us to where do they see +58 gourmet in five years? What do they need to fulfill that vision and some projects that they are working on now that will help them along the way.
These interviews helped us understand their point of view, the way they work, and what makes +58 Gourmet special, we will use this new information when we start ideating later on.
Business / Competitors Analysis
We already knew who our customers were, what their needs were, and what do the stakeholders require; Now it’s was time to review what's the position of +58 gourmet in the market and who their competitors are: Don Pan, Caracas Bakery, and Bachour Bakery.
Based on secondary data (Online research) we were able to review the Miami Fl, competitors of the market in the following aspects: brand, features offered and value preposition to users.
With this done we were able to create a Market Positioning Map and find our blue ocean (Gap in the market were we can take a competitive edge)
This market position is based on two axes, Type of flavor: Traditional or Innovative, and cost of the product: Affordable or luxury.
We decided to select these Axes based on the priorities of our Stakeholders... As you can see +58 gourmet right now is on the bottom left quadrant, while Stakeholders’ priorities are to be on the top left quadrant; Keeping it traditional while making it more luxurious.
SWOT Analisys
SWOT analysis assesses internal and external factors, as well as current and future potential ones.
This crucial step will help us later on at the moment of ideating a solution. We manage to do this SWOT by the research done using both primary and secondary data.
To start defining our problem, we began by creating some “how might we statements” based on the uncover stakeholders and user needs found on the discovery stage.
With that done we proceeded to create our user persona and their journey
User Persona
User Personas are fictional characters, that we designers create based upon your research in order to empathize with the different user types that might use our site.
Our user on this opportunity was “Issa the influencer” an Influencer from the City of Doral, we created this user persona from profession passing by wants & needs all the way thru frustrations and brands basing ourselves on both the stakeholders and customers interviews, and also by adding the desired market position into the mix.
User Journey
A user journey is a current experience our user persona is having when purchasing on +58 gourmet without interacting with our solution. It describes at a high level of detail exactly what steps Isa takes to complete an interaction with the bakery. It also shares her emotional state along the way with her actions..
How Might We's
Now knowing our user and their journey, we decided to end the discovery state by creating some "How Might We's", this later helped us on the ideation stage as we summarized some of our user struggles that our idea should try to solve
Stage 3. Ideation
Brainstorming
Finally, it was time to start ideating a solution, for this Andrea and I started listing all things that will be needed to solve our “How Might We’” statements, always keeping in mind the user needs, wants, and pain points and our Stakeholders priorities.
Card Sorting
Once we had our features and priorities straight it was time to ask our users how they would organize such features inside our solution. Card Sorting is a tool we UX designers use with our subjects to understand “What will be the grouping and hierarchy of the components offered according to their point of view”
Sitemap
With our Card Sorting results we were able to figure the structure and grouping of our solution. This is what a sitemap is: A hierarchy plan of our solution, a step by step of how everything is connected and organized.
Sketches
Now that we have a solid concept of what was needed and how could we provide it, it was finally time to start sketching our solution:
Stage 4. Prototyping
Low-Fidelity Wireframes
Low-Fi prototypes are pen and paper prototypes we use to test our design solution for our potential users; we do them as basic as we can in order to test and correct as fast and at low cost as possible. The point of them is to see if users can complete step by step what is requested from them.
We tested the order online function with multiple users that provided us valuable feedback that we will share on the next stage “validation Stage”.
MID-Fidelity Wireframes
Mid-Fi Prototypes are the same prototypes but created on a computer program (it can be sketch, Figma, adobe xd, etc). They are black and white or unicolor and they help correct any error left out on low fi testing or new ones generated at the moment of implementing computer-generated images into the prototype itself.
Here we tested with our potential users the three tasks proposed on our task analysis: Order Online, Fill the Franchise Form, and Find Working Hours.
We got feedback and corrected those observations, This helped us improve our High-Fi deliverables.
Stage 5. Empathize
User Feedback on Low-Fidelity Wireframes
Low-Fi prototypes are pen and paper prototypes we use to test our design solution for our potential users; we do them as basic as we can in order to test and correct as fast and at low cost as possible. The point of them is to see if users can complete step by step what is requested from them.
We tested the order online function with multiple users that provided us valuable feedback that we will share on the next stage “validation Stage”.
User feedback on Mid-Fidelity Wireframes
Low-Fi prototypes are pen and paper prototypes we use to test our design solution for our potential users; we do them as basic as we can in order to test and correct as fast and at low cost as possible. The point of them is to see if users can complete step by step what is requested from them.
We tested the order online function with multiple users that provided us valuable feedback that we will share on the next stage “validation Stage”.
Stage 6. User Interface
Branding
For the branding of E-commerce, we decided to keep the same elements and colors of the bakery itself as its one of their biggest advantages
All pictures were provided by stakeholders and the Elements of the webpage were customized to maintain the look and feel of going to the store.
UI Screens
Now that we had everything done, it was finally time to put it all together!
We decided to do both light and dark mode and let stakeholders decide with one they prefered.
Takeaways
Working with stakeholders was a challenging but good exercise, being able to understand their needs and looking at how to pair those with user needs is a big part of the job of a UX designer that we should not overlook. Seeing the face of the stakeholders with the final product was a great reminder that hard work pays off.
A special thank you to the Pulido family for giving us the opportunity to work with their brand, to my partner in this project: Andrea Marquez and thank you for reading!
