Roles & Responsibilities
-
Lead Designer (user flow, low-fidelity wireframing, high-fidelity wireframing, styling, mock-up and prototype), no other team members.
.jpg)
.jpg)
.jpg)
.jpg)
Problem & Resolution
Specialty coffee can feel intimidating. There’s four main types of coffee beans: Arabica, Robusta, Excelsa, and Liberica. And for many average joes (coffee pun) the names alone can seem daunting. For a consumer like the persona, Estée, who has a hectic schedule, they most likely don’t have the time to research which coffee can put a pep in their step at the beginning of their day and which could serve as a treat at the end of the evening. So creating an inviting design as well as explicit navigation and instruction (verbal and non-verbal) were key points in creating the site.
Project Overview
This project was the focal assignment of the program I earned my UX UI certification in. The course instructor had me input basic info into randomprojectgenerator.com to receive the project brief consisting of a fictional consumer along with the fictional name of the client. Within the name was the product the client would be selling. Additionally we were given the task flow: Homepage / Marketing Page > Product Features > Checkout > Confirmation
The persona I then built the business on is that Litt Coffee Beans is a family owned, small coffee bean company based in New Jersey. Selling organically grown coffee beans in a retail environment.
​
Key Points:
-
Casual and modern aesthetic.
​
-
Offers fresh, roast-to-order beans at cost-effective rates.
​
-
Sold online nationwide and locally
.jpg)
The Process
As I began working on the lofi wireframing I left the homepage simplistic, as a welcoming entrance to the company and their products. Moving on to the product page, I designed it to provide a good amount of space for supplemental content so the client could offer the consumer a good amount of information on the product. A checkout process that provides proper guidance and is easily understandable is important and I did so by creating a distinction between the purchase breakdown and the checkout form(s). Followed up by the checkout, the confirmation page would leave the customer feeling satisfied and energized by a bright congratulations for the purchase they made with the company.
I started off with analyzing competitors. What would work and what wouldn’t for the Litt Coffee Beans concept and demographic. Quite a few competing companies went with a deep, bold approach in their design to represent the warm boldness of their beans. But considering the average consumer of Litt Coffee Beans has never bought anything like this I wanted to make sure the site wasn’t going to be too intimidating. During the process of wireframing I already had ideas in mind on how to ease the user through the site. I had to make sure point A to point B navigation was concise.
The name “Litt Coffee Beans” gives off an energetic feel to the business. Considering the target audience I wanted to make sure that when working on designing and choosing things like the color styles, I’d keep it warm and vibrant with mature elements. Making sure language was very directional and instructive throughout while also keeping it short and simple was another thing I had to keep in mind. This is visible in the product page. Included in the product listing was main features of the product, including strength of the beans and where they were grown, as well as reviews of the product.
When creating my moodboard I wanted to go with a vibrant look that would still allow for a calm and casual atmosphere. I went with deep, vivid tones including an orange and yellow tone that would remind the user of the bright sunrise in the morning and a smooth teal to energize the user with that fresh feeling of the beginning of a new day.
