header.png

OVERVIEW

CHALLENGE

As a personal passion project, I have designed an app that allows those living in Southern Ontario to order zero waste home and body products to their porch. As a young individual with a passion for the environment, an app providing this service would be of great use to me as well as many others. I used UX research and UI design tools to imagine what such an app would look like.

Due to the lack of refill stores in many cities and COVID concerns, there is a desire for a contactless way to receive zero waste products without having to leave their home.

While similar services exist, many are strictly web based and lack the convenience of an intuitive and simple app.

APPROACH

User Research

Affinity Mapping

Competitor Analysis

User Personas

Storyboarding

Information Hierarchy

Low Fidelity Wireframes

Low Fidelity Prototyping

High Fidelity Wireframes

Style and Brand Guide

CUSTOMER VALUES

I worked first hand at a similar business for 3 years and had the opportunity to speak with many customers about what they liked and disliked about our business model.

Customers targeted by zero waste businesses care about the environment and are looking for products that align with those values. The products themselves need to be environmentally friendly and ingredients lists should be readily made available to the customer.

A truly zero waste experience is also important to many who use these services. Although the products may come in recyclable containers, most would preferred their containers be reused by the company rather than recycled.

Lastly, shopping behaviours have changed greatly after the pandemic. Many continue to do whatever shopping they can online and/or contactless. Porch drop-off and shipping is not only convenient, but safer for those with concerns.

AFFINITY MAPPING

After reviewing what potential users are looking for in a zero waste delivery service, I conducted affinity mapping using Figjam to gather my ideas. I kept in mind the users' values and referenced other mobile apps to make note of all the pages and functions necessary for a mobile app of this kind. I made note of features that customers thought would be valuable.

COMPETITOR ANALYSIS

I chose two main competitors to research in preparation of creating Kind Bottle. One is a local company that I used to work for, and another is a Boston based company with an app! I decided what values were most important in a zero waste business as well as what makes an effective app when examining these companies and their resources. This heavily impacted what I would implement into the Kind Bottle design based on what was and wasn't effective.

USER PERSONAS

The user personas I created are based off of the customers I met and spoke to first hand when working at a zero waste company. Many customers were parents shopping for their families or students! Each of their values overlapped in similar ways such as environmental consciousness and affordability.

STORYBOARD

I illustrated a storyboard to demonstrate how the personas I created would use and benefit from using this service. I used procreate to design it and believe it is a strong visual representation of how users will interact with the Kind Bottle app in their every day lives.

INFORMATION HIERARCHY

After conducting my UX research and examining my findings, I was able to start laying out the information hierarchy of my app. This step is essential for me before beginning wire framing. I place myself in the shoes of the user and consider what information would I want made available and where while using the app? I also consider other information hierarchy systems I've experienced in other apps when determining flow.

WIREFRAMING (SKETCHES)

I used Procreate to sketch out the main screens of the app while referencing the information hierarchy visual I created. This was an opportunity for me to play around with layout and make important design decisions.

LOW FIDELITY WIREFRAMING

After sketching out very rough and low fidelity wireframes, I recreated them digitally in Figma. I decided a grid system and made adjustments from my original sketches as I saw fit. I was very conscientious of  not getting carried away with details at this stage and strictly focussed on grid systems, consistency, and simplicicty.

LOW FIDELITY PROTOTYPE

Using Figma's prototyping tools, I was able to experience the flow of the app I had created up to this point in my process. It allowed me to see any inconsistencies or potential flow problems in my design.

STYLE/BRAND GUIDE

For Kind Bottle's brand colours, I chose various shades of green. I think this was a very appropriate choice because of green's association with the environment, recycling, nature, etc. I also included basic colours to incorporate into the brand such as white, grey, and black. The button system in the app is very simple and it is important that it remains consistent throughout. Finally, there are 12 icons used throughout the app with similar weight and that are always black.

ILLUSTRATIONS AND ASSETS

I identified where graphics and assets were essential in the app, sketched them out in Procreate, and then designed them in Adobe Illustrator. I carried through the colour palette I decided for the app and took care to make sure each asset was informative and consistent!

HIGH FIDELITY WIREFRAMING

With a style guide created and assets drawn, in Figma I transformed my low fidelity wireframes into high fidelity wireframes. I also created packaging for Kind Bottle products so that my final design could feel as real as possible. 

HIGH FIDELITY PROTOTYPE

Figma's prototyping tools allowed me to experience the app as I intended. I was pleased with how consistent the app felt throughout and it really allowed me to troubleshoot the flow of the app and make tweaks to the final design.

HIGH FIDELITY CLOSEUPS