Mike Redkey

UI + UX Design

Creating user-centered design that is informed, innovative, & inspired.

background image portfolio home.png
 

SKILLSET

User Research | Functional Wireframes | Visual Mockups | Interactive Prototypes | Rapid Ideation | Javascript | Digital Advertising | Videography


MINDSET

Simple | Beautiful | Necessary 

CASE STUDIES

 
 
background.png

Overview

RNW is a beautiful boutique in the RiNo district of downtown Denver. The existing website was attractive but was is need of some major usability improvements. Including:

  • Clickable
  • Intuitive user flows
  • Searchability
  • Booking a workshop
  • Customer transparency
  • Conciseness

 

Through research, ideation, and prototyping, I created responsive mockups and a style guide that will ultimately improve the user's experience and awareness of everything RNW has to offer online.

 

Why did I choose to overhaul a website that already looked great? Because a brand should never stop at outward appearance, but also embrace a usable design.

 
 
white.png
 
 
Please note this was a concept project undertaken as part of the UX Design course at General Assembly and is not affiliated with River North Workshop Co.

Please note this was a concept project undertaken as part of the UX Design course at General Assembly and is not affiliated with River North Workshop Co.

 
 

First Phase

 

Overview

I was tasked with a responsive redesign of River North Workshop Co.'s website. I conducted the research phase and executed design independently.

Background

River North Workshop Co. is a boutique seller of fine, locally crafted homeware, as well as, a craft workshop with a variety of classes to choose from.

    OUTSIDE OF RNW.png

    RNW is in a competitive location of Denver and tucked away - it’s not a very easy place to spot - In this case, having a rockstar eCommerce site can make or break a small business.

    Problem

    Currently, the website does not make efficient use of it’s minimalist design as an eCommerce website and neglects usability, especially in the workshop section.

    • Not intuitive

    • Clickability + searchability

    • Too many steps to a product description page or workshop class

    Proposed Solution

    Design a responsive web site that allows customers to easily search product inventory, as well as, improve the workshop sign-up process.

    merch background.png
     

    Research

     
     
     
     
     
    contextual inquiry.png

    Contextual Inquiry & User Interviews

    I followed a customer's journey through the boutique's brick and mortar location. This provided helpful behavioral information on how shopper's navigate the products and what catches their eye. Following the contextual observation, I interviewed multiple boutique shoppers who have either shopped online or in-store. I found common issues among those interviewed, which included pricing, shipping costs, gifting budgets, and a few others.


    Heuristic Analysis & Usability Testing

    In order to assess the functionality of RNW's current website, I performed usability testing and completed a heuristic analysis on the home page and product list page. The home page and the product listing page both lack any sort of search-ability function. The product category naming is not very helpful for those who are not familiar with what the boutique offers. Very little is clickable on the home page, including below the fold. Every user I tested attempted to click on the photos on the home page thinking it would provide them more information or served a purpose of some sort.


    Card Sorting

    To get an idea of how users think when navigating the product pages, I conducted open card sorting for product categories. I provided print outs of every product in the store with how RNW titles each one and gave them full range. I tested various users who all had very different backgrounds in order to discover the most inclusive categorization.

    After I combined the common categories, I created a closed card sorting test for a few more users where I eventually found an intuitive set of category titles.

    card sorting categories sorting.png

    Affinity Map

    I compiled and mapped out all answers from the user interviews. From here I was able to discover common pain points, opinions, and affinities.

    Personas


    Jane.png
    Jon.png
     

    Persona one | Jane is not a local

     

    Problem:

    Jane loves RNW’s style but always factors in the entire cost of products that must be shipped long distances. Knowing the cost of shipping boosts her confidence so she can better gauge how much she has in her cart. She is likely to abandon her cart, or never fill it if she discovers shipping too late.

    Goal:

    Shoppers need a better way to know shipping cost before proceeding through checkout process. This builds confidence and decreases cart abandonment.

    Persona Two | Jon knows how to gift

     

    Problem:

    Jon views boutiques as great places to find thoughtful gifts for friends and family. He Likes to browse with an idea of what the person he is giving a gift to might like and where they might use it. However, he is likely too intimidated if he can not search the site with relative ease and will go elsewhere.

    Goal:

    Provide the ability to search and filter products in an intuitive manner so users can focus on what they are looking for. Otherwise, users will look elsewhere.

    Design

     
     
    Design.png
     
     

    Prioritization

    There were multiple areas that could use improvement and revision on the existing site that can be lumped into two focuses. These each would require full attention in separate phases. I prioritized the shopping experience as my first phase of focus because of the amount of products that are offered. Workshops, of course, are a large part of RNW's business focus but would be tackled second. I decided implementing search and filtering features took priority within the shopping experience. 

    Information Architecture

    In order to understand how users could most efficiently navigate the site, I performed open and closed card sorting. Users sorted over 100 of RNW's products into categories. This gave insight into how users categorize information in a way that makes sense to them, which in turn informed the new site navigation.

    A few of the pages on the existing site haven't been updated or served very little purpose to increasing ease of navigation. In the redesigned site, these pages were either eliminated or combined with other pages that were similar.

    The footer was also updated to include the 'About' section and 'Contact Us/Location', as well as the social links. This reduces the amount of errors/unintended clicks for the user and is ideal for a minimalist design. An 'All' secondary navigation was included, along with re-named categories, to get the user to the products where they have the ability to filter products to what they are looking for. 

     
    Existing.png
    Redesigned.png
    background.png

    Task Scenarios & Ideation

    I designed for two tasks flow, while considering the most relevant personas for each. I created tasks backed by stories that I would later test for usability.

     
    Jane Alone 2.png

    Jane just got back to her home in Seattle after visiting Denver. She remembers a candle she really liked at a boutique in Denver she visited called River North Workshop Co., so she visits the RNW site. She really liked RNW's style and is open to getting other items depending on shipping costs.


     
    Jon Alone 2.png

    Jon's sister has a birthday coming up. He knows she loves kitchenware and would like to search RNW's site for something of the sort. Jon would sees that he can sort and filter his way to something perfect for her.


    I started designing for these tasks by ideating and sketching out my ideas on paper. I then moved to Sketch for mid-fidelity wireframes, while usability testing and iterating on each round.

    Sketches

    Sketches.png
    Background gray white boxes.png

    Wireframes (mid-fi)

    Jane selects the candle option from shop drop down, which takes her to the product listing page for all candles. She then selects the candle scents she would like to see. 

    Jane lands on the first candle she selected's product description page. She enters her city to see that shipping will be $2.00 from Denver - she adds to cart and the checkout modal automatically appears.

    She has the option to select fast delivery for $6.00 more but continues with standard 2-day shipping.

    Jane will receive a receipt in her inbox.

    Jon's sister likes kitchenware so he selects Kitchen from the Shop drop down. He filters to Drinkware because he thinks a mug would be nice.

    Jon proceeds to the checkout modal.

    Jon will be receiving a receipt in his inbox.

    background sm.png

    Second Phase

    Art Direction  |  Style Guide  |  Hi-fi mockups

    Bringing the wires to life with responsive design. The site is split into two camps: eCommerce and Workshop Event Scheduler. This segment of the River North Workshop Co. site redesign focuses on the visual design, as well as, the workshop event scheduler.

    Previously, in order to sign up for a workshop the user bounced out to an entirely different website. The goal here is to increase immediate exposure to workshops and keep the user on our turf. With this in mind, I designed the feature to be used entirely on one page: the homepage.

    Next, I focused on designing the mocks of the eCommerce user flow - from product browsing and shipping cost calculator to Thank You page.

    Finally, I have included a portion of the RNW Style Guide.

    Phase 2.png

    Style Guide

    The following is a snippet from the RNW Site Redesign Style Guide


    Letter Copy 6.png
    Letter Copy 7.png
    Letter Copy 8.png
    Style Guide.png