Greenleaf app design

Overview

Project

The aim of this project was to design an app focused on an eco-friendly business. Our team decided to design an app that would serve as a place for users to find information about all aspects of a business’ environmentally friendly practices. Since this app was designed from scratch, not only did we design the app features, but we constructed a design system as well. Our design had the following features:

user profile page
badge system where a user can earn badges for completing environmentally friendly activities.
company profile page showing a company’s rating, policies, initiatives, products, contact and website info.
rating page where users can rate a company on its eco-friendly policies and initiatives and leave reviews.
page detailing the company’s environmentally friendly programs and volunteer opportunities.

Tools

Survey Planet, Figma

Role

While we had individual roles, our team took a very collaborative approach to the design process, and we were all heavily involved in each phase of the research, ideation and wireframing processes. My roles included:

project manager
quality control Myself and another team member took the lead on design for the business profile feature of the app
I was involved with this team through the mid-fidelity wireframing step. At that point, our instructors moved team members around a bit to give people different experiences and to leverage team members’ strengths.

Key Drivers

There is a significant segment of users that are interested in environmental issues. There is also a large number of businesses that care about environmental issues and take care to design their policies, initiatives and products with that in mind. However, until our app was created there was not a way to bring those two groups together.

Research

Market research

We conducted market research to determine whether any competitors to our app existed. We found that while there were some apps or app features that touched on some of the aspects of our proposed app, an app that consolidates all of those features into one product did not exist.

Competitor research

We did some competitor research just before digging into desigining the low fidelity wireframes. We looked at Amazon for their rating system, Bombas and Grove Collaborative for their emphasis on eco-friendly products and policies

User research-survey

Our user survey showed some interesting results about who our potential users might be and what app features they might be interested in. We had some surprises in the demographic info, but our initial assumptions about what features users might want to see in our app were confirmed.

Survey results-demographic information

Approximately 60% female 40% male
59% were in the $50,000-100,000 and $100,000+ income brackets
About 2/3 get their info on eco-friendly businesses from Google, the web and social media
83% were in the 18-24 and 35-44 age brackets

user demographics graph-where do you get environmental info on a business

Survey results-proposed app features

User research-interviews

A business’ commitment to eco-friendly issues rated 7/10
Company and product reviews rated an 8.4/10
A social aspect rated 7/10
Goals to work toward 8/10

We conducted a total of six interviews remotely using Zoom as the platform. Participants were selected based on a prior interest in environmental and/or social issues. In terms of demographics, users were a mix of age ranges, in–come levels and educational backgrounds. Users were asked questions about environmental or social issues as we initially wanted to include info on social issues as well. However, due to time constraints, that feature was removed from our app design.

Ideation

Logo, typography and color palette

We chose Poppins as our only typeface and used a variety of weights to create hierarchy in the app.

Green seemed like an obvious choice for the color palette due to the eco nature of the app and the fact that the name of the app is GreenLeaf and leaves are often…green. We chose a range of shades for contrast and visual interest, but also to ensure we had enough contrast for accessibility.

Low fidelity wireframes

For low fidelity wireframes, we each sketched pencil versions of each of the main app features. We then met to discuss which features and designs we liked best of each of the designs.

Deliverables

Medium fidelity wireframes

As we moved into the medium fidelity phase of the project, we took on each feature singly or in pairs. We still had frequent meetings to discuss design decisions and to ensure consistency and quality control.

During this phase of the project, one of our team members set up text styles, color styles and a component library for the Figma file. This was invaluable in ensuring our designs were consistent, especially since we were designing singly or in pairs.

company profile-home page and modals

company profile-
search page

contact us

contact us-
congrats!

contact us-
error

company profile-
leave reviews

company profile-
read reviews

Learning opportunites and outcomes

At the conclusion of the mid fidelity wireframe process we felt we had a fairly polished product for that stage in the process. Our color palette and typography were already established, as was the majority of our design system. Most of the portions of the site were fairly well fleshed out and ready for prototyping and usability testing.

The most important learning opportunities I had from this project were:

How to help a team navigate through a complex project
Importance of color and text styles
How to make designs pixel perfect
How to work in teams of varying abilities and backgrounds.

Next steps

The next steps after the mid fidelity wireframe process would be usability testing, prototyping, and some additional attention on refining various features of the app and page architecture.