Kristy Cline
ux ui designer
Responsive Website Redesign
Nova Forest Products
Role: UX Researcher, UI Designer, Developer
Tools: Adobe XD, Photoshop, Illustrator, Miro, Google Forms, Maze, SquareSpace
Timeframe: 4 weeks in 2022
Primary Insight #1
Ease of Communication
Issue: 85.7% of users wanted to quickly chat with someone about their project.
Solution: Design and propose the implementation of a chatbot feature, allowing users to quickly connect with customer service.
Primary Insight #2
Product Availability vs. Representation
Issue: Website products didn’t always reflect what was available in-store.
Solution: Update product pages to provide real-time availability and detailed descriptions, ensuring consistency between online and in-store offerings.
Primary Insight #3
Sample Requests
Issue: Users expressed a need for product samples before making a purchase decision.
Solution: Develop a sample box feature allowing customers to order wood samples, helping them make informed choices before committing to large purchases.
Deliverables:
-
Responsive Website Design
A user-friendly, responsive website that aligns with Nova's vision, highlighting the unique products and services offered, such as custom wood products and sustainable sourcing. -
Information Architecture & Navigation Redesign
Simplified and intuitive navigation structure, allowing customers to browse products and services easily. -
Custom Branding
Design that reflects the company's updated identity and integrates with the existing logo and product style. -
High-Fidelity Wireframes & Prototypes
Developed wireframes for multiple pages, including homepage, product pages, and contact forms. Prototypes were tested for usability. -
Usability Testing
Conducted usability tests to ensure the user experience met project goals and offered seamless navigation.
Overview
Nova Forest Products is a company created by Mitch and Amy in British Columbia, Canada. They recently purchased an established business named Peerless Forest Products which, over many years, has become a trusted source for local, sustainable wood products. Mitch and Amy would like to rebrand Peerless to Nova and redesign the current, outdated website with one that reflects their company vision.
Vision Statement
Nova Forest Products specializes in custom wood products sourced locally from British Columbia’s sustainable forests. We focus on solid wood flooring and exterior/interior products with unique and custom finishes not found anywhere else.
Challenge
-
Design a responsive website that is intuitive and allows customers to browse through all the different products and services Nova offers
-
Design branding that compliments Nova’s logo and product style
Solution
From research to high-fidelity design and prototyping, I created a responsive website on SquareSpace's platform which compliments Nova's vision and the user's needs.
Original Website
Redesign
Improvements:
-
Optimized Information Architecture: Simplified the navigation structure, allowing users to find relevant products and services more efficiently.
-
Clearly Defined CTAs: Enhanced call-to-action buttons to guide users smoothly through the site, ensuring key actions (e.g., product inquiries, orders) are prominent.
-
Consistent Design System: Created a unified design system to ensure brand consistency across all pages.
-
Increased Product Visibility: Featured core products in prominent positions, improving accessibility and engagement.
-
Improved User Experience: Enhanced overall UX with intuitive design elements, based on user feedback and usability testing.
-
Updated Imagery: Refreshed product photos to better represent the company’s offerings and visual appeal.
-
Responsive Redesign: Ensured the website functions seamlessly across all devices, providing a consistent user experience.
Understand
Research Plan
To learn how users currently search for wood products online so that we can create a suitable platform.
Methodologies
-
Customer Survey / Interviews
-
Market Research
-
Competitive / Comparative Research of competitors
Research Objectives
To determine:
-
How users go through the process of finding wood products online and off
-
What motivates users to buy from a specific source: what is their why
-
What information users are looking for when searching for wood products
-
Which features are most important for users when searching for wood products
-
What users’ pain points are when searching for wood products
Participants
We will talk with people in the following behavioural categories, being sure to include a range of career stages, age ranges, genres, and ethnicities in our target industry:
-
People who are interested in home improvements/building with wood products
-
People who have bought wood products for home improvements/building in the past
Research Debrief: Customer Survey / Interviews
The full Research Report can be viewed here. Below are the main take-aways.
felt it would be important to quickly chat with someone regarding their project
%
85.7
71.4
felt it would be very important to see actual samples before purchasing
%
Needs:
-
Final project reflecting their vision
-
Affordability / meeting the budget
-
Contractors for heavy lifting, permits, ensure project is done correctly
-
Having all the materials for a project
-
Quality materials
-
Timely delivery / product availability
-
Good, quick, knowledgeable customer support
-
Able to visit a store to view products / purchase
Participant's
“They were upfront/fare and spent additional time working with us to ensure they met our needs or addressed any concerns with everything documented within the contract. Along with no pressure to sign.”
Frustrations:
-
Having to order special products to complete project
-
Project expense and extra costs popping up
-
Project costing more than originally anticipated
-
Project taking longer than expected
-
Missing materials / not having everything on hand for the project
-
Website products do not reflect what is available in store
-
Contractors not able to build customer vision
-
Having to return a product
Motivations:
-
Good selection of materials
-
Product guaranteed
-
Product cost comparison
-
Increase home / property value
-
Seeing the vision come together / being creative
-
Product delivery
-
Purchasing a kit or having wood pre-cut
-
Knowledgable contractor
-
Sustainably source, environmentally friendly products
-
Matches customer’s style preferences
-
Last minute availability
-
Product / material photos
-
Discounts / good deals
-
Product samples
-
Clear instructions for the project
-
Enjoying the challenge of the project
Market Research and Competitive / Comparative Research of Competitors
Market Analysis
The lumber market in British Columbia, Canada is a very competitive industry to be in. BC is unique among the world's leading forest producers because 95 per cent of its land base is publicly owned, and forest activities on this land must follow strict forest-management laws. Crucial to the industry are innovative, best practices. The province is home to enormous amounts of exceptional timber and a global leader in sustainable forest management.
Competitors
If a consumer wants to purchase forest products, there are many companies supplying them in various forms. However most of the companies researched have found their own competitive advantages. Several offer economical products which combine plastic and laminate to wood products or replace lumber altogether with materials that imitate wood’s appearance. For the consumers wanting specific high quality lumber products, occasionally they will look outside the Canadian market to European ones for products like wide plank flooring which Dinesen, located in Denmark, provides. It is very costly to ship the flooring to Canada and there is a need for this product locally.
Nova’s Competitive Advantage
Nova is unique in the superior quality of products crafted and the services it provides. They offer solid wood products that are sustainably sourced from BC’s forests. They are flexible with individual projects and have a high quality of customer service. The company which they have purchased (previously known as Peerless), has a local reputation of creating unique products and offering custom services tailored to the customer’s needs.
In addition to the high quality products and customer service Nova offers, they also focus on two areas which are currently untapped in the local market:
• Shou sugi ban wood burning
• Wide plank flooring
Shou sugi ban is a traditional wood burning technique originating out of Japan and is currently gaining traction in popularity in the West. It is very low maintenance and naturally resistant to insect as well as moisture damage. Wide plank flooring is another product gaining in popularity. It has many advantages with one being it typically increases property value. Nova currently needs to have updated, proper advertising in place for these unique offerings in order to gain more awareness and increase sales.
Persona
After conducting user research, I choose Building Brian as a main persona since he is considered a DIYer, however since he is aging and prefers not to tax his body, he needs more assistance when building.
He still desires high quality products though and attention to detail. He prefers custom work projects to create his specific vision.
“I prefer [going into] a store, because I can see the products first hand, instead of ordering material and finding out that it was not what I wanted and then would have to return it.”
Actual quote from customer survey research
Empathy Map
Next I worked directly with Nova to clearly define the company's current and potential customers. It was a great brainstorming activity as it helped both me and the client to uncover blindspots about who the customers are and what they are dealing with.
Project Goals
Before moving forward with the project, I wanted to define the project goals broken down into sections so I was clear about the direction of the design.
Website Goals
After talking more with the client I realized their main website goals. Quite simplistic diagram but it seems worth it to clearly identify what the client feels is success.
Explore
Ideate
Next it was necessary to create a Feature Roadmap based on the previous research.
App Map
Based primarily on priorities 1 and 2, I then contemplated the flow of the site and decided on this structure for the sitemap. Its navigation is quite simple as that is a goal of the company owners and research users.
Task Flow + User Flow
Wireframes
Based on the sitemap, user research and competitive analysis, wireframes for the website were thoughtfully sketched out before the high fidelity wireframes were then created.
High fidelity wireframes for user flow
Participants: 5 - 7 participants, all genders, 25-50 years old
Test Goal: The user is able to complete the flow with no/minimal issues
Materialize
Method: Usability Testing
Test Objectives:
-
To understand how easily users can navigate the website design
-
To understand how easily users can find a specific product
-
To identify any errors users encounter during the process
Task Flow Description
You would like to redo your dining room floors and have just heard about the benefits of wide plank flooring.
Find more information about this type of flooring and then request a sample box and fill out the form.
After you have finished ordering, contact Nova however feels the most natural.
Usability Testing Recommendations
Insights:
The flow was fairly straightforward and the assumption was it would be quite easy for most users. The results from the test confirm this with a misclick rate of 11% and direct success of 100%.
Recommendations:
"I would have perhaps liked the checkout flow to be broken into steps with a progress indicator at the top rather than one long form"
Overall how difficult or easy was this task to complete?
Annotated wireframes with usability testing recommendations
Implement
Once I had the structure of the new site tested, it was time to sift through the old Peerless website and filter out the complimentary content and imagery which would become Nova's new branding. Wording would have to altered and images updated. Of course the limitations and constructs of SquareSpace would have to be taken into consideration when designing and changes would have to be made accordingly. Because the actual website design would be an evolution from the wireframes and recommendations, another round of usability research is recommended on the live site in order to further create an effective user experience.
Future Recommendations
Sample Box
Nova originally wanted to offer a sample box of wood for customers so they could more easily order the correct wood type and finishes. The company has not yet implemented this feature, however hi-fi wireframes were designed for it.
Chatbot
It was also noted from research that customers wanted to quickly and easily chat with someone regarding their project, therefore a chatbot is the desirable feature to solve this user desire.
Conclusion & Reflection
Coming from a graphic design background I have designed many websites before, however this was the first time creating a live website with the Design Thinking Process model and an actual client. I found the collaboration with the client very helpful in creating a product that solved a real world problem. They were impressed with the level of detail and research needed to create a product with user experience in mind and it reaffirmed in my mind as well the importance and necessity of the steps involved.
At the time of writing this, the website is in its MVP stage but as I have an ongoing contract with Nova, I will be further evolving and designing as the company grows. I look forward to the further collaboration with the owners and have more ideas about features that will both challenge my design learning and bring value to the company's image.