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 for porch delivery. As a young individual with a passion for the environment, I understand the importance and potential impact of such a service and I used my knowledge in UX research and UI design to create a vision of what this app could 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.
Low Fidelity Wireframes
Low Fidelity Prototyping
High Fidelity Wireframes
Style and Brand Guide
As someone who has worked in a similar business for 3 years, I have had the opportunity to speak with many customers and gain insight into their preferences and needs. From my experience, I have found that customers targeted by zero waste businesses are highly conscious of the environment and are looking for products that align with their values.
To meet these customers' expectations, it is important to ensure that the products offered are environmentally friendly and that ingredients lists are easily accessible to the customers. Additionally, many customers consider a truly zero waste experience to be important, and prefer if the company reuses containers instead of recycling them.
Furthermore, due to the recent changes in shopping behaviors caused by the pandemic, many customers continue to do as much of their shopping online and/or contactless as possible. Offering convenient options such as porch drop-off or shipping not only align with these changing behaviors but also provide a safer shopping experience for those with concerns.
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.
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.
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.
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.
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 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.
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.
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.