Bringing imaginative ideas to life in the form of thick, high-quality crafted rugs. RugDrop exists at the intersection of art, sports, & music.
PROJECT OUTCOMES
Heuristic review of previous Shopify e-commerce website.
Complete rebrand (including new colors, logo, and more).
Bespoke website design hosted on Shopify.
ROLE
Lead UX/UI Designer & Visual Asset Creator
TIMELINE
8 weeks
TOOLS
Figma, FigJam, Shopify, Photoshop, Canva
CONTEXT
As RugDrop scaled their business and offerings, the company needed a new brand identity and an updated e-commerce website to pair. To do so, I conducted a heuristic evaluation of their existing website, re-evaluated their brand guidelines, and transitioned their business to Shopify’s e-commerce platform.
SEVERITY SCALE
Each heuristic issue found was charted on the following scale to help prioritize revisions in the future:
TL;DR
BRAND RESEARCH & DISCOVERY
As a small business, RugDrop actively avoids:
Being less-than-luxury
Lacking a brand identity by spreading the work too thin
Existing as a token retail company
As a small business, RugDrop strives to:
Make the client experience feel special
Get customers excited about their personal product
Make the client feel as though they are treating themselves
As a small business, RugDrop is motivated by:
The holistic process & the products they create
Their clients’ enthusiasm for the designs they create
Making & inviting others into a space
BRAND RESEARCH & DISCOVERY
As a small business, RugDrop actively avoids:
Being less-than-luxury
Lacking a brand identity by spreading the work too thin
Existing as a token retail company
As a small business, RugDrop strives to:
Make the client experience feel special
Get customers excited about their personal product
Make the client feel as though they are treating themselves
As a small business, RugDrop is motivated by:
The holistic process & the products they create
Their clients’ enthusiasm for the designs they create
Making & inviting others into a space
In order to chart the best course forward, it was important to see what was and wasn’t working within the brand’s original web design.
NN/g’s 10 Usability Heuristics for user interface design are a set of high-level guidelines based on an understanding of human behavior, psychology, and information processing.
The process involves using experience-based approaches to find defects and identify potential usability issues in an application or website.
HEURISTIC EVALUATION
Not an Issue
Cosmetic Issue Only
Minor Usability Issue
Major Usability Issue
Catastrophe
0
1
2
3
4
REVISITING BRAND GUIDELINES
MOODBOARD
I created a moodboard for the brand's evolution, using the proto-persona, adjectives, and the team's desired color choice of green to start to evaluate colors. Hover to see how the moodboard was refined over time.
FINAL SITE DESIGN
PROTO-PERSONA
Using my data from my interviews with the co-founders, their brand perception survey, and their general audience demographics, I created a proto-persona to serve as a touchpoint during the design process.
I then conducted brand identity research with the two co-founders of RugDrop to make sure we were aligned on the creative direction. After completing my full brand identity survey ->, we landed on the following mission statement and company values.
RugDrop Moodboard
Dynamic
Fresh
Memorable
Outside-the-Box
Innovative
A small business that allows the customer to bring their imaginative ideas to life in the form of thick, high-quality crafted rugs. RugDrop strives to create unique spaces and exist at the intersection of art, sports, & music.
VISUAL BRAND IDENTITY
The focus was on creating a more subtle, laidback, ambiance-driven brand identity. The company's previous logo had a few major issues, including difficulty scaling with the overly detailed wordmark and icon, as well as issues with the accessibility of the colors.
WCAG 2.0 Level AA is the acceptable compliance level used in most accessibility rules and regulations around the world. It means that the website is usable and understandable for most people with or without disabilities. Only the red on the cream works, and only in context of larger text.
PREVIOUS VISUAL IDENTITY
NEW VISUAL IDENTITY
More aspirational than established
More open to new ideas than closed
More personable + fun than serious
More luxury than affordable
More casual than professional
More calm than stressful
More modern than historic
More innovative than consistent
More approachable than non-communicative
More exclusive than all play
More collaborative than independent
More clean than messy
More realistic than inspirational
More youthful than mature
More colorful than monotone
More sneak peek than cards-on-the-table
More A than B List
WORKING WITH SHOPIFY TEMPLATES
When building the Shopify website, we worked with an initial theme and had to get creative when wireframing the site. Each theme had around 13 unique Shopify "sections" that we could use as puzzle pieces to create a unique and functional e-commerce design.
DESIGNING SHOPIFY WEBSITE
INFORMATION ARCHITECTURE
Before tackling the wireframes, it was important to align on the information architecture within the site. I organized what information would be readily available at the main navigation bar at the head of the site, as opposed to the footer, based on predicted traffic. I created feedback loops on various pages back to the Customize Page, since the main business goal was to drive custom orders on the site.
WIREFRAMING & APPLYING DESIGNS
Using these 'puzzle piece' sections, I tentatively wireframed our site, adjusting the sections after receiving input from RugDrop's cofounders. Much of their inspiration leaned heavily on content-focused sections, so I operated under the knowledge we'd leverage product images and mockups.
