Niagahoster Pricing/Checkout Feature Redesign — UX/UI Case Study | by Muhammad Syariful Umam | Bootcamp

Thumbnail

Overview

I was selected as UI/UX Designer of Virtual Internship Experience in Niagahoster batch September 2022. This program is held by Rakamin Academy. I have a month to complete all tasks, including reading material, video learning and quiz. In the last task, i have been given final project. i must implement my knowledge to redesign Pricing/Checkout Feature on Niagahoster Website.

Niagahoster has an unattainable target for the number of buyers of hosting services. The results of the research that there are some users who are confused when choosing service options on the checkout page. Those users took a long time to make their choice. The problem is users are faced with too many choices and do not understand the definition of each option offered.

You can see the current design here

Problem

User Reseach — In-Depth Interview

For validating the problem, i do In-Depth Interview as my user research method. I invited 3 new user of Niagahoster. I explore more what the problem is.

Action Priority Matrix

After collecting the problem, i can prioritize how can i do based on Action Priority Matrix. I take the item on high impact and low effort.

Those Are :

More hosting package information (Detail each part)
Loading Status “Add to Cart” need more noticed
“Already Registered” alert need more noticed
Confused to scroll down, need less scrolling

Wireframe

I focused on how to tell the information with less text/item. I ideate how the interface will be.

Design System

Design System ~ 1

Design System ~ 2

Design System ~ 3

After making wireframe, i create design system to ease my way using the component repeatly.

UI Design

Information Pop up

I add detail information pop up while hovering the item. it can ease user to understand each item.

“Add to Cart” Button

I put cart button in summary component. I try to put the most focused item to ease user what can they do after that. user tends to see the summary at the end of the flow.

“Already Registered” Alert

One of the user problem is he can’t noticed the “Already Registered” Alert. because the alert is same with other item. that’s why i create the alert more visible with red color in placing in the visible place.

Less Scrolling Down

Before redesign result, user is confused why the page must scroll down. he think that too much information to be filled out and understood. I put the duration of package with simple switch button.

Prototype

for the better experience, this is my clickable prototype that can be tried.

Prototype

Usability Testing

Scenario 1

You are a user who wants to build a website for your business. But you never buy a website hosting. You are provided with several package options. But you are not familiar with the explanation of every detail of the features provided.

Task

Find the detailed information for each feature offered.

Flow

Hover Feature — Pop up information detail

Scenario 2

You want to buy one of the packages offered with a new domain and the duration that you need.

Task

You want to buy one of the packages offered with a new domain and the duration you need.

Flow

Choose Duration — Choose Package — Choose New Domain — Fill in form — Check Domain — Add to cart

Result

Based on the usability testing result, users think the new design is more understandable than old one. Most of their feedback is the new design helps user to ease their way to choose the hosting package on pricing page.

You can check my video recording when i do usability testing.

Closing

Thank you for your availability to read my UX/UI Case Study, that is Niagahoster Pricing/Checkout Feature Redesign. Of course, in making this case study, I am very grateful for the support especially from research resource, my partner and all of involved participants.

That’s all of my Case Study, Forgive me if there are spelling or word errors. because i am in the learning stage for research and design. if you have any feedback or suggetions, please contact me. because it is very important for my further self development.

Thank you very much for the time and opportunity,

Muhammad Syariful Umam