(If using mobile, use Figma App)
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.
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.
Figma & Squarespace
For the lighting demo, I took inspiration from other coffee roasters. Below you will find which sites inspired the design.
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.
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.
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.
After having both the Learn
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.
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
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.
I came up with two designs and made certain decisions when making them.
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.
I chose to have a mix of asking a Web Designer, coffee roasters, and the owner himself.
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?
Below is a sample of some of the responses:
“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?”
“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.”
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.
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?
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.”
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.
The User Testing proved to be a great success and gave me insight to some changes that made after the tests.
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.
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.
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.