Kanok
An adaptive e-commerce website
Project Overview
Designing a recyclable kayak website was one of the assignments I had as a student at UXland school. In the team of four, we were assigned to design an adaptive website for both mobile and desktop devices with a focus on User Interface with our creative ideas.
Kanok is an E-commerce Project based on a hypothetical stakeholder requests as this is a school concept project. The main focus will be on selling 2 items smoothly and quickly to a beginner user.
Problem Statement
-
This website sells recycled kayaks, which users need to find out quickly about it.
-
Choosing a best-fit kayak is not accessible if it is the user's first purchase.
Goals
-
Smooth and convenient navigation. Present kayak services in a better way.
-
We aim to understand prospective users and their needs better so that we Prepare an easy way to select a kayak based on precise information.
Design Process
My team of 4 ran a double Diamond method based on the Design Thinking Methodology. It was not a linear path, we bounced between stages as the project progressed.
Discover
Business Research
In the first step, we read some articles and researches to learn more about recyclable product to have a effective understanding of the business.
Our research suggests that there are some factors that may lead some people to choose recyclable products. The Kanok business follows 3 facts as part of its mission. As such, we must keep these factors in mind when designing for the benefit of both users and business, allowing users to feel more at ease when visiting the website, as well as showing the business value proposition.
User Research
To have a better perspective about our user we conducted a survey and interviews. A key goal of our research was to understand what factors play a critical role in online shopping, especially purchasing kayaks.
In our research we understood that 80% of the users had a kayaking experience and up to 90% are the beginner kayak rider.
The survey was conducted with existing customers, but the low number of respondents prevented us from getting the data we needed. The solution we came up with was to observe more direct competitors.
Competitive Analysis
Through a deeper exploration of direct (50 websites) and indirect (30 websites)competitors, we were able to develop a SWOT model which was cross-validated throughout the design thinking process.
S
w
O
T
Strength
Weakness
Opportunities
Thread
High quality images
Clear product description
Kayak selector quiz
Confusing check out process
Clear product description
Smooth navigation
Unrelated search result
Wish list
Mandatory account creation before buying
Define
Card Sorting
We conducted an open card sorting to learn how users think the website should be organized! Fifteen people participated in the online research, and they were able to create their categories. The following is a sample of one of the card sorting.
Persona
Storyboard
We created a context scenario and a storyboard for a deeper empathy with users.
Carlos is 33 years old. It's a single web developer. He's an athlete and very environmentally friendly, and now that he's going to buy a kayak in his spare time, he's looking for a website that sells Kayak Eco Friendly. He raises this with his friend Mark, so Mark introduces the Kanok to him. He shows the website to him through his phone and tells him that he bought his kayak from this website.
Define
Site Map
Our team created a sitemap to visualize how the web pages are related to each other and understand how users navigate through the website.
User Flow
We created a user flow to show the path a user will take to complete a task and to intuitive design products, present the correct information to users at the right time, and allow users to complete desired tasks in as few steps as possible
Design
Mood Board
The color palette we created was inspired by our mood board. Mood board imagery was developed with our team based on the environment and Kayaks colors depending on the user's taste and interests.
UI Kit
The final style design brings together UI elements that dictate the high-fidelity design.
Mid Fidelity Wire-frame
A few low Fidelity wireframes are shown below.
High Fidelity Wireframes
A few High Fidelity wireframes are shown below.
*Note: The images for this school project were all found on Google and kayak websites.
Home Page
All Kayaks
Sit on Kayaks
Sit in Kayaks
Product Details
Product Details
Pups up Cart
Cart
Shipping
Shipping
Payment
Payment
Order Review
Order Confirmation
Kayak Selector
Usability test and iteration
Based on the valuable feedback received from our customers through interviews, we have made some significant iterations to our website. These changes have been implemented with the aim of improving the customer experience, increasing engagement, and ultimately driving more sales.
Navigation Bar & CTA
Before
1
2
3
After
-
Simplifying the navigation bar to just "kayaks" from "sit on top kayak" and "sit in kayak."
Using the terms "sit on top kayak" and "sit in kayak" can create confusion for users who may not be sure which type of kayak they need. Users who are new to kayaking may not be familiar with the differences between these two types of kayaks, and may feel overwhelmed or confused by the different terminology. By simplifying the navigation bar to just "kayaks," we can help users focus on their needs and preferences rather than on technical terms they may not understand.
2. Adding an "About Us" section to our navigation bar:
It can help differentiate the business from competitors and provide a unique selling proposition to help stand out in a crowded market. By highlighting the company's focus on recycling and sustainable practices, it can appeal to environmentally-conscious consumers looking for businesses that align with their values and beliefs.
3. Changing the CTA button from "Shop Now" to "Start Here":
One of the key benefits of changing the CTA button is that it can help to increase engagement with the kayak selector quiz. the "Start Here" button can help to build trust with customers by demonstrating that the business is focused on helping them find the right product for their needs, rather than simply trying to make a sale.
Value proposition
Before
Based on the interviews conducted with users, it seems that changing the website value and adding more explanation would be a good idea. By hovering on each value, the user can see more descriptions. Below are reasons why this might be the case:
-
Users may seek more information about the company and what differentiates us from our competitors. By clearly articulating our website value, we can help users understand why they should choose our company over others.
-
Users may be looking for more transparency and honesty from our company. By providing clear and honest explanations of our products or services, we can build trust with potential customers and establish our company as a reliable and trustworthy source of information.
After
Product Page CTA Button
Before
After
1
2
As UX designers, we leveraged the insights gained from usability testing to make targeted edits to a product page.
-
The CTA was moved to the top of the section, making it immediately visible to users without scrolling. A "back-to-top" feature was implemented to ensure the CTA remained accessible as users scrolled down the page, improving usability.
-
Additionally, based on user feedback, the product price was moved to the top to enhance its visibility and accessibility, as it was identified as critical information for user decision-making. These changes made the CTA and product price more prominent, convenient, and user-friendly, improving the overall user experience.
Deliver
-
During this project, I learned more about using UI resources that make up a good user experience; I set my opinion about design aside and looked for what the user needs and the most excellent solution for them.
-
I was able to experience the difficulty of limited resources. I learned how to manage my time, adjust my work, and focus on meeting realistic targets while achieving high-quality results.
-
As a team member, I learned how critical it is to maintain consistent contact with the team, especially when the project is in its early stages and the content still needs to be ready for use.
-
I learned more about how Competitive analysis is beneficial to study a business, especially when I do not have enough knowledge and learn all the details that can help us find a successful website design to make a better user experience.