Mobile Protection Webpage Redesign

Published in

OneAssist Tech

5 min readFeb 20, 2023

Overview

I’m writing this article to share the ideas and process for redesigning the mobile protection webpage. It also includes my design decisions, how I got there, and what I’ve accomplished.

What is Mobile Protection?

Let’s first understand what a mobile protection plan is.

The mobile protection plan from OneAssist can help protect your mobile devices from damage caused by accidents or liquids, in addition to extending the warranty on your mobile devices. To see what plans are suitable for a given mobile device, customers can visit the mobile protection page and select their desired plans.

Business Goal

Our primary business objectives were to increase the CTR of the page, present users with information that was pertinent to their needs and beneficial to their experience with OneAssist, and foster a sense of trust among the users.

Design Process

To begin, I divided the task into four distinct stages — Discover, Define, Develop, and Deliver (popularly known as the Double Diamond design process).

1. Discover

During the Discover process, I was able to identify the user interests as well as the pain points that were associated with the current page. I did some secondary research and gathered some information from the competitive analysis.

The main goals were to find out:

How do our competitors get people to believe in their brands?
What kind of information do they give to the user?

I also looked at some websites with a lot of content to see how they manage it and make it user-friendly since we have a lot of useful information for the user.

Here are the results I found after looking at some websites:

To find out about the users’ interests, I collected data from the user interviews (conducted earlier).

Here are the insights that I got:

After figuring out what the users wanted and analysing the data from the competitive analysis, I found these problems with the system that I had to resolve:

2. Define

Based on the results of the first step, these were the goals I wanted to reach to satisfy both the needs of the users and the needs of the business:

I decided to keep track of some metrics to see how well my choices worked out. Based on Google’s HEART framework, I’ll measure the following:

3. Develop

The next thing that needed to be done was to think of a way to fix the issues that were found. As a result, I decided to revamp the website while bearing the aforementioned objectives in mind.

I decided to start by constructing the wireframes, and then I invited the stakeholders to participate in a brainstorming session centered on those wireframes. Because most of our user base comprises mobile device users, I opted to take a mobile-first approach. When designing our website, I considered two distinct categories of visitors.

The current flow was covering the needs of type 1 users. We just needed to enhance the information already provided for this user group. To target the needs of the type 2 user group, we made some wireframes and user flows.

Brainstorming session with the stakeholders

After completing the wireframes, a review was conducted with business stakeholders. The topics of our discussion were:

To discuss what we observed while discovering user needs.
The proposed solution for the problems identified.
The new information that we want to put on our webpage.
Required changes on the existing webpage.

The session was very productive as we shared our understanding and finalized the information that we needed to provide to the users.

4. Deliver

After completing the wireframes, I moved on to the next step, which was creating implementation-ready visual designs. Creating the UI was an iterative process. I’m adding the existing webpage design first and then the redesigned webpage with a brief explanation.

Existing Design