Prototype
(If using mobile, use Figma App)
Challenge
Eldritch coffee came to me because they needed a website for their e-commerce store. They wanted a site that represented their brand. At the time, he already had a logo and labels on his products. He wanted a site that could reflect the design of both the logo and labels.
Design Goals

  • The brand and its image are represented throughout the site through images, colors, and typography.

  • User-centered design that makes the experience easy and hassle-free when placing coffee orders.

Problem Statement
  • Design a website that reflects Eldritch Coffee's brand image referencing products and logos.
Tools

Figma

Figma & Squarespace

Role

Sole UX Designer

Lighting Demo
For the lighting demo, I took inspiration from other coffee roasters. Below you will find which sites inspired the design.
Black & White Roasters

  • Black & White has a great item description section where it expresses not only the item but the origins of the bean and how to brew it.

  • Cleanly organized and doesn’t feel overwhelmed with all the information.

Cat & Cloud Coffee

  • The landing page is great and provides information that you would need as a user. Hero section that invites them to the site, list of the best-selling items, followed by the footer.Great use of the logo and representing the brand.

Dribbble

  • Dribbble has fantastic designs and gave a lot of inspiration about the Halloween templates and how they combined typography, color palettes, and images.

Sketches

To help conceptualize my ideas for the site, I drew some UX sketches to visualize what I was trying to communicate on each page. This helped me to understand also how to present certain E-commerce features as well as show the products.

Prototyping
After having both the Learn and Define steps in the design process understood, I wanted to create a few prototype designs and eventually test them to see which falls in line most with the brand.
Typography

  • It closely resembles the font used on the coffee bags

  • The font resembles old horror books from the 1700s, which would reflect the brand image

Color Palette

This is where I had a few ideas. As per the lighting demo examples, many coffee roaster sites go with clean white designs. It is inviting and encourages users on the site. As per the problem statement, the design must reflect the brand. So I had two options, I can try to create the design with a clean look like many do, or look to Eldritch Coffee's established product and look to follow a similar color pallet.

Prototyping

I came up with two designs and made certain decisions when making them.

Design 1

  • I chose a clean design that kind of resembled a sweet feel with light colors.

  • I looked at the logo with its light colors and felt making it more bright would fall in line with the brand.

Design 2

  • I looked at the packaging of the inspiration design. I didn't quite capture the fill color from a particular bag but found a trend between the black and brown of the packages below and with a darker brown.

User Testing
For this project, I did two user tests. The first test was to test the two template designs to see which fits more with the brand. The second was to test the user experience.
The Users

I chose to have a mix of asking a Web Designer, coffee roasters, and the owner himself.

User #1
  • Speaks 2 languages.
  • Coffee Roaster
  • Build his site through a web-building site.
User #2
  • Speaks 3 languages.
  • Learned languages from immersion methods.
User #3
  • UX/UI Designer
  • Specializes in logo design and brand integration when designing sites
User #4
  • Owner
  • His input is the final say to understand if he’s happy with the template.
Test 1
This test was to gauge how well designs 1 + 2 did as far as reflecting the brand. The following questions were asked to the users:
  • What do you think of the Typography? Color Palette?
  • Do you think this site reflects the logo and the product packaging?
  • What changes would you make?

Design 1

Design 2

Responses
Below is a sample of some of the responses:

Design 1

“The colors of the design contrast well.”
“I like the font. Gives off an old horror book.”
“I feel like the design should be a little darker. Why not go with black?”

Design 2

“Way too light for this theme. It is welcoming but doesn’t reflect any of the productsThe font seems to complement the logo well”
“I think its good for a generic coffee roaster but not for the brand. The image works but the rest of the site is too bright.”
Results
Below you will find the results of all the users and their feedback.
  • The result concluded that 75% of the users preferred Design 2. The reasoning was that of this sample, 67% felt the dark back ground and color palette was more in line with the horror theme. While 33% felt that the the font contrasted better with the darker tones. That with the lighter tone, it was off putting as it gave a polished vibe and Baskerville doesn't match this esthetic.
Test 2
This test was to understand if the user experience needed modifying. Since Design #2 was the chosen template, the users were shown this design and were asked the following questions:
  • What do you think of the overall design?
  • What do you think of the landing pages and the way the coffee is displayed? Would you add anything to the user experience
  • Would you add anything to the flow of the site or any bugs?
Responses
Below is a sample of some of the responses:
“I liked how you showed the best-selling items on the landing page. I’d remove the prices though. You want to invite them to click on the item first.”
“I’d remove the pricing on the landing page. You are trying to encourage users to click on the image and not base their price opinion. When they click on the coffee, they’ll see the flavor it has and other features.”
“I like the typography, the layout is great and minimalistic.”
“User experience is convenient and easy to use. Right to the point.”
“I’d maybe add a call to action in the hero section showcasing the coffees there instead of below. But great design overall.”
Results
The results to this test were overall positive. I liked that there were some suggestions to make the design better. I compiled the notes and considered all of them when making the final alterations to the design. In the next section below, you will find all the alterations I made to the final design.
Design Alterations
The User Testing proved to be a great success and gave me insight to some changes that made after the tests.
Pricing
I decided to remove the prices from the landing page. I did this to encourage users to click on a product instead of having their first impression of the product being its price.
Template
The results of test 1 gave me clarity that Design 2 was the right template to go with for this website. It makes the coffee bags come to life with sharing a similar typography and color palette.
Conclusion

  • Looking back at the Problem Statement , this website fulfilled its promise on representing the brand. The font and color of the coffee bags  matched well with the product and made those labels come to life in an interactive experience for the user in the form of this site.

  • The client was very happy with the final product. They even posted on Instagram how happy they were with the final product and recommending anyone in need of a website, to reach out to me.