Background
Eldritch Coffee is a direct to customer Coffee Roaster Web Store for customers and wholesale. Offering various coffee blends as well as products.
ROLES
Interface Design
Experience Design
Wireframing
User Research
Development
Tools
Figma
Squarespace
Challenge
• Complicated CJM ( Customer Journey Map).
• No personalized approach for customers.
• Bad website navigation.
Research
Upon doing research, I kept into consideration of the original design and structure. The client wanted an improved experience and I wanted to see how their layout compared with other coffee sellers. I took note of what features were pleasing from the user experience. Upon collecting my findings, there were other research methods in the research process.
To get more feedback, me and the client created an email campaign that lasted a month in which he asked current customers what they thought of the site and what could improve it. With the suggestions and ideas we found, the sites transformed.
Design Goals
To build an ecommerce site with an easy-to-use interface and shorter load times.
Process
Brainstorming
After conducting the research, the brainstorming process was pretty clear. I wanted the flow of the site to be fluid and have the user enter the site, see a welcoming picture with coffee along with a brief summary phrase to help build awareness of the company to help the customer understand what the site is all about. Along with understanding the branding.
Some conflicts I had in the designing process was deciding if I wanted products to be listed in the hero section or have a separate section to list best selling products. Eventually, the offerings were opted to have their own section instead of in the hero section. This decision was made because having a hero section without products being displayed puts less pressure on the user to need to make an immediate purchase right away and instead helps to build customer awareness of the brand and welcomes the user. Below the hero section, the offerings are shown and allows the user to browse the top offerings. So the flow of the site goes brand awareness and then the offerings, which can be seen below in the Wireframes and Final Design sections.
Branding
I chose the color pallet and typography based on the logo and font that is seen on the final product (coffee bags). I wanted to instill consistence with the brand identity.
Typography
Color
Final Design
Review
I really enjoyed designing this website. It was a challenge making a concept site without goals/objectives from a client but it allowed me to challenge myself creatively to design something not only visually pleasing but to lay out information and design concepts to how I’d feel it would best be represented.