Porto Rico Importing Co Web Redesign
The Challenge
I was tasked with selecting a local small business with 50+ products in inventory to redesign their website to increase e-commerce sales, especially during the difficult time of coronavirus.
I chose a beloved NYC coffee purveyor with over 100+ years in operation. The shop has such amazing character and even better products. I had a hunch I’d find the same situation online. An outdated, quirky existing site proved to be the perfect starting point for my first web design project.
Background
Porto Rico Importing Co has been a family operated business since 1907. They are a leading purveyor of fine coffee beans and loose leaf teas, while also providing customers with a full sensory in-store experience unlike any other cafe in NYC.
Tools
Sketch | InVision | Miro
Timeline
2 Weeks | 120+ hours | August 2020
My Role
UX/UI designer | Researcher | Writer
The Process
DISCOVER
C+C Analysis
User Interviews
Contextual Inquiry
Affinity Mapping
DEFINE
Persona
I Statements
User Journey Map
Problem Statement
Solution Statement
DESIGN
Card Sorting
Sketching
Paper prototype
Mid-fidelity prototype
Hi-fidelity prototype
Usability Testing
DELIVER
Presentation
Next Steps
Discover
What is the Competitive Landscape?
I decided to first examine how other leading NYC coffee and tea shops come to life on the web. I ran a competitive analysis of three leading gourmet coffee shops chains, one coffee bean/loose leaf tea purveyor (the most direct competition), and one specialty tea shop.
This analysis highlighted:
The need for a streamlined checkout process
The need for a tidy interface and navigational system.
A Look at the Classics
The competitor insights proved to be informative but left me curious….how have other legendary NYC shops and restaurants tackled the online space? I turned to a comparative analysis between three NYC classics with a combined total of over 300+ years in business:
These businesses were able to modernize and innovate online while not losing a sense of character. They also dedicated space to highlighting their rich histories and celebrating the huge success that is surviving the competitive NYC landscape.
It was surprising that Porto Rico Importing’s existing site did not have an About Me section. This would be a necessity.
Learning About Our Users
Following my initial analysis, I spoke with five coffee lovers living in major cities about their interests in fresh beans/gourmet coffee, their desire to support small businesses, and the appeal of shops that have stood the test of time.
After holding these conversations, I synthesized the qualitative data through the method of affinity mapping, seeking any trends, and repeat insights.
Key Insights
From this process, I found that the customer is:
Loyal to tried and true brands
Is price conscious, but will go out of their way for something special
Values well-made products as they tend to be more enjoyable
Aims to support local businesses when they can
Like options, but not too many
Enjoys places where they feel connected to the people and employees
Define
From user insights, I developed the persona of The Conscious Coffee Connoisseur, an approximation of the target user.
The user wants to:
Expand their knowledge of specialty coffee beans
Purchase products informed and with ease
Support local businesses
Honor quality over convenience
The user gets easily frustrated by:
Too many options, what to choose?!
Excessive and superfluous text on e-commerce sites that hinder them from quickly meeting their goals
Outdated websites- they don’t instill trust
A STEP BACK: Gaining Some Context
With a clear target user in mind, I thought I was nearly ready to hone in on the main problem and solution. But I realized that I still didn’t have a sense of how users actually interacted with the existing site. I wanted to observe this in order to solidify that my proposed solution was headed in the right direction.
I observed three users make their way through the website, guided with the following tasks:
What are your initial thoughts on this site? What do you think you can do from here?
Can you walk me through each of the categories in the menu bar. What do you think you can do in them?
You are looking to purchase some coffee for yourself. Please show me how you’d go about this.
Key Insights:
Users were struck by how outdated the site felt, the overwhelm of product, the inconsistency between the home and product pages with the checkout, and the ultimate skepticism by the checkout interface.
Problem
The user needs an easier way to learn about specialty coffee beans so that he can make more informed purchases that match his preferences and desire to be more supportive of local businesses.
The Porto Rico Importing Co website will be re-designed to reflect their quality and character AND ensure an informative, consistent, and trustworthy checkout experience for users.
Solution
Design
Design Goals
With The Conscious Coffee Connoisseur in mind, I planned to tackle the following in the Porto redesign:
Reduce interactive and navigational clutter
Introduce a streamlined filtering system that allows people to hone in on their preferences versus sifting through the site
A checkout process that is consistent with the overall site design
The inclusion of an “About Us” section that showcases the expertise and character of the shop
Design Inspiration
In an effort to not lose a sense of character and quirk, I turned to the classic exterior of the shop to reference across the design.
Color
Typography
Navigation
From Sketches to Prototypes
Before diving into wire framing, I first put pen to paper to give myself a starting place.
Iterations: From Existing to Proposed
Home Page
Product Page
Checkout
Deliver
Outcome
The final design was simplified and streamlined without completely abandoning the sense of character that Porto Rico Importing Co customers love. I made sure to prioritize and highlight the product, the fine coffee beans and loose leaf teas, that has led to the shop's success all these years. And lastly, I made sure to honor the history of the shop with an About Us page, allowing users to able to get a sense for the store’s rich history. Users can easily find their desired products and the business is able to maintain a trustworthy online presence when the shop isn’t as accessible.
Reflection
This was my first web design project. It was also my first project owning so many parts of the user experience design process. Picking a shop with such history raised so many questions about how to effectively capture the essence of a brand online, something that I determined is a lot harder than it looks. It was also in this process that I realized the magic of contextual interviews and how they can provide incredibly specific feedback (pain points in particular) and insight on how to proceed with a solution.