Introduction

OKHI is a mixed-use retail space in Denver, Colorado. They sell everything from vintage clothing to hand-crafted furniture and art. They also host parties and events featuring local artists. I designed a responsive, e-commerce website and style guide for OKHI to boost their online presence and drive revenue.

My role

I completed this project as part of a two-week design sprint while enrolled in General Assembly's UX Design Immersive course. All of the research and designs you find below are mine. Please note this is a concept project and I am in no way affiliated with OKHI.

ux tools

Check out my style guide and clickable prototypes [desktop | mobile]

User Interviews

To kick off this sprint, I wanted to understand what drives OKHI customers to shop there. I would use this information to drive my designs and make the customers' digital experience as delightful as their in-person experience.

To gather this information, I conducted a series of six in-person interviews with individuals who match OKHI’s current customer base (aged 20-35, identifying as hipster and artistic). To synthesize my findings, I created an affinity map.

what I learned: okhi customers

They are motivated by OKHI's unique products and their support of the local artist economy as well as price.
They find buying items online is frustrating; fit is hard to predict.
They enjoy learning about the artists and seeing all of their work.
They like browsing all items without a specific product in mind.

Personas

Using this information, I developed two personas:

Henry, who shops for others and uses gift giving as a way to show he cares, and
Lindsey, who follows OKHI on Instagram but has know way to order clothing from them or have a good sense of if the item will fit.

Information Architecture

Because OKHI sells an eclectic mix of items, from vintage clothing to wall art to furniture, I wanted to focus first on information architecture. My goal was to understand how customers organize the products OKHI sells in hopes of mapping their in-person shopping experience to their online one. To gather this information, I conducted open and closed card sorts.

After conducting seven open ended card sorts, I created a working navigation scheme and validated it through three additional closed card sorts. I stopped testing once users agreed on the categories products belonged to and did not struggle to place any items. From there, I created a site map and working navigation structure.

Sketches

After settling on a working navigation structure, I sketched possible layouts for the site. In general, I followed known e-commerce patterns so users don't have to work too hard to navigate the site and complete the checkout process.

To satisfy the user's desire to learn about the makers of the products sold, I included an "Our Artists" section in the main navigation and allow users to search for and browse by artist as well as a product review section on product detail pages in an attempt to grapple with the question: how can users learn about size and fit of one-of-a-kind products?

With my sketches, I created a paper prototype and did a round of in-person usability testing to ensure the flow made sense to users.

After validating it did and making a few tweaks, I transformed my sketches into lo-fi wireframes using Sketch. From there, I created a clickable prototype in Invision and solicited users to do more extensive usability testing.

What i learned

The designs are clean and easy to navigate.
The checkout process is intuitive and there was little user error.
The flow feels familiar and straightforward.
This looks like every other e-commerce site.

I took a step back and asked myself "Do these designs convey the uniqueness of the store that its customers love so much? Does the site have character?" I knew the answer to these questions was "not quite", but I wasn't sure how to fix it, so I turned to other sites for inspiration.

Competitive Analysis

I looked at other mixed-use retail spaces like Atlanta's Ponce City Market and DC's Union Market.

And I had a few A-ha Moments

OKHI is more than an e-commerce site and retail space. The store hosts events and takes pride in supporting artisans. This should feature prominently on their website.
The brand embraces color and experimentation. The site should too.
To convey uniqueness, diverging from established patterns could be beneficial, if done thoughtfully.

Hi-Fi Mockups

With these ideas in mind, I returned to the drawing board. My first priority was to redo the navigation scheme to place equal emphasis on retail, events, and the local artist community.

I also wanted to better communicate the fun-loving, experimental energy of the brand. To do so, I leveraged the bright colors visitors see in store and in the brand's logo. I also incorporated staff quotes and testimonials throughout the site to bring out the brand's voice.

Finally, I included a "unique finds" section, which is structured like a "staff picks" table in a bookstore. Here, staff can select products they find particularly cool and write a blurb about them. This provides staff with a low-effort process to give customers a better sense of their products, including information about size and fit.

Final Designs

Desktop

Mobile

Check out my style guide and clickable prototypes [desktop | mobile]