New Sound Testing Feature For Akko Website
Akko is a company that offers a wide range of custom mechanical keyboards and parts. Their customer-centric mission is that every user can find their desired colors, layouts, and switches with an accessible choice. Sound Testing Feature for Akko is a study project within Google UX Design Professional Course. I found it interesting to try to “integrate” a new feature that aligns with company mission and users’ needs.
Client:
Capstone Project
Role:
UX/UI Designer
Year:
Dec - Jan 2024
Imagine:
You open a keyboard store, excited to find your dream board — something soft, clicky, satisfying.
You scroll, compare, and finally spot the perfect one.
But there’s one problem: you have no idea how it sounds.
No sound samples. No feedback.
Just silence behind the screen.
Imagine:
You open a keyboard store, excited to find your dream board — something soft, clicky, satisfying.
You scroll, compare, and finally spot the perfect one.
But there’s one problem: you have no idea how it sounds.
No sound samples. No feedback.
Just silence behind the screen.
Imagine:
You open a keyboard store, excited to find your dream board — something soft, clicky, satisfying.
You scroll, compare, and finally spot the perfect one.
But there’s one problem: you have no idea how it sounds.
No sound samples. No feedback.
Just silence behind the screen.
Imagine:
You open a keyboard store, excited to find your dream board — something soft, clicky, satisfying.
You scroll, compare, and finally spot the perfect one.
But there’s one problem: you have no idea how it sounds.
No sound samples. No feedback.
Just silence behind the screen.
The Challenge:
Users Have To Leave Akko's Website To Find Sound Testing Videos
The Challenge:
Users Have To Leave Akko's Website To Find Sound Testing Videos
Many gamers and developers face this problem when trying to buy a keyboard with specific sound requirements on Akko's website.
They have to seek sound tests/video reviews outside Akko's website (on YouTube, for example).
Why does this problem matter:
This lack of information leads to a disjointed shopping experience and a waste of users' time, which leads to increased drop-offs.
Business opportunity:
Addressing this could enhance user satisfaction and potentially increasing the conversion rate by up to 20%.
Many gamers and developers face this problem when trying to buy a keyboard with specific sound requirements on Akko's website.
They have to seek sound tests/video reviews outside Akko's website (on YouTube, for example).
Why does this problem matter:
This lack of information leads to a disjointed shopping experience and a waste of users' time, which leads to increased drop-offs.
Business opportunity:
Addressing this could enhance user satisfaction and potentially increasing the conversion rate by up to 20%.
Many gamers and developers face this problem when trying to buy a keyboard with specific sound requirements on Akko's website.
They have to seek sound tests/video reviews outside Akko's website (on YouTube, for example).
Why does this problem matter:
This lack of information leads to a disjointed shopping experience and a waste of users' time, which leads to increased drop-offs.
Business opportunity:
Addressing this could enhance user satisfaction and potentially increasing the conversion rate by up to 20%.
Many gamers and developers face this problem when trying to buy a keyboard with specific sound requirements on Akko's website.
They have to seek sound tests/video reviews outside Akko's website (on YouTube, for example).
Why does this problem matter:
This lack of information leads to a disjointed shopping experience and a waste of users' time, which leads to increased drop-offs.
Business opportunity:
Addressing this could enhance user satisfaction and potentially increasing the conversion rate by up to 20%.
Process
Process
I started the work by establishing a solid understanding of the context and working on gathering insights from users.
Define the target audience:
The first step is to identify the target audience and their needs, pain points, and preferences. This information will inform the design of the feature and ensure that it resonates with the target audience.
Create wireframes:
A wireframe is a rough sketch of the landing page layout and content. At this stage I tried different concepts to define the best ones to test later with users.
Create first prototype & test:
At this stage, I created 2 low-fidelity prototypes of two different concepts and tested them through moderated testing with 3 users.
Create a design:
After identifying the best layout, I started to design its high fidelity version with needable components, images, text and etc.
Ask users for the final feedback:
The process does not stop at the design. It needs further testing with users. So I did it.
I started the work by establishing a solid understanding of the context and working on gathering insights from users.
Define the target audience:
The first step is to identify the target audience and their needs, pain points, and preferences. This information will inform the design of the feature and ensure that it resonates with the target audience.
Create wireframes:
A wireframe is a rough sketch of the landing page layout and content. At this stage I tried different concepts to define the best ones to test later with users.
Create first prototype & test:
At this stage, I created 2 low-fidelity prototypes of two different concepts and tested them through moderated testing with 3 users.
Create a design:
After identifying the best layout, I started to design its high fidelity version with needable components, images, text and etc.
Ask users for the final feedback:
The process does not stop at the design. It needs further testing with users. So I did it.
Solution:
All In One Place:
To Save Users’ Time & Increase Business’s Sales
Solution:
All In One Place:
To Save Users’ Time & Increase Business’s Sales
The best UX improvements are often the simplest.
To support user decision-making, I added a new subsection with keyboard sound videos and brief sound descriptions in the specifications.
By integrating these resources into the product page, users no longer need to leave the site to research — it's improving the experience, reducing bounce rates, and positively impacting sales.
The best UX improvements are often the simplest.
To support user decision-making, I added a new subsection with keyboard sound videos and brief sound descriptions in the specifications.
By integrating these resources into the product page, users no longer need to leave the site to research — it's improving the experience, reducing bounce rates, and positively impacting sales.
The Design Process:
How I Made A Decision To Move On
With A Simpler Idea Instead Of a Cooler One
The Design Process:
How I Made A Decision To Move On
With A Simpler Idea Instead Of a Cooler One
Of course, at the beginning, I was determined to design something really cool.
My first idea was to create a 3D keyboard layout that would play the sound of the switches when users clicked on the keycaps on the screen. I was quite attached to this concept for a while.
Of course, at the beginning, I was determined to design something really cool.
My first idea was to create a 3D keyboard layout that would play the sound of the switches when users clicked on the keycaps on the screen. I was quite attached to this concept for a while.
Users also gave me positive feedback on the idea and first drafts, but I felt that something wasn’t quite right.
After doing some research, I realized that implementing my plan would be too costly for the business.
So, I decided to move on with a simpler idea. I made my design decisions based on direct user feedback, estimated customer satisfaction rates, and considerations for design scalability.
Users also gave me positive feedback on the idea and first drafts, but I felt that something wasn’t quite right.
After doing some research, I realized that implementing my plan would be too costly for the business.
So, I decided to move on with a simpler idea. I made my design decisions based on direct user feedback, estimated customer satisfaction rates, and considerations for design scalability.
The Design Iteration:
Design A vs Design B
The Design Iteration:
Design A vs Design B
In the first stage, I ended up with 2 designs. Both were about the same idea, but with entirely different approaches.
Design A was about separating the content by adding another subsection called “Videos”.
Design B was about integrating sound testing / reviews videos into the main landing of description.
In the first stage, I ended up with 2 designs. Both were about the same idea, but with entirely different approaches.
Design A was about separating the content by adding another subsection called “Videos”.
Design B was about integrating sound testing / reviews videos into the main landing of description.
In the first stage, I ended up with 2 designs. Both were about the same idea, but with entirely different approaches.
Design A was about separating the content by adding another subsection called “Videos”.
Design B was about integrating sound testing / reviews videos into the main landing of description.
In the first stage, I ended up with 2 designs. Both were about the same idea, but with entirely different approaches.
Design A was about separating the content by adding another subsection called “Videos”.
Design B was about integrating sound testing / reviews videos into the main landing of description.
Both designs provided the same information, but my questions were:
"Which layout will be more 'natural' for users?" and
"Which layout makes it easier to spot seekable information?".
To inform my design decision, I conducted moderated usability testing with three users for both layouts. After those sessions, I studied users' feedback to gather new insights.
Both designs provided the same information, but my questions were:
"Which layout will be more 'natural' for users?" and
"Which layout makes it easier to spot seekable information?".
To inform my design decision, I conducted moderated usability testing with three users for both layouts. After those sessions, I studied users' feedback to gather new insights.
Both designs provided the same information, but my questions were:
"Which layout will be more 'natural' for users?" and
"Which layout makes it easier to spot seekable information?".
To inform my design decision, I conducted moderated usability testing with three users for both layouts. After those sessions, I studied users' feedback to gather new insights.
Both designs provided the same information, but my questions were:
"Which layout will be more 'natural' for users?" and
"Which layout makes it easier to spot seekable information?".
To inform my design decision, I conducted moderated usability testing with three users for both layouts. After those sessions, I studied users' feedback to gather new insights.
Design Iteration:
Responsiveness
Design Iteration:
Responsiveness
New designs are responsive and adaptive, as many people use their phones or tablets for online shopping purposes.
While working on the responsiveness of the pages, I fixed many original alignment issues, added a negative space, and described the sound to make the user experience more accessible.
New designs are responsive and adaptive, as many people use their phones or tablets for online shopping purposes.
While working on the responsiveness of the pages, I fixed many original alignment issues, added a negative space, and described the sound to make the user experience more accessible.
New designs are responsive and adaptive, as many people use their phones or tablets for online shopping purposes.
While working on the responsiveness of the pages, I fixed many original alignment issues, added a negative space, and described the sound to make the user experience more accessible.
New designs are responsive and adaptive, as many people use their phones or tablets for online shopping purposes.
While working on the responsiveness of the pages, I fixed many original alignment issues, added a negative space, and described the sound to make the user experience more accessible.
Key Takeaways
Key Takeaways
Scope: Even if a task appears simple at the outset, it is likely to become apparent during the process that it is actually twice as difficult. There is a lot of work behind each solution.
Compromise: When deciding on the design solution to move forward, it is important to take into account the resources needed for its realization.
Research: User Interviews are worth the time and effort. I've gained the best insigths through interviews.
Scope: Even if a task appears simple at the outset, it is likely to become apparent during the process that it is actually twice as difficult. There is a lot of work behind each solution.
Compromise: When deciding on the design solution to move forward, it is important to take into account the resources needed for its realization.
Research: User Interviews are worth the time and effort. I've gained the best insigths through interviews.
Scope: Even if a task appears simple at the outset, it is likely to become apparent during the process that it is actually twice as difficult. There is a lot of work behind each solution.
Compromise: When deciding on the design solution to move forward, it is important to take into account the resources needed for its realization.
Research: User Interviews are worth the time and effort. I've gained the best insigths through interviews.
Scope: Even if a task appears simple at the outset, it is likely to become apparent during the process that it is actually twice as difficult. There is a lot of work behind each solution.
Compromise: When deciding on the design solution to move forward, it is important to take into account the resources needed for its realization.
Research: User Interviews are worth the time and effort. I've gained the best insigths through interviews.