Task
W.C. Winks Hardware has been Portland’s neighborhood hardware store since 1909. I was tasked with a research and design project to conduct a website refresh of the hardware store to include e-commerce functionality. During this process, I ensured to meet user needs based on the user persona and buying behavior provided.
Role
UX Researcher
Lead UI Designer
Tools
Figma + FigJam
Adobe CS
Optimal Workshop
Google Suite
Duration
2 week sprint
Discover
The project brief provided by the client gave me an overview of the current issue both the stakeholders and users were facing with the current website. It was important to learn a little about what industry standards were for features in this space before moving forward. I performed an in-depth competitive analysis of features, products and services provided for direct competitors as well as the indirect competitors.
The Problem
The problem expressed by the client was similar for both the users and the company; users wanted to be able to shop online and the company’s existing site did not possess an e-commerce functionality. The company wanted to refresh their website for an optimized user experience as well as an e-commerce feature that allowed user’s the option for shipping and in-store pickup.
Define
Provided with brief was a description of the current users and their pain points. After discovery and empathizing, I developed a user persona and set of How Might We’s in order to achieve the goals of the user and company.
Meet Kyrstina
Age: 24
City: Portland, Oregon
Occupation: Very busy small business owner; Grad student
Shopping Habits:
- Makes purchase decisions quickly
- Buys gifts at the last minute
- Wants a gift that fits their giftee’s age, interest and other meaningful characteristics
- Looks for gifts within a particular price range
- Considers gift wrapping and shipping options
- Doesn’t read descriptions or reviews
User Needs: order gift online from a local business; Order process with a good deal; Fast shipping or in-store pickup; Gift wrapping option
How Might We:
- Design an e-commerce site for Winks hardware that offers a clear and streamlined online ordering experience?
- Incorporate in-store pickup or shipping features in the design so users can choose based on their needs?
- Provide options for gift wrapping during checkout process for customers?
- Incorporate a rewards/member program so we can encourage users to shop more frequently and become repeat customers?
- Design a user experience that satisfies our users needs while also meeting key performance indicators of the Wink’s Hardware (sales goals, new customer acquisition, and ROI from the new website)?
Competitive Analysis
The project brief provided gave me an overview of the current issue both the stakeholders and users were facing with the current website. It was important to learn a little about what industry standards were for features in this space before moving forward. I performed an in-depth competitive analysis of features, products and services provided for direct competitors as well as the indirect competitors.
Results
Through competitive and comparative analysis I discovered that Wink’s Hardware was missing some key offers and features that both local and national competitors were offering, including but not limited to: online ordering capabilities, online orders to shipping, online ordering to in-store pick up, and a rewards program.
Synthesizing Research
Through card sorting and contextual inquiry during the research phase, I was able to discover ways to improve the current information architecture used on Wink’s current website.
75
Total Products
5
Card Sorts Performed
7
Average Product Categories
75
Total Products
5
Card Sorts Performed
7
Average Product Categories
Sitemaps
User Task
After developing a new proposed sitemap the user needed a task to complete for the prototype. I developed a task flow based on the user’s needs of purchasing a product with the option of expedited shipping.
Design
After developing my two main user flows I began to sketch out some preliminary designs based on user and company needs. These sketches helped outline a optimal layout and generate more design ideas for the foundation of my design.
Feel free to view all of my sketches for Wink’s Hardware here.
Home Page + Product Page Sketches
Wireframes
After developing my two main user flows I began to sketch out some preliminary designs based on user and company needs. These sketches helped outline a optimal layout and generate more design ideas for the foundation of my design.
Key features included in my wireframes are:
- Main search bar
- User account access
- Shopping cart icon
- Refined navigation bar
- Specials & Offers section
- Departments sorted by product category
Feel free to view more wireframes I designed for Wink’s Hardware here.
Usability Test
After laying out my low-fidelity wireframes I conducted some three usability test. The overall feedback on these usability test was great. Some of the feedback provided by users:
- Felt it was a great wireframe. They could tell what they were looking at and how to navigate the page from first site.
- Enjoyed having a “deals and sales” section towards top page for easy access and discovery to sale items.
- Felt the icons were clear and distinct to what function they provided.
- Would like to see a live chat feature to help with certain questions they might have while shopping. It is a hardware site and people not familiar with certain tools and hardware may need assistance.
Overview
3
Tests Conducted
1
Total
Click Errors
3
Happy
Testers
3
Tests Conducted
1
Total
Click Errors
3
Happy
Testers
Iterate
After returning to my wireframes with great feedback from testing I proceeded to flesh out high-fidelity designs incorporating the insights along with Wink’s hardware logo and brand colors. This image comparison shows the low-fidelity compared to the high fidelity design.
Prototype
After finalizing the screens and conducting an additional usability test I was ready to prototype my user flows. As a reminder, the user flows that I prototyped were:
- Select a product and add to cart
- Complete checkout process and select 2-day shipping
Feel free to view the full deck presentation for W.C. Wink’s Hardware here.