greenbean.
greenbean. is an app I created for iOS that seeks to help users connect and discover their local coffee shops. More specifically, greenbean. aims to promote coffee shops that sell sustainably produced beverages. Users can discover local coffee bars based on their location, view available products and order items for in-store pickup.
My intent behind this app was to create a resource for specialty coffee lovers and sustainability-minded individuals. While there are many ways to locate your nearest Tim Hortons, Dunkin’, or Starbucks, I wanted to create a design solution that helped smaller businesses and third wave coffee shops at the same time.
Project Details
BrainStation Capstone Project
July 18 2022 - Sep 27 2022
Role
Product Designer
Deliverables
App prototype
Platform
iOS, watchOS
Tools
Figma, InVision, Adobe Photoshop, Adobe Illustrator
Problem Space
I decided to pursue this topic as I have a love for coffee, as well as concerns towards the issue of climate change. As a daily coffee drinker and passionate enthusiast, climate change is foreseen to have future consequences on the availability and sustainability of coffee beans.
For these reasons I wanted to contribute ideas, if not solving the issue outright, since this topic is close to my heart.
Research Findings
I started exploring the topic by conducting secondary research, collecting articles and quantifiable statistics that I could find that supports why this issue is worth finding solutions for. A few of the major findings that I uncovered are indicated below:
$200 billion per year is the annual income of the global coffee industry, at a growth rate of 2.2% each year. However, climate change will jeopardize these profit margins.
By 2050, the global population of coffee consumers is expected to double. However, within that same time frame, half of all arable land used for coffee production will disappear.
125 million people are currently employed in the coffee industry. The security of these jobs and future employment become more at risk as time goes on.
User Interviews
After gathering research, I conducted user interviews with five people for approximately 30-45 minutes each. I asked them a questions in regards to their coffee consumption, their day to day routine, and any sustainable living practices they performed. This helped me frame a relation. between their coffee drinking habits and their overall level of ‘ecological mindedness’.
From the interviews, I synthesized the data into an affinity map, drawing key insights and creating themes. This helped me narrow my scope and focus on the theme of how people ‘live conscientiously’.
Creating A Persona
I created a persona, Evelyn, that embodies the themes, insights and data pulled from the user interviews I conducted. She acts as an avatar and represents the target user demographic that I plan on designing my solution towards.
Experience Map
I designed an experience map revolving around my persona, and started ideating about what would a typical contextual problem that she would encounter. This helped me narrow my scope towards coming up with a solution.
The Task Flow
The experience map was significantly helpful as a starting point for me to begin brainstorming possible solutions. I knew that the primary goal I wanted to accomplish for my users was to make finding and discovering sustainable coffee products more convenient, and this is what I started with when it came time to create a task flow.
Sketches
I expanded on the task flow by first creating a set of possible exploratory sketches, finding all the ways I could assist the user in navigating towards the task flow goal. Using the exploratory sketches, I collected the features and components that had the best value or functionality towards the end goal and amalgamated them.
Wireframes
After developing a visual framework with the help of the sketches, I went into creating a set of wireframes in low fidelity, as well as a set of wire frames in mid fidelity with most of the visuals incorporated. However, much of the content would be finalized and polished in the high fidelity stage.
Natural
Tranquil
Environmental
Cozy
Establishing Brand Identity
After making several revisions to my prototype I had to start thinking about the visual identity of the app. I started off with several adjectives that I envisioned it would fulfill. These keywords helped establish visual foundations and what I wanted my app to look like.
Creating A Moodboard
Based on the keywords I had in mind and using Evelyn’s personality as inspiration, I developed a moodboard of relevant and abstract images that would depict greenbean visually.
UI Inspiration Board
Concurrently, I also created a UI inspiration board that would help me ideate on existing components, elements, and functionality out on the internet, that could further influence my app design.
Wordmark Ideas
When I had to establish a name for the app, I began exploring words and jargon relevant to coffee and sustainability. Ultimately, I landed on greenbean, because of the primary and connotative meanings of the word green, and how the contextual meaning of the word changes based on the topic of coffee and environmentalism.
Exploring Colour
Choosing the right colours was essential towards the development of my wireframes. I pulled colours from my moodboard and honed in on implementing tones of brown, green, and blue. I wanted these colours to represent earth tones, vegetation, forests, and different colours of water. I also wanted the browns to represent coffee tones. I ended up reducing my colour usage to two tones of green and brown, in conjunction with shades of white and black of reduced brightness in order to tone down contrast.
The final UI colours chosen are a forest green and brown that simulate the natural environment. I used these colours sparingly throughout the app, in order to capitalize on the trend of white space usage, and let the functionality of the app shine through.
Meeting Accessibility Guidelines
The colours you see here were developed after several rounds of iteration. After shrinking down my colour palette, I was able to develop a selection of colours that are AAA accessible as per WCAG guidelines.
Defining Typography
For my typeface choices, again, it was all about bringing it back to my moodboard themes. I wanted the primary typeface choice to be clean, modern and timeless, deciding on Avenir as I felt it met all of these requirements, and felt lightweight. For my header typeface I discovered Founders Grotesk, and to me it felt modern but at the same time, proportionate, natural, and organic, fitting into my visual theme.
Creating A UI Library
After I had established some of the other foundational elements of the app such as the typography and colour palette, I proceeded to create a UI Library in order to document different elements. This was done using Brad Frost’s Atomic Design Methodology.
High Fidelity Prototype
Thanks to organizing the UI Library, it simplified the process of translating the mid fidelity wireframes into a high fidelity prototype. At this point, the app really felt like it was coming together.
Responsive Marketing Website
In addition to the mobile app, I created a marketing website to help bring greenbean. to the marketplace. I collected inspiration from existing websites today, and ideated on potential layouts by creating sketches and wireframes. A content flow diagram was also created to show how content behave between the different viewports. I utilized assets from the existing UI Library to preserve the visual theme and spirit of greenbean. The overarching feel that I aimed for the website is a product that feels natural, organic, breathable, spacious, and calming.
Cross Platform Challenge
As part of an additional challenge to the case study, I was tasked with reimagining greenbean. on a different platform. Based on what my app does, I thought it would add value and convenience for users to be able to order coffee through their watch, so I proceeded to design a set of screens for watchOS. I learned alot when it came to designing for watchOS. Based on Apple’s Human Interface Guidelines, I aimed to preserve the task flow and functionality as the main priority, and make the app on the watch feel complementary to the mobile app.
Key Takeaways
This was my first big project that I worked on independently and saw through end-to-end. It was such a holistic and fulfilling process being able to design from the beginning, based on asking a preliminary question or observing a problem, creating assumptions, a HMW, doing the research, and then the entire visual process from sketching, to wireframing and high fidelity injection with layout, type, and colour.
No product is perfect, and since this project I’ve learned many things such as:
Condensing down brand colours to just one or two, and if using more, applying them intelligently.
The standardization of UI with design systems and taking advantage of resources that already exist, if appropriate.
Accepting the flaws of my first project, learning to fail, and always pushing myself to improve and grow.
Most importantly, how much fun this was, even if I don’t like everything about it. I really loved the UI design portion of the process, applying all the nuances and tricks, using a baseline grid, making use of components, brand and accent colours.