Simple | Beautiful | Necessary
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:
- Intuitive user flows
- Booking a workshop
- Customer transparency
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.
I was tasked with a responsive redesign of River North Workshop Co.'s website. I conducted the research phase and executed design independently.
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.
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.
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.
Clickability + searchability
- Too many steps to a product description page or workshop class
Design a responsive web site that allows customers to easily search product inventory, as well as, improve the workshop sign-up process.
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.
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.
I compiled and mapped out all answers from the user interviews. From here I was able to discover common pain points, opinions, and affinities.
Persona one | Jane is not a local
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.
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
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.
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.
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.
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.
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 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'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.
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.
The following is a snippet from the RNW Site Redesign Style Guide