UXDI7 Redesigning M1 Desktop and Mobile website

Joelle Yeo
Jul 30, 2017 · 6 min read

For project 4, Shawn and I were team by drawing lots. It was a wonderful working with him again because both were committed to get things done.

For project 4, we were asked to improve the User Interface of M1’s website and also to improve their mobile site by making it fully responsive.

The Client

M1 is the second telecommunications operator in Singapore, founded in 1994. I was in charge of the Business Analysis and I dived into research and analysis of the telecommunications industry of Singapore.

Being a small country as it is, the telecommunications industry is dynamic and highly competitive. Currently it is still an oligopolistic market dominated by 3 key players — Singtel, Starhub and M1 (in order of their market share).

In the past few years we saw the entrance of boutique broadband service providers such as Viewquest and MyRepublic. This year, TPG Telecom was awarded the bid by the Informations Development Authority (IDA), making it the fourth telecommunications operator in Singapore. (Perhaps a forthcoming price war to benefit the consumers?)

Key Deliverables

For this project we had to submit a high-level timeline for our work process, with the assumption of completion in 6 months. We had to deliver a pitch presentation that articulates our design process. This has to identify user problems, our solutions and how we address the pain points through our redesign works.

Current Site Analysis

Shawn and I went through the current website as we arranged for some users interviews. We want to find out how users of the website navigate around it and what are the key problems they find.

Through our analysis, we found some inconsistencies in the labels and placement of products. We drafted questions for the user interviews and proceed to extract insights from users.

User Interview

User research and testing

We interviewed users to find out what they usually look for when making a decision to purchase a mobile phone with plans. Through the interviews, we could understand their purchase behaviours, needs and motivation. We also gave our users a task to try to purchase an Samsung mobile phone with the i-Lite+ plan. Using observation techniques, we noted on the steps they took, the problems they faced, as well as the features they hoped to have to shorten the purchase process.

User Research and Affinity Mapping

Affinity Mapping highlighting users’ needs and pains

Since this is the fourth project, we are more familiar with the process of analysing our research data. From the data collected for affinity mapping, we found many similarities in our users’ purchase journey. They all wanted an easier way for comparison for the phones and a clearer view to the plans available.

From the users research, we realised that one the biggest pain from the users was accessing the website using mobile devices. All our users had to choose “desktop version” before they could search for the product they wish to buy.

Creating the Personas

A persona is a representation of a user, gathered from user research by including their goals, needs and interests. By creating personas, it helps the designer to have empathy for the users by being able to internalize the users’ mindsets when they use the website. At the same time, personas help the designer to stay focus on creating a user-centric website.

Customer Journey Mapping

Ella Lim was our chosen persona.

From our personas, we created the Customer Journey Map to indicate the process of how the user made a purchase. With this, we can pinpoint the important details required in our new design of the website.

Ideation and Solutions

We sketched a few designs and integrated them to the website.

Design Objective

The objective of redesigning the M1 website is to increase the opportunities of new customers and build loyalty and positive opinions of the M1 brand. To achieve this, we will have to provide users with a responsive and intuitive website that makes them feel confident when researching and purchasing products.

PROPOSED SOLUTION

  1. Simplicity — Simple and easy to use navigation
  2. Findability — Easy to find and compare mobile phones
  3. Clarity — Display critical information upfront
  4. Saliency — Reduce redundant steps during purchase
  5. Consistency — Similar style and navigation across platforms
  6. Usability (mobile site) — Lack of product and function
Hi-fi wireframe using sketch application
Solving CTA issue, and modernising the website.

User feedback

After our prototype was completed, we invited our users back to test it out. They took a much shorter time to complete their task to purchase the Samsung phone. They commented that the new design was clearer and easier to use as they were able to compare mobile phones with ease. They also liked the way the plans were shown in a neater structure.

Bigger product images, clearer price figure and better CTA.
Solving product comparison issue.
]Separating different product lines in different categories.

Users prefer the information of the price plans were clearly shown so they know how to select a suitable plan for themselves.

Took away the hidden form filling by having it upfront on a single page.

The new form is clearer in one page and the users know what is the amount of information they are expected to fill in. Compared to the current site, the users are now allowed to skip sections of the forms that are not applicable to them.

Mobile Phone Prototype

Viewing the site from a mobile device is now clearer

Since users all complained about the difficulty on accessing the website via a mobile device, we changed the layout of the website to be neater and adaptable to mobile screens. Previously they were prompted to switch to a desktop version and this was removed from our mobile site. The current website is also inconsistent with their mobile site. We created the design that will flow seamlessly from the desktop to mobile site version. We also did a hygiene cleaning of the mobile site content.

Hi-fi wireframe using sketch application
Users can click on the shortcut of the plan if they already know which plan they wish to purchase.

By tabulating the mobile plans, users can have a clearer view for comparison as they have a view on all the plans available.

Existing site prompt users to switch to desktop version when they tried to select a plan.

Reflections

I would like to improve the rest of the products that M1 has to offer to their clients such as broadband internet and business plans. It was a great learning opportunity to adapt the website to a mobile site as I had to maintain a consistent design on both interfaces.

Joelle Yeo

Written by

Follow me on twitter @bigfabdesign

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade