Customer Experience Consultant
Optus-hero-1.png

Optus catalogue browsing

Key elements of role

 

Research | stakeholder workshops | Stakeholder management | Competitor analysis | Wireframe | Interactive prototype | User journeys | Usability testing facilitation | Customer interviews | Guerrilla testing | Design | Collaborating with the business as usual visual design and technologist teams  | Creative direction | Competitor analysis

 
 

The problem

The problem to solve for catalogue browsing required a comprehensive investigation and identifying how customers search & choose their products. In particular for a mobile handset. The search criteria included make, model, colour, pricing points, phone plans (pre-paid & post-paid), and availability.

Other challenges

One of the challenges for catalogue browsing was that it was not solely for a mobile phone, but all of Optus' offerings. The offerings include accessories, broadband, on-demand services and bundles. A further challenge was to present the results of this decision making process as relevant and efficient as possible. The strategy and concepts for mobile handset browsing would need to be addressed for the other catalogue browsing products as aforementioned.

The approach

As part of Frog Design, working in three-week sprints within an agile environment, the first week was dedicated to understanding the problem. This included working collaboratively with stakeholders and working to solve the problem in a very lean manner via sketches and review sessions. The second week was dedicated to moving from sketches to wireframes/prototypes and testing with customers. The final week dedicated to UX and visual design tweaks, documentation and the engineers finalising and updating code.

At the heart of this approach, communication and collaboration were vital. The proposal was to be as collaborative and inclusive as possible and for the team to be transparent as we wanted to include the Optus UX and UI 'business as usual' teams on critical decisions and reviews. Due to the fast-paced nature of the work, we had to ensure current business goals or strategies were taken into consideration. The approach would consist of daily team stand-ups & reviews of UX research, outputs and UI design, ensuring consistency.

'Walk-through' sessions (informal reviews) with business stakeholders would be conducted in a space with large print outs of wireframes, designs, outputs and sketches dedicated to the catalogue browsing experience. Stakeholders would give feedback in these sessions, and due to the fidelity of the work in the early stages, stakeholders felt at ease giving feedback, and it further ensured they were part of the journey and conversation. Further into the sprint, these 'walk-through' would include interactive prototypes of the catalogue browsing experience giving stakeholders a feel of how the product would act and feel.

A showcase would be organised for the end of the sprint with the senior leadership team to report on customer research findings and show off designs. I would speak to the UX research that informed decisions in these presentations and conduct a Q&A at the end of the session.

 
 

Discovery

Part of the research carried out consisted of senior stakeholders and sponsors interviews to identify any previous study, insights and goals that the business may have. Data analysis using Adobe Analytics, a landscape review, conducting online surveys on Optus' existing customer base and talking to staff at the flagship store at the Optus campus were some other research activities carried out.

We needed to understand our customers, their pain points and their goals. We also needed to understand the competition, what worked, what didn't. Our competitors' landscape review included telecommunication sites, other industries, while also trying to identify best in class brands.

 
 
 

Define

An important call out was that a personalisation strategy formed a significant part of the Optus digital transformation. With this in mind, catalogue browsing was seen as an essential and pivotal area to give customers, either logged in or returning visitors an enhanced user experience.

A kick-off session was held with senior stakeholders and sponsors to identify 'What does success look like' and 'what are the barriers to success'. The stakeholders would write their comments on a Post-It and these would be arranged to display patterns and trends. They would then be further discussed and placed into a priority matrix, and voting would then commence, with stakeholders having three votes and putting their votes on what they believe is the key priority.

The output of this workshop was moving to create a 'How might we' statement. Post this session comments were digitised and synthesised and presented back to the group. The 'How might we' statement forward was:

 
 
Focus visitors’ attention on one necessary decision at a time
— How might we
 
 

Ideation

From the data gathered customers would typically start browsing for a mobile handset on desktop, as the larger screen experience allows for more details, so it was on desktop we starting off sketching initial ideas. I facilitated a co-design session that included stakeholders and collaborators. The initial concepts were then worked up as low fidelity paper wireframes. These wireframes, were 'guerrilla tested' with customers, as paper-based designs. After one round of feedback, the concepts were then explored further and iterated. The next round of ideas was then taken into Sketch, however still keeping with a low fidelity approach, as the team was still investigating the design protocol of showing devices.

A key learning from this latter exercise was that when displaying Apple products on a catalogue product page (the iPhone in this instance), devices have to be shown 'straight on' and not on an angle. This was a great learning exercise and ensured the team consulted all brand guidelines. This new found information excluded one of the first designs that were going to be put forward for testing. That concept may have passed our design reviews. However, the concept would have failed sign-off by the Apple brand guardian.

Future-proofing and re-imaging the catalogue browsing experience included personalisation, and concepts were worked on in the ideation sessions. For instance, messages would differ on the catalogue browsing home screen where the business knew who you were, e.g. a customer who was logged-in would see a 'Welcome back (your name)....' message.

The customer experience of catalogue browsing could be further enhanced with personalisation as analytics would be provided to detect previous visits or decisions made on the Optus site or in-store with a sales assistant, e.g. looking at a phone model or looking at accessories, these would be organised in order of frequency, importance and relevancy.

 
Desktop example

Desktop example

catalogue browsing - mobile.jpg
Optus-walkthrough.jpg
 

prototypes

After moving into low fidelity wireframes using Sketch, interactive prototypes were created using Invision for both mobile and desktop. Different scenarios and flows were built out in the interactive prototypes, based on customer feedback. One key area to capture when moving into 'Test & Learn' is the differences in behaviour when customers are on a desktop versus a mobile device.

 
Wireframe screen that formed part of the prototyping for catalogue browsing

Wireframe screen that formed part of the prototyping for catalogue browsing

 

Test and learn


The face-to-face interviews that were held in the second week of this three-week sprint included open-ended questions and task-based scenarios. These face-to-face sessions would aid the team to develop a deeper understanding of consumer thought processes regarding catalogue browsing and a layer of qualitative data to support design decisions on top of the quantitative data that was previously collected. Business stakeholders were encouraged to attend these sessions to observe first hand how their customers were interacting and reacting with the new look catalogue browsing experience.

When conducting the usability face-to-face interviews, rather than have a traditional facilitator and a scribe, the strategy was to make this process a collaborative and inclusive one that brings the whole team, including stakeholders together in one space to discover the customers' pain points. I facilitated the interviews; however, rather than one single scribe in the observation room, the team would make notes and pin them to the print outs of the screens from the prototypes to be tested.

The team would choose colour coded Post-It notes and write down their observations, quotes or actions by a participant in a concise manner. This 'swarming' activity was advantageous, especially when I was synthesising the findings, as it saved on time. From these informed decisions, I was best placed to make customer-centric evidenced-based UX design decisions. The feedback from these customer interviews was then used to update the mobile and desktop designs and flows. The new designs and digital experience resonated with users, who are very eager for this new experience to be launched.

Next steps

All files, including visual design, user interactions, component references and customer flows once signed off would then be placed in 'a drop' for the offshore development team. As we were working in an agile environment, the co-located development team of tech leads, front-end and back-end developers were part of this collaborative approach. This ensured there wasn't any confusion on what was expected to be delivered.

Summary

Due to Optus undergoing a design rebrand and digital transformation, the complete and updated catalogue browser experience as yet has not been launched. The rework undertaken affected the user experience, user flow, design, code and now the updated Design Language System.

The updated branding has a modern, bolder and slicker feel about it, although still not released in all its entirety. The current live version does contain user experience insights that were identified in this project; however, again using the current (older) design system.

 
From wireframe to visual design

From wireframe to visual design

Use of personalisation

Use of personalisation

Desktop versus mobile version

Desktop versus mobile version

 

Outcomes

Catalogue browsing experience being applied to all of Optus’ catalogue experiences

Injected a human-centred design approach to Optus teams

Introduction of the Optus Design Language System

Uplifting skills of Optus teams in agile methodology

 
 
 
 

Major achievements:

• End-to-end customer journey strategy

• Introduction of the Optus Design Language System

• Advocating a human-centred design approach that enthused the Optus teams

• Uplifting skills of Optus teams in agile methodology

Tools & tech stack

  • Adobe Analytics

  • surveymonkey.com

  • Google Docs

  • Keynote

  • Dropbox

  • Pencil & paper

  • Guerrilla testing

  • Sketch

  • Invision

Client

Optus Singtel