cumulus header image
SUMMARY

Jack is a New York transplant from the midwest. He works for a tech company and has a flexible work schedule that allows him to work remotely. He loves speciality coffee and tends to use the local coffee shop as an office. The laid back quiet environment often thought of about coffee shops seems like a dream compared to the reality of most city based shops.

Coffee shops tend to be small, have long lines, and are filled with loud conversations and phone calls. Not the ideal set up for a productive workday. This is just one example of the challenges faced by people trying to enjoy the best coffee and why we knew Two Pines subscription based service would solve these problems and provide a high quality product that can be enjoyed anywhere you want.

PROBLEM

Coffee shops are everywhere but long lines, lack of space and a noisy atmosphere are a deterrent to enjoying a high quality product.

SOLUTION

Two Pine's solution was to build a subscription-based coffee service that focuses on providing high-quality coffee from sources that share the same values as its own brand culture. Selecting independent farmers from all over the world and building relationships with them to ensure we are able to give only the best product to the customers on demand at their doorsteps.

cumulus gif example View Web Prototype
MY PROCESS
design proces mobile design process
USER RESEARCH HIGHLIGHTS

84%

People said they would order or try a subscription-based coffee service

Expensive

Overpriced Coffee was at the top of the charts for reasons why customers disliked coffee shops

70%

Customers feel as though the lines are always way to long at coffee shops

No Seating

Lack of space and seating in coffee shops was a major complaint about coffee shops
USER PERSONAS

User personas were developed based off of feedback from user research. Doug is looking for a fair trade organic product to keep in line with his healthy lifestyle. Kennedy wants accessible coffee so she can get away from the lack of seating and noise at her local coffee shops. Regina is an NYC based web designer who needs the fuel of the caffeine to get through her busy days but the hefty price is putting a dent in her wallet.

USER FLOWS

Surveys were completed to determine the flow of the site. Since it was going to be a single page website we wanted to make sure that the flow from top to bottom followed what the user wants. We added the subscribe button at top, mid, and bottom level to create a conversion point for our users. The user flow was created in sketch during the wireframing process and tested multiple times.

BRANDING

No branding assets or content had been created beforehand. The process began with mind-mapping to start to establish a brand name. Once a brand name was selected we then began the logo design by sketching. We tried a few different angles and then did testing to help us make the decision on the logo. After iterating the logo to get the sizing and font selection right we were able to move on to typography and color palette.

Mind Mapping

Mind mapping was done to create a brand name and starting point. I started with the word tree because of its wide range of topics and through the mind mapping I was able to narrow it down to Pines.

Sketch Pen and Paper

Once I had the word Pines I started to sketch pine trees. After trying different variations and through iterating I came up with Two Pines.

Illustrator Logo Alternatives

I moved the sketches into Illustrator and continued iterating. I narrowed it down to 4 options and ran some testing to get feedback. I decided on the two natural pine trees based on its modern organic vide and feedback from users.

Final Logo

The final logo really captures the vision of the brand. It's a modern organic company that's built on history and the love of nature and fresh products.

Color Pallete

Bold and classic. The color palette was chosen with the intentions of using minimal choices but focusing on bold classic combinations that are influenced by the New England Culture. Inspiration was drawn from the green pines to the dark blues and grays from where the forest and fields meet the ocean. Secondary colors will be based on lighter hues of main 3 color choices. The green background cannot be used with red text vice versa due to contrast issues.

Typography

For my font pairing I chose Meta Pro for the header font and Tisa Pro for paragraph text. FF Meta is a humanist sans-serif typeface designed by Erik Spiekermann in 1991. The design features a large x-height, open apertures and a “l” with a tail that helps distinguish it from a “1” or uppercase “i”—these features help to enhance its legibility. I chose this font because the humanist aspect of its characters really helps to bring together that small town feel of the people of Two Pines.

FF Tisa is a serif typeface created by Slovenian designer Mitja Miklavčič in 2006. FF Tisa has a large x-height which offers it excellent legibility. I think it’s a great choice for setting long passages of text on the web. The serif characters read like a classic book. It helps to create the historical feel and ties perfect with its Meta Pro partner.

Headers

H1 Meta Pro

H2 Meta Pro

H3 Meta Pro

Paragraphs

Tisa Pro font size 18pt. Even though computer hardware is central to almost everything we do, it’s easy lag behind in the advances made in hardware software. Desktops that are four or five years old, for example, obsolete.

Example

This is a headline

Even though computer hardware is central to almost everything we do, it’s easy lag behind in the advances made in hardware software. Desktops that are four or five years old, for example, obsolete.

Packaging Design

For this product packaging, design played an important role in the overall brand story. I really wanted the packaging to represent a feeling of rustic and man-made vibe. The packaging would be made from minimal elements and be eco-conscious. The mockups were made in Adobe Photoshop.

View Style Guide
WIREFRAMING

Initial wireframing was done by sketching and then iterated in Balsamiq. We narrowed it down to two layouts and then completed testing to determine the right layout before moving into the visual design.

Pen and Paper Wireframe Sketching
Layout Version 1
Layout Version 2
View Balsamiq Wireframes
VISUAL DESIGN

Once the project moved into the visual design phase I used sketch as my design program of choice. I started with a layout that featured a large hero image to capture the attention of the user and begin telling the brand story. After the initial layout was completed I also made an alternate version that tried to convert the customer first and took a sales driven approach. Both of these layouts were tested using usability hub the results proved that the sales driven approach would be the most effective. A final version was ready for the development phase.

Design Version 1
Empathy Approach
Sales Driven Approach/Final Design
View Sketch Artboards
USER TESTING II

I used Usability Hub for my testing. I completed testing the initial layouts, surveys and user research on the coffee shop and preference testings on the alternate approaches to the site layout.

User Survey Questions

The user survey I created was used to determine the problems faced with traditional coffee shops and whether or not a subscription based service would solve those problems for the user.

View User Survey Results
Wireframe Layout Preference Test

I created a preference test for the initial wireframe layouts to determine how the site should flow and whether or not I should start with a large hero image.

View Preference Test
Empathy Vs Sales Driven Approach Preference Test

Final testing was done on the a empathy driven that layout that foused on telling the brands story to created a connection with the user before the sale and the second layout focused on taking a sales driven approach right from the start and telling the brands story as you flowed down the page.

View Layout Test
DEVELOPMENT

I coded the entire site myself. It was coded in Atom Editor using HTML, CSS, JavaScript, and JQuery. I used CSS Grid layout to make the site responsive on mobile and desktop. I used Iterm 2 terminal and GitHub to host my repository throughout the process.

CONCLUSION

Two Pines product showcase wasn’t about building a visually appealing website that would show some coffee packaging. It was about creating and inventing a brand that had a real story behind it that would connect its users to the brand through empathy and use the design process to do that. It was also about solving a real problem which is finding great coffee and being able to enjoy it at a coffee shop has become a real issue between long lines, expensive roasts and lack of space. With Two Pines subscription service you can enjoy the best coffee wherever and whenever you want!