Niagahoster
Niagahoster
Solving the checkout page
Solving the checkout page
UX design case study | Rakamin Academy Virtual Internship Program
UX design case study | Rakamin Academy Virtual Internship Program
Roles & Responsibilities
Roles & Responsibilities
I did Competitive Analysis, Wireframing, High fidelity and Usability Testing
I did Competitive Analysis, Wireframing, High fidelity and Usability Testing
Timeline
Timeline
March 2023
12 days
March 2023
12 days
Tools used
Tools used
Figma, Google Form, Screen Record, Maze
Figma, Google Form, Screen Record, Maze
Disclaimer: This project is not affiliated with Niagahoster, The purpose of this project is to complete the tasks of Rakamin Academy Virtual Internship Program.
Disclaimer: This project is not affiliated with Niagahoster, The purpose of this project is to complete the tasks of Rakamin Academy Virtual Internship Program.
About The Project
About The Project
I was assigned to complete a project-based internship from Rakamin Academy on solving the checkout page within 7 days using in-person usability testing. However, after that, I conducted a redesign of my initial design within 5 days using user testing on Maze design testing platform.
I was assigned to complete a project-based internship from Rakamin Academy on solving the checkout page within 7 days using in-person usability testing. However, after that, I conducted a redesign of my initial design within 5 days using user testing on Maze design testing platform.
Previously, for the context of this case, the project I worked on was for Niagahoster. Niagahoster is a web hosting company based in Yogyakarta that was founded in 2013 with 24-hour customer service.
Previously, for the context of this case, the project I worked on was for Niagahoster. Niagahoster is a web hosting company based in Yogyakarta that was founded in 2013 with 24-hour customer service.
How to make it easier for users to checkout on website hosting?
How to make it easier for users to checkout on website hosting?
How to make it easier for users to checkout on website hosting?
The Problem
The Problem
Users spend a long time deciding on their options. Based on my assumption, The cause of the problem is due to users being faced with too many options and not being able to figure out the descriptions of each of the choices
Users spend a long time deciding on their options. Based on my assumption, The cause of the problem is due to users being faced with too many options and not being able to figure out the descriptions of each of the choices
Problem #1: Progress bar too small
Problem #1 Main menu display
Problem #1: Progress bar too small
The progress bar is too small and difficult to see, making it challenging to track.
The progress bar is too small and difficult to see, making it challenging to track.
The progress bar is too small and difficult to see, making it challenging to track.
Problem #2: Hard to comparing prices
Problem #1 Main menu display
Problem #2: Hard to comparing prices
Users confused to choose the duration of the package because what is displayed first is the type of package, they need to scroll to see it.
Users confused to choose the duration of the package because what is displayed first is the type of package, they need to scroll to see it.
Users confused to choose the duration of the package because what is displayed first is the type of package, they need to scroll to see it.
Problem #3: No customer service to chat
Problem #1 Main menu display
Problem #3: No customer service to chat
There is no assistant chatbot to ask about purchases
There is no assistant chatbot to ask about purchases
There is no assistant chatbot to ask about purchases
Project goal
Project goal
"I simplified the design by eliminating scrolling, repositioned features, and transformed it into a carousel format. These changes aim to make it effortless for users to check out and select packages."
"I simplified the design by eliminating scrolling, repositioned features, and transformed it into a carousel format. These changes aim to make it effortless for users to check out and select packages."
1st Iteration
1st Iteration
I used the sprint method within 7 days, include reviews the problem, brainstorming the ideas, finding the solutions, designing prototype and solutions validation. Here are the results of the solutions that I made
I used the sprint method within 7 days, include reviews the problem, brainstorming the ideas, finding the solutions, designing prototype and solutions validation. Here are the results of the solutions that I made
I used the sprint method within 7 days, include reviews the problem, brainstorming the ideas, finding the solutions, designing prototype and solutions validation. Here are the results of the solutions that I made
Due to time constraints, I tested the prototype with 2 person using in-person usability testing and the System Usability Scale
Due to time constraints, I tested the prototype with 2 person using in-person usability testing and the System Usability Scale
Due to time constraints, I tested the prototype with 2 person using in-person usability testing and the System Usability Scale
From the feedback I received, users suggested presenting it in a 'next' format but utilizing a carousel model. Additionally, users still faced challenges when comparing prices; the design I created did not effectively facilitate price comparisons.
From the feedback I received, users suggested presenting it in a 'next' format but utilizing a carousel model. Additionally, users still faced challenges when comparing prices; the design I created did not effectively facilitate price comparisons.
From the feedback I received, users suggested presenting it in a 'next' format but utilizing a carousel model. Additionally, users still faced challenges when comparing prices; the design I created did not effectively facilitate price comparisons.
"Still hard to comparing prices to other packages"
"Still hard to comparing prices to other packages"
"it's too long to scroll down"
"it's too long to scroll down"
Competitive analysis
Competitive analysis
To find out which websites users could use to compare prices, I used Bluehost and Scalahosting as comparisons so that users could apply the insights to Niagahoster
To find out which websites users could use to compare prices, I used Bluehost and Scalahosting as comparisons so that users could apply the insights to Niagahoster
To find out which websites users could use to compare prices, I used Bluehost and Scalahosting as comparisons so that users could apply the insights to Niagahoster
Both this website have similarities, especially in the package section, users can choose the duration of time that already in the package section without having to scroll down, thus the users are not overwhelmed with options
Both this website have similarities, especially in the package section, users can choose the duration of time that already in the package section without having to scroll down, thus the users are not overwhelmed with options
Both this website have similarities, especially in the package section, users can choose the duration of time that already in the package section without having to scroll down, thus the users are not overwhelmed with options
This is what is considered standard practice, by creating duration package and type of package in one, users can compare packages easily without need to scrolling.
This is what is considered standard practice, by creating duration package and type of package in one, users can compare packages easily without need to scrolling.
2nd Iteration
2nd Iteration
Design solutions
Design solutions
After the first iteration, I redesigned the prototype, which took 5 days, including the time for conducting user testing using Maze.
After the first iteration, I redesigned the prototype, which took 5 days, including the time for conducting user testing using Maze.
After the first iteration, I redesigned the prototype, which took 5 days, including the time for conducting user testing using Maze.
Solutions #1
Move the progress bar to the top of the screen
Solutions #1
Move the progress bar to the top of the screen
Solutions #1
Move the progress bar to the top of the screen
Before: The progress bar is located within the text box; some people may not notice it because it's too small.
Before: The progress bar is located within the text box; some people may not notice it because it's too small.
Before: The progress bar is located within the text box; some people may not notice it because it's too small.
After: I made the progress bar larger and moved it to the top which is normally located so that users could see where their progress was at all times.
After: I made the progress bar larger and moved it to the top which is normally located so that users could see where their progress was at all times.
After: I made the progress bar larger and moved it to the top which is normally located so that users could see where their progress was at all times.
Solutions #2
Repositioning Some Features and Carousel Design
Solutions #2
Repositioning Some Features and Carousel Design
Solutions #2
Repositioning Some Features and Carousel Design
Before: Users had to scroll down to view the offered package durations. This was less effective because users found it difficult to compare package prices and duration prices.
Before: Users had to scroll down to view the offered package durations. This was less effective because users found it difficult to compare package prices and duration prices.
Before: Users had to scroll down to view the offered package durations. This was less effective because users found it difficult to compare package prices and duration prices.
After: I merged “duration package” feature into a single feature so that users could see the prices.
After: I merged “duration package” feature into a single feature so that users could see the prices.
After: I merged “duration package” feature into a single feature so that users could see the prices.
Before: To add a domain, users have to scroll, and it will take time.
Before: To add a domain, users have to scroll, and it will take time.
Before: To add a domain, users have to scroll, and it will take time.
After: I moved the "add domain" feature into a carousel.
After: I moved the "add domain" feature into a carousel.
After: I moved the "add domain" feature into a carousel.
Solutions #3
Move the progress bar to the top of the screen
Solutions #3
Move the progress bar to the top of the screen
Solutions #3
Move the progress bar to the top of the screen
I Added a chat guide that connects with customer service so that users can ask directly if they have some questions about payment and Included with a mini FAQ feature.
I Added a chat guide that connects with customer service so that users can ask directly if they have some questions about payment and Included with a mini FAQ feature.
User testing
User testing
I tested 5 persons aged 20-40 years old, the testers I recruited came from a variety of different backgrounds
I tested 5 persons aged 20-40 years old, the testers I recruited came from a variety of different backgrounds
As a result, several users misclicked at the beginning, but all users were able to complete the task in the end.
As a result, several users misclicked at the beginning, but all users were able to complete the task in the end.
Feedback
Feedback
"The text in the checkout direction should be more bold"
"The text in the checkout direction should be more bold"
" Need provide more details on purchase discounts"
" Need provide more details on purchase discounts"
"The text spacing is too close and too difficult to read"
"The text spacing is too close and too difficult to read"
"The design is good enough and understandable"
"The design is good enough and understandable"
From here, I can conclude that many users complete tasks quickly, and the checkout design is simple. However, there are issues to address, such as text readability and the spacing of each text.
From here, I can conclude that many users complete tasks quickly, and the checkout design is simple. However, there are issues to address, such as text readability and the spacing of each text.
What Works and What Doesn’t Work?
What Works and What Doesn’t Work?
Works
Works
Through two iterations, there has been a significant improvement, proving the necessity of iterations. One of them is moving the progress bar, making it easier for users to track progress, and consolidating the price and duration of the package on one screen, facilitating user comparisons.
Through two iterations, there has been a significant improvement, proving the necessity of iterations. One of them is moving the progress bar, making it easier for users to track progress, and consolidating the price and duration of the package on one screen, facilitating user comparisons.
Doesn’t Work
Doesn’t Work
However, I am still learning and facing challenges in design. There are still issues with text spacing being too tight, and some texts are difficult to read. Additionally, some texts should be bolded or highlighted differently for better visibility.
However, I am still learning and facing challenges in design. There are still issues with text spacing being too tight, and some texts are difficult to read. Additionally, some texts should be bolded or highlighted differently for better visibility.
What will i do
What will i do
Continue to prioritize user feedback, especially regarding the fonts size, tok make sure that the displayed text is readable for users.
Continue to prioritize user feedback, especially regarding the fonts size, tok make sure that the displayed text is readable for users.
Prioritizing iterative design enhancements from users feedback is essential for optimizing functionality and user experience.
Conclusions
Conclusions
Feedback and iteration are important during the design process
Feedback and iteration are important during the design process
In a short timeframe, I applied the sprint method to efficiently gather ideas, data, brainstorm, design, and conduct user testing. Recognizing the crucial role of user testing in identifying mistakes and making improvements, I went through two rounds of this case study. The feedback from users played a vital role in enhancing the quality of my design because it enables designers to understand user needs, creating more user-centric solutions.
In a short timeframe, I applied the sprint method to efficiently gather ideas, data, brainstorm, design, and conduct user testing. Recognizing the crucial role of user testing in identifying mistakes and making improvements, I went through two rounds of this case study. The feedback from users played a vital role in enhancing the quality of my design because it enables designers to understand user needs, creating more user-centric solutions.
Lesson learned
Lesson learned
This is a major improvement for me. I did the user testing and iteration 🎉
This is a major improvement for me. I did the user testing and iteration 🎉
Because of time constraints, I had a tough time diving deep into user research, both Qualitative and Quantitative. So, I ended up making some assumptions.
Because of time constraints, I had a tough time diving deep into user research, both Qualitative and Quantitative. So, I ended up making some assumptions.
I also conducted two different user tests, each with its own advantages. In direct usability testing, I could interact face-to-face with users, asking them questions directly about their difficulties; however, this method took more time. On the other hand, using the Maze design testing platform, I could easily gather data, especially by utilizing heatmaps to identify where users faced challenges. This approach also saved time, though it was less effective as I couldn't directly understand users' difficulties.
I also conducted two different user tests, each with its own advantages. In direct usability testing, I could interact face-to-face with users, asking them questions directly about their difficulties; however, this method took more time. On the other hand, using the Maze design testing platform, I could easily gather data, especially by utilizing heatmaps to identify where users faced challenges. This approach also saved time, though it was less effective as I couldn't directly understand users' difficulties.
Furthermore, I recognized areas of improvement in my design skills—specifically in white space, layouts, element positioning, small text and tight spacing in the design. While my design is far from perfect, this project served as a valuable learning experience,
Furthermore, I recognized areas of improvement in my design skills—specifically in white space, layouts, element positioning, small text and tight spacing in the design. While my design is far from perfect, this project served as a valuable learning experience,
