Project Overview
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 Duration
July 18 2022 - Sep 27 2022
Role
Product Designer
Deliverables
App prototype
Platform
iOS, watchOS
Problem Space
The coffee industry is one of many that is affected by the impact of climate change. Future availability of the two species of coffee grown for human consumption, coffee arabica and coffee robusta, will be more volatile due to changing weather patterns.
Research Uncovered
From my initial problem statement above, I delved into uncovering research about the topic, collecting articles and quantifiable statistics that I could find that supports why this issue is worth finding solutions for.
$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.
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 habits, as well as their personal habits when it comes to sustainable living. 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 living conscientiously.
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.
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 in the solution sketches below.
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.
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.
Natural
Tranquil
Environmental
Cozy
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
I learned so much from this project. Even if it felt tough at times, it felt so fulfilling to learn and apply concepts in a field I’m passionate about.
Here are some major takeaways that I received out of this experience.
Function over form, first and foremost.
Even if my final product isn’t the most eye catching, the heart of UX is to always keep design functional, accessible, and inclusive to all.
Leave preconceptions at the door.
There are many opportunities for biases or premature solutions to occur during the research and ideating stage. To truly keep design
user-oriented, it was best to remain open-minded and user focused.
Design is an endless iterative gauntlet.
There are still tons of improvements I want to make towards my prototype. However, this just speaks further to the notion that no design is perfect, changes are perpetually occuring.