Society Coffee
Responsive eCommerce Website
(MA project)
My Role: UI / UX Designer, Developer, UX Researcher
Skills: Research / Prototyping / UI Design / UX Design / Branding / Illustration / User testing / Web Dev
The Brief
Hypothetically speaking, my client, Society Coffee commissioned me to create an eCommerce coffee website, which provides customers the opportunity to purchase coffee beans online, as well as sign up for a subscription service.
Society Coffee's main objective is to provide customers with good quality, sustainably produced coffee from around the world. They also provide education on the production and origin of their coffee beans and are passionate about reducing the waste of paper cups and plastic utensils, thereby conserving the environment.
Design process
I led all facets of design including information architecture, user task flows, visual, product, and prototyping. I also conducted user research using methods such as surveys, and remote usability testing, in order to address user behavior and attitudes. I utilised the data elicited from target users, which I then translated into ideas, contributing to the overall design.
Research and Discovery
Finding out more about users, helped me determine how the proposed design could solve some existing problems. The goal of my initial research was to discover the consumption and spending habits of my users. I also wanted to uncover how potential customers sourced their coffee. Furthermore, I wanted to surface the various types of coffee drinkers, this helped me define my users.
By achieving this, I could better empathise with the target users, helping me to gauge how the website should cater to their needs. I began by recruiting target users that would be asked to complete an online survey, in order for me to gather quantitative and qualitative data. Analysing the data helped me determine and make certain UX and design decisions.
Defining the Problem
The survey results helped to identify some key pain points: they wanted an easy and fast way to buy coffee online. Although I knew that the website could grow into something much bigger, I focused on getting an MVP that met the minimum core needs of my users, this could always be iterated and optimised.
I was also able to get a better idea of what would make customers more likely to purchase coffee beans online and got clarity on what their expectations were. A few key things that my research taught me are;
-
Customers want quality, sustainably produced coffee delivered to their doorstep.
-
Potential users cited time, convenience, and the ability to get to the store as being their biggest problems when it comes to purchasing their coffee.
-
Many customers showed an interest in brewing their own coffee and had some desire for education on the production and origin of their coffee beans.
Site Architecture
Gathering data in the initial discovery phase helped me form initial implications for the structure and design of the website. Through the responses I received from the survey, the heuristic evaluation I conducted on my competitor's website, and all the competitor benchmarking I did, I was enabled to create a hierarchical task analysis (HTA).
Creating the HTA allowed me to illustrate potential task sequences that may occur through user interaction with the website. Combining the results of all the research, I could work out the exact needs and requirements of my users and gained a good idea of what my site architecture requirements were.
The site architecture helped me define the requirements for my site. With this in mind, I could now create the wireframes and prototype.
Wireframes and Prototype
I designed a low-fidelity prototype of the proposed website using Adobe XD. The prototypes were used to conduct remote usability testing through a platform called Useberry. This allowed me to further refine the UX and attempt to surface any pain points or friction, allowing for more refined iterations to be created.
User Testing
I recruited 9 users to remotely test my prototype making use of the testing platform Useberry. With this, I was able to observe users interacting with the prototype. The platform provided me heat maps, user journeys, user videos, click rates, completion rates, and more.
I gave participants the same two tasks used for the heuristical task analysis. This ensured that I was meeting their requirements. The results of the tests were quite positive. 66.7% of my users managed to complete both tasks with an average time of around 60 seconds.
Further investigation of heatmaps and recordings, led me to hypothesise that for 33.3% of users that dropped off without completing the first task, did this due to the lo-fidelity of the prototype with some feature not being available. These users appeared to expect a high-fidelity prototype as they attempted to interact with it as if it were fully functioning, this seemingly frustrated them resulting in them dropping off.
With the knowledge that my immediate goal was to release an MVP that meets the minimum user requirements defined during the discovery phase, and that it is possible to iterate the design through further testing of the MVP, I could move on to creating the website UI.
UI Design
I designed a uniform UI style guide using Adobe XD. The style guide was used to keep consistency across the website by setting specific visual rules for all elements of the website. This included typography, color palettes, buttons, forms and icons.
Results & Takeaway
Through iteration, I gradually developed and optimised my designs. By gathering data through speaking to users, I got a better understanding of them. By getting deeper competitor insights and conducting a heuristic evaluation, I was able to come up with a design solution. Then, by testing my prototype, I was able to validate my design solution and build a minimum viable product.
Taking my original business objectives and user requirements into consideration, I was able to meet Society Coffee's goal managing to deliver a defined minimum viable product that can be iterated and improved on. Due to time constraints and technical limitations, not all features were included in the first release. The next requirements and priorities can be surfaced by doing more testing and in-depth user research. Overall, there is plenty of scope to optimise and improve the design.