Role
UX/UI Designer
Scope
Digital website design, UX, strategy, art direction, UI, research, prototyping, usability testing, information architecture
Context
Retail is an ever-evolving beast. While E-commerce constitutes an increasing portion of overall consumer spending, a recent Census Bureau study reported that Internet shopping still only represents about 11 percent of total retail sale expenditure.
Further, a recent PWC Global Consumer Insights Survey reported that there has actually been an increase in weekly brick and mortar shoppers over the past three years. How can we capitalize on this trend and convert visitors to an online website to real-life customers?
Brief
I had the opportunity to design a brand new website for Avalon Flooring, the 10th largest floor covering retailer in the nation with locations in New Jersey, Delaware, and Pennsylvania. While the face-to-face experience for customers was the business’ priority, they now wanted to enable customers to browse their products online.
The site needed to encapsulate the key features of their business model: customer service, reasonable pricing and keeping it local and enable customers to complete the main tasks: browse products, discover and save ideas, compare options, learn about installation, and get inspiration.
Research
I began the process by identifying the three main competitors in the flooring market and comparing their online offerings. I was keen to identify common features across the sites and spot opportunities for Avalon Flooring to differentiate.
The competitors I decided to focus on were Floor & Decor, LL Flooring, and Build Direct with each targeting slightly different customer demographics due to their designs and price points.
The most important takeaway from this activity was learning how different retailers organized their flooring selection and the overall layouts they used for those websites.
After completing my competitor research, I then went on to complete a mind map. For this project, the needs of the business and its customers/user personas were already logged in an extensive document. All together this list was overwhelming, so I referred to the technique of mind mapping to help me deconstruct it. This activity helped me categorize the information into more defined ideas, and then establish relationships and hierarchy among those ideas.
Information Architecture
The next stage was designing the navigation system. With over 1000+ items, it was essential to organize the products in a clear and understandable way.
The client provided us with the different materials of their products for an easy way of categorization, as well as a search by room function, which was supported by the competitor research.
Having been assigned a criteria for users to find inspiration, I added an extra primary navigation label ‘Inspiration & Ideas."
Once we agreed upon a common design language that resonated with us and aligned with users expectations, I created wireframes in Sketch.
Usability Testing
Once I completed my wireframes, I created a prototype of my website to begin usability testing. This would allow me to evaluate how users would engage with the proposed website solution and validate whether it was addressing the primary user needs. It was important to test with mid-fidelity, greyscale wireframes to gather honest, critical feedback from potential customers and to solidify the functionality of the website before addressing the visual design.
I conducted a usability test with 5 participants and asked them to complete three different scenarios to put themselves into the shoes of my user personas. These three scenarios included:
1. You need to choose new flooring for your bathroom. Show me how you would browse.
2. Show me how you would find out how to care for your flooring.
3. Show me how you would inquire about a floor that you couldn’t find when searching for it on the website.
These were my key findings from the tests:
• Overall users were able to easily navigate the website and locate products and information
• Participants wanted an easy way to identify if a product was on sale
• A few participants wanted a way to inquire about products given they didn’t want to call
• Some felt there could be a greater push to bring people into the store
UI Design
Once we managed to come up with working solutions for the identified problems, I started designing the final user interface.
Outcome
The client was thrilled with their new look and our developers worked tirelessly to execute the vision. You can check out the finished site here.
In retrospect, I wish we did more usability testing and research to uncover additional pain points that would lead us to making better design decisions. One critical takeaway from working on this project was understanding the value of user research and planning to synthesize findings in the most helpful way to our users within our resource constraints.
