
Deliver a pitch: Redesign an existing website to be responsive, useful and usable
Our task was to redesign a responsive website for M1 that focuses on product content, navigation and user interface. This is by far the most challenging project due to the high amount of usability issues, time constraints and lack of team resources. Since we were only working in a team of 2, project planning and management thus became our top priority. We did the project plan together, analysed and listed down all the essential tasks we need to complete.
Our first task was to quickly identify all possible usability problems on the current website. We started by doing a heuristic evaluation to have a general idea of what could have gone wrong and followed up with a comparative analysis against its competitors — Singtel and Starhub, to measure its market standard.
User Research
Once we have an idea of the problems, we conducted our first round of usability testing session on the current desktop site and mobile site together with user interviews.
Our group of users consists of people who are currently M1 customers as well as potential M1 customers who have used M1 website to compare products and plans. We noted down the demographic, motivation and frustration of each user and synthesised the results using affinity mapping.

Among all, these were the top 3 concerns from the users:
“I want to find out more about the products easily”
“I want to make my purchase quickly”
“I want to perform similar task on desktop and mobile”
With the users’ insights, we were able to craft our personas. We created 2 personas, namely Ella and Danny. Ella is a potential user while Danny is an existing user. To align with the business goal, which is to increase the user pool with innovative customer-centered approach, we prioritised the needs of the primary persona, Ella.

Customer Journey Map
To have a deeper understanding of Ella’s emotions and concerns, we created a customer journey map to visualise how Ella would interact with M1’s website during her purchase process. By doing so, we discovered a number of opportunities to solve Ella’s problems.

Feature Prioritisation
As much as there were a number of usability issues on the entire website, we only had the time to work on one section. Therefore, we prioritised the “Mobile Phones & Plans” section as most of the negative feedbacks gathered originate from here. We analysed the section and identified the users’ needs and gaps of the website.

Ideation and Interface Design
Our design objective is:
“To increase the opportunities of new customers and build loyalty and positive opinions of the M1 brand, we will provide a responsive and intuitive website that makes customers feel confident when researching and purchasing products.”
With that in mind, we proposed our solutions based on the following 6 points:
- Simplicity — Simple and easy to use navigation
- Findability — Easy to find and compare mobile phones
- Clarity — Display critical information upfront
- Saliency — Reduce redundant steps during purchase
- Consistency — Similar style and navigation across platforms
- Usability (mobile site) — Lack of product and function

The first thing we worked on is the home page. This is the page where all the users will use regardless of which M1 services they are looking for. The existing homepage had all the information being lumped together, it wasn’t organised in an intuitive way and there was a lack of focus. We proposed to have the information arranged into 3 segments with the top page showing the main product line, middle page showing their secondary services and bottom page showing the corporate stuffs.

The existing landing page of “Mobile Phones & Plans” featured phones randomly, based on our user research, majority of the users own an iPhone or Samsung, thus having Alcatel at the top would force users to start with the search function. As such, we proposed to arrange the phones by popularity.

On the phone comparison page, everything was cluttered at the top with the call-to-action button being squeezed together with the mobile phone followed by phone details. It was extremely counterintuitive because users have to scroll all the way back to the top if they are interested to buy the phone. We proposed to rearrange the mobile phone to be at the top followed by phone details and call-to-action button. Also, increasing the overall size for a better visibility is recommended.

Mobile plans were arranged in random order without showing information critical to the users. Hence, users had no idea what each plan was, increasing the probability of users selecting the wrong plan and have to redo the entire buying process at the final check out page. Also, generic plans were mixed with special plans for specific users such as students and people with disabilities.
We proposed to arrange the plans into categories, catering to generic users, student and people with disabilities respectively while displaying critical information upfront to prevent users from selecting the wrong plans. The unique selling point of M1 “Free calls to 3 M1 numbers” will also be displayed on top instead of hidden in a dropdown menu.

Form were split into different parts and hidden under dropdown menus. To fill the form, users have to expand each dropdown menu manually, which made the entire purchasing process inconvenient. We proposed a simpler version by allowing users to view the entire form within a glance, which would reduced the amount of steps that needs to be taken to fill up the form.

There was no consistency in the existing website and mobile site. It looked like 2 different websites. The most obvious difference is the colour of both main navigations. We proposed to have both the website and mobile site to share the same design element and colour to avoid confusion.

The existing mobile site lacks product content and function. As one of the most popular phones on the market, we were surprised that iPhone could not be found on the mobile site. Purchase function were not available on the mobile site too. After checking out the phones, users will be prompted to go to the desktop site on their mobile phone, where the content shown appeared to be extremely tiny. It’s hard to expand the correct dropdown menu and fill up the form thus it’s not usable at all. We proposed the mobile site to include the full product list as well as the option to purchase.
Pitch Deck

Our final step was to build a pitch deck for the client. We began with the hook, which we showed a video of M1 most glorious moment followed by current statistics and market trends. Next we identified the potential and existing M1 users and introduced how we can help M1 to acquire more customers. We then identified the existing problems that were affecting the business and proposed our design objective and solutions. After which, we worked out a project plan and the next course of action.
The overall experience was great. We managed to convince the clients to give us the project. The most important thing I have learnt in this project is that every client is different and each of them has a different understanding of user experience. It may sound simple, but it’s definitely not easy to understand. Thus, it’s important not to use jargon during a pitch and always make sure the clients understand what exactly are you trying to solve and why are you solving it.
Here is the link to our presentation slide:
And our final interactive prototype:
