How might we increase the usability of Deadstocks existing website?
What I improved
I redesigned Deadstocks website & app from the ground up, creating a high-fidelity prototype for an intuitive, modernized online shopping experience.
My Role
Project Manager & UX Designer, Research, Information Architecture, Visual Design, Interaction Design, Prototyping
Tools
Figma
Illustrator
Photoshop
Deadstock’s website had been left relatively untouched by the times. Although the inventory was regularly updated, the interface hadn't changed. It was difficult to navigate and in desperate need of a professional makeover.
The goal is to design an intuitive website that is easy to use and delivers a seamless experience toward achieving desired outcomes. But with no exciting features and with an outdated system, it posed some challenges for Deadstock’s online users. There was no store menu & you couldn’t place an online pick-up order. The website lacked graphic standards & UI interactive elements to navigate the user. That said, the cafe had a loud presence with the community. Their instagram was highly curated & provided a great sense of what kind of cafe they are and what sets them apart. I didn't want to lose that fire aspect in the redesign process.
Solution
I envisioned a website & app that was both visually beautiful and informative. I believe that by building an engaging and educational content strategy, as well as implementing an intuitive online shopping experience, the website & app would enhance the user engagement and ideally yielding a higher conversion rate for Deadstocks website.
Client interview
Our objective for the interview was to get a clear image of the business culture and research user expectation for an e-commerce website & app. After over an hour of interview, laughing and chatting with the owner we understood that creativity & culture was very important to them. They stated several times that it was important for them that the website should be a reflection of the cafe culture.
“Over at Deadstock we have a strong instagram fam base. Our main struggle was keeping up with the competition online. Beautiful Instagram posts is something that comes naturally to us and we feel like we fit in on Instagram’s culture. The main goal for us is to get people to shop more on Deadstock’s website.”
What it boils down to
After talking with the owner I discovered that their instagram community was very active. Post sharing and commenting was a way for the business to keep user engagement and online visibility. The goal is to keep that energy going and create a new experience that will embrace the business culture, have an intuitive ordering process, and increase their online visibility. It was clear that market research was warranted and we needed great precedences to build off of to see what works.
I began the discovery phase by doing a comprehensive site audit, making note of any problems I saw right off the bat. One of the first things I noticed was the lack of information provided on the landing page. Everything was out of balance, big hero with tiny buttons and text. The search bar was difficult to locate and lacked graphic consistency. The website at whole in no way represented the established in-house coffee culture. I concluded that the website was in need of a makeover.
This annotated screen capture shows the original homepage, and a few annotations describing some of my initial observations.
In my exploration of other modern e-commerce websites, I identified several key areas where Deadstock had room to improve. My research began by collecting observations, information, and features that we found from existing coffee e-commerce websites. We compared each website by a few main key features: Product catalog, online order, product pages, shopping cart, checkout, user engagement, & wholesale subscriptions.
The main goal of my research was to learn how other e-commerce websites organize product inventories and encourage user retention. I also wanted to better understand the strategies these successful, established websites used to guide their customers through the online shopping process.
I gained some valuable insights from the research and took note of the features that are important for the client. Starbucks, philz coffee, and Blue bottle had great examples of a fluid ordering system, user friendly ui experience, and a point system to keep user engagement.
To supplement my competitive analysis, I also read up on Nielsen Norman best practices for e-commerce product pages, and e-commerce related articles available for free on their website. I took note of these best practices, and created a list of areas where I thought Deadstock could improve relative to their competition.
1. Condense information architecture by simplifying the navigation menu
2. Emphasize & improve search functionality
3. Promote related items on product details page
4. Utilize secondary, faceted, and footer navigation
5. Improve product photos
I researched Deadstocks online reviews for a more general focus, aimed at café goers to understand their experiences and expectations. Through in store visits, I noticed that their customers have a very positive experience at the café and they have established a healthy amount of regular customers. Looking at their online reviews I was surprised to see they had over 300 reviews and most of them were 5 star reviews. Imagine all the hard work!
I conducted deadstock experience surveys aimed at coffee regulars to understand their in-store cafe experience in relationship to Deadstocks existing website.
Deadstock user survey
Prior to beginning the interview process with some of the cool folks at deadstock, I made a list of questions to guide my user research:
Majority of the answers where factors of not knowing the site exists, or thought it wasn’t worth their time to use, & that the site did not reflect on the shops core values & aesthetics.
Affinity mapping
Preliminary usability testing confirmed my assumptions regarding the lack of information within the product details sections of the page. Users had difficulty finding items due to lack of functionality within the faceted navigation, and some found the site to be useless. In the case of the general audience, the website was completely inaccessible and most did not know where to start.
The research and in person interviews were very informative. In order to get a clear overview, I gathered all the information on digital post-its and categorized them. Identifying what was most important for the owner & user’s experience. Here are results:
Based on these insights, I developed two different personas who I believed fit the main use cases for those who might visit Deadstocks website & app. Baz, the experienced barista, and Audre, the busy engineer.
The discovery phase uncovered many opportunities available and within reach to improve the website. I prioritized a number of features using the table below, the highest priorities being with creating an intuitive & engaging user experience to elevate the shops brand & online presence.
It's worth emphasizing the fact that a redesign of the site was critical in order to increase user engagement for the website. Another important factor is to provide an option for online ordering for in store pick-up and an app for on-the-go use. Both were among the highest priority features based on the insights gained from the folks I interviewed.
In this stage, we were racking our brains to find all kinds of reasons why people would possibly want to visit a café website: to check opening times, find the address, view food & drink menu, & check if it was a hip spot to hangout. This was useful for me to make sure that the website was easy to navigate through with all scenarios in mind with as few clicks as possible.
Scenario
We imagined ourselves as a user coming to the website with one specific goal in mind and made a visual representation of how that would go down, trying our best to make the experience as fluid as possible.
Several ideation sketches were completed on the main page. I wanted to push the envelope with navigation & intuitive shopping experience, while reflecting on the brand concept & cafe culture.
Sketch iteration
With all the research in mind, I set out to make some concept sketches. After several iterations I made the final concept sketch. It was a must to include user requests (quick ordering process, playful UI, recommended features, contain a social feature, & and to make sure the site accurately represented Deadstock). Keeping those in mind I attempted to make a straightforward design that keeps the users engaged.
In this stage, I was racking my brains to find all kinds of reasons why people would possibly want to visit a coffee app: to check opening times, place a pick up order, find the address, view allergens options, check if it was a hip spot to hangout, look at the menu etc. This was useful for us to make sure that the website was easy to navigate through with all scenarios in mind with as few clicks as possible.
Low-fidelity mockups
Our final prototype was designed to be simple yet effective with shortened paths and added features like a recommendations and the perfect pairings to make the app more engaging.
Mobile prototype
I initiated the mobile experience for on-the-go convenience. Looking further, I would like to test the prototype and receive feedback from the community to iterate from the data received. Check out the scroll flow below.
To put it all together, I added some clean and simple product photos which I borrowed from their instagram profile to fill in the placeholder images on the product listings page. I also added a “quick drips” video section to share their roasting process, and revamped the checkout process & menu list as well.
One of the biggest challenges of this project was finding a way to modernize the website while maintaining the the cool aesthetic that Deadstock has curated.
I wanted to incorporate grainy textures and dark colors while keeping the website accessible, organized, and easy to navigate. I also wanted to add a splash of color to emphasize important details throughout the website. I decided to a use burnt orange color to highlight the more interesting parts of the page, and to experiment with textured design assets to add depth to the landing page. Perhaps most importantly, the site now has a focus, highlighting all the amazing products & services they have to offer with engaging interactions.
Overview
Hierarchy & Usage
In this prototype we see a scenario of a user going through the process of making an online order and completing the process in an effortless manner.
Click on the prototype below to interact with in Figma.
1) Task Oriented Design integration
2) Robust System Architecture for efficient navigation & ordering process
3) Design Guideline implementation for streamline user experience & information efficiency
4) Desktop & mobile app for on the go experience
Although this project was done for personal growth and never officially shipped, I consider it a major success.
I challenged myself to capture the energy & character of the cafe with a modernized look. I really love the way this prototype turned out. I haven't gotten around to showing it to the folks over at Deadstock yet, but I think they'd dig it too.
Looking further
The next steps would be to build on the interactive animations within Figma, complete mobile prototype, and ideally completing the inventory product list before pitching the project to Deadstock Coffee.
One of my favorite parts about this project was trying conceive a design aesthetic that captured the energy of the cafe culture. I would love to potentially build the website using Webflow if I had more time. It's empowering to see my ability to complete end-to-end projects increase as I continue to diversify my skillset.
