Portfolio of Saba Nowroozi

Nada Online

Nada Online

nada-combined.png

Nada Online

Problem: Buying local and ethical groceries without packaging is difficult and time consuming.

Design Opportunity: How can we make it easier for adults to shopping locally, ethically, and with minimal packaging?

Solution: Nada Online helps busy adults shop locally and ethically by providing a quick and trustworthy online grocery shopping experience.

How will success be measured? If Nada Online is successful, Nada will have another revenue avenue through grocery delivery and drop off. The number of completed orders through the site will help measure this.

Nada Online Shopping Experience

Digital Tools: Sketch, Invision, Principle

Scope & Role: This project was a solo exploration into how we can make shopping ethically in Vancouver easier. The aim was to create a proof of concept by the end of the 2 weeks.

Timeline: 2 weeks


Design Process


An unpackaged future: a lighter world that values a food system free of excess and waste to support the health of both people and planet.
— Nada
nada-main-small.png

1. Understanding the client

Nada is Vancouver’s first packaging free grocery store, and their mission is to change the way people shop for groceries.

Nada has lots of support from the community which was evident when they reached their crowd funding goal of $25,000 in 24 hours and then went on to double their target goal and fundraise $55,000. They will be opening a permanent physical location but currently do not have an online shopping experience.

Given the success of online grocery shopping, how will Nada provide an online shopping experience for their customers? What opportunities do they have to differentiate themselves from local competitors?  


map-small.png

2. Identifying Problem Space & Opportunity

Problem Space: Shopping ethically, locally, and without packaging is tough.

Buying local and ethical groceries without packaging is difficult in Vancouver.  You have to spend hours hopping around the city if you want to shop locally, ethically, and with minimal packaging.
For example: You head to The Soap Dispensary with your soap and detergent containers, stand in line, drop off your container, wait for them to get filled (5-30 min), stand in line again to pick up your order and pay. Then you go to the local farmers market to get your fresh fruit and vegetables. Then you go to the grocery store to get your bulk items, e.g. oats and beans,  usually in a disposable bag or a box.  The entire process is time consuming, not centralized, and not convenient.

Design Opportunity: How can Nada online make it easier to shop locally, ethically, and with minimal packaging?


3. Research & Synthesis

Understanding the problem space and the human needs 

What are some current local and ethical shopping habits in Vancouver? What challenges and opportunities exist?
In order to get a better understanding of the context in which Nada is working, I created a survey about local and ethical shopping habits in Vancouver, and received 50 responses back. 

Synthesis & Insights from survey

5 key insights came up after synthesizing the research through affinity diagrams & "I Statements”.
1.  There is no concrete definition of  “ethical” shopping. 
2. There is a lack of trust on whether something is actually ethical.
3.  It's not convenient to buy ethically and locally.
4. A strong desire to buy ethical products exists, despite trust and inconvenience issues. 
5. Desire to know where products are coming and the story behind them

Ethical Shopping User Profile

The results of the survey revealed a clear spectrum for ethical shopping habits from with 2 main extremes and many of the research participants falling somewhere along the spectrum. 


All of our products have a story: we know where they come from, who grew or produced them, and how they were transported.
— Nada

4. Exploring Design Opportunities based on research insights

In order to become a supplier for Nada, a supplier needs to fill out an extensive survey focusing around fulfilling Nada’s goal of responsible sourcing. They have 4 main areas that they require information from suppliers for: Transparency & Certifications, Local Food Systems, Waste Reduction, and Better Business Models. 

Nada has a unique opportunity to not only provide a packaging free online shopping experience but to also convey the story behind their products and help promote responsible sourcing. They also have the opportunity to address some of the consumer issues around the inconvenience and confusion circling ethical shopping.

"How Might We" Statements

Based on the pain-points and insights above, and Nada's opportunity with storytelling I created various "How Might We", HMW, as a method of exploring various design possibilities for Nada's online shopping experience:

  • HMW enable consumers to decide what ethical means to them?
  • HMW not shame suppliers for being partially, rather than fully, ethical?
  • HMW explain why ethical products cost more?
  • HMW make it easier to buy locally made and produced food? 
  • HMW better connect suppliers and consumer? 
  • HMW make local and ethical products more accessible?
  • HMW show the impact of buying ethically and locally? 
  • HMW increase the trust in ethically produced products? 

5. Creating Nada Online Design Principles based on research

The survey results, research on Nada and their competitors, and HMW exercise led directly to creation of 3 main design pillars to drive the Nada Online Shopping Experience

  1. Story - Show the story behind a product whenever possible without overwhelming users. 
  2. Transparency - Be transparent about the products and present the transparency in a digestible manner. 
  3. Convenience -  People are busy, make sure that consumers can easily and quickly buy products. 

6. Mapping out an MVE (Minimal Viable Experience)for Nada’s online shopping experience

I created a journey map of what the online shopping experience for Nada could look like to help ensure the entire shopping experience was covered. I use the journey map to help drive the creation of the online experience by mapping touch points in the experience to pages on the website.  


7. Wireframing & User Testing 

I created wireframes in Sketch based on out 2 essential user stories for the MVE:
1. As a user I want to quickly find and buy products.
2. As a user I want to learn more about the products I am buying.

I then conducted 5 user tests, in person and remote, to test these workflows. Based on the feedback received I updated the wireframes before proceeding to add visual design.


style-pattern-guide.png

8. Creating Style Guide & Pattern Library to aid with mockups and prototype

In order to ensure visual consistency and not confused users across the website I created a Visual Design guide and pattern library to aid in the creation of mockups. 

Mockups of specific pages:


9. Next Steps

The next step could be to focus on creating a mobile application to accompany the responsive site, in particular the pos-order experience of staying informed on the status of an order (e.g. out for delivery, dropped off, adjustments to jar returns).

Furthermore, the current MVE focuses on the consumer experience of Nada online. Other avenues to explore could be the experience of Nada Online for other users such as suppliers, delivery people, and Nada themselves as a business. 


10. Lessons & Take aways

  • When you are designing solo, get in the habit of presenting your ideas as often as possible to other people. Doesn’t matter if they are designers or not. It helps you to not only get feedback on your work and but to verbalize your thought process. Verbalizing your thought process can help highlight issues that you may have overlooked. 
  • User testing solo in person is difficult. Oddly enough, remote testing was easier because users were so focused on looking at their screen that I felt less awkward constantly having to look down to take notes. 
  • Prioritizing what pages and features to work on is key to ensuring workflows get done. Differentiating between  “nice-to-haves” vs. essentials is essential to creating an MVE.