Shop by Brand
My Telstra App
This feature offers contextual and tailored product recommendations that are specifically based on the current brand and model of the device a customer is using at the moment.
Problem statement
Not enough traffic is currently directed to the My Telstra Shop tab, resulting in limited visibility and engagement. Only about 3% of users take the time to navigate to the Shop tab while actively using the MyTelstra App. The current experience available to users often features products that are irrelevant to their needs, leading to a frustrating experience that many users find irritating and ultimately unhelpful.
My roles on this project
The process
-
The discovery phase involved user interviews, workflow observation, pain point identification, stakeholder collaboration, and operational data analysis to uncover inefficiencies and align business goals with user needs.
-
This step involved identifying key pain points, mapping workflow bottlenecks, and aligning solutions with business needs. Concept development included brainstorming, sketching, and stakeholder collaboration to refine ideas and secure buy-in before moving into detailed design.
-
The ideation phase focused on brainstorming with designers, stakeholders, sketching layouts, and prioritising solutions based on feasibility. Through collaboration and iteration, concepts were refined, setting the stage for high-fidelity development.
-
In the design phase I focused on creating high-fidelity UI designs, building interactive prototypes for user testing, and refining based on feedback. Working closely with developers, I made sure the proposed designs are feasible and did not impose any tech limitations.
-
This phase involved usability testing to observe navigation, identify pain points, and gather real user feedback. Iterative updates were made based on insights, refining layouts and interactions for better efficiency.
Discover
Discovery methods :
• Data provided by the Telstra sales analytics team
• Guerrilla user testing
• In-store user surveys
What we descovered :
• A large proportion of users find the current experience increasingly annoying and too forceful in its approach.
• The current experience fails to provide the necessary information that would encourage them to explore the available offers further.
• Only 3% of active app users have landed on the Shop tab in the last 60 days, indicating
a clear trend.
Define
After gathering our findings, to address these challenges, the team framed a clear objective: “Creating a Shop by Brand experience will contextually guide customers to devices and accessories most relevant to their current brand. This approach aims to resolve existing friction points and increase visits to the Shop tab”
Competitor and out-of-category analysis
We ran a workshop to explore how competitors and out of category brands solve similar user problems. We reviewed digital retail experiences from fashion, and electronics and other retailers focusing on navigation, personalisation, and brand filtering. The insights helped us identify patterns that resonated with users and sparked ideas we could adapt for a more relevant, streamlined shop experience in the MyTelstra app.
Ideate
I shared my concepts with the UX/UI team and developers, using the Rose, Bud, Thorn method to collect feedback. This approach helped us highlight what was working well, spot opportunities for improvement, and address any concerns. The design system at the time was quite robust, so it was more time efficient to use placeholder components instead of hand sketching the flows. This made the process more collaborative and helped us shape a clearer, stronger design focused on user needs.
The prototype
I then created a functional prototype and presented it to our stakeholders to explain the solution and gather their approval. These early designs focused on layout, structure, and core interactions, giving the team something tangible to review and build on. It was a practical and efficient way to bring the concept to life and start moving towards delivery.
The same prototype was used to run a user testing session to confirm our design approach. I asked participants to move through the user flow while thinking aloud and sharing their thoughts as they went. Everyone was able to complete the tasks smoothly and described the steps as clear and intuitive, needing little to no explanation. They progressed through the entire flow without any major issues, and the overall feedback was overwhelmingly positive, confirming that the design was heading in the right direction.
Test
To ensure an accurate implementation, I focused on providing the development team with all the necessary details. Once the visual design was finalised, I put together the developer handoff documentation, outlining the design system patterns, spacing, fonts, and accessibility considerations like screen reader behaviour and correct order for tagging component.
By carefully documenting these specifications, I helped minimise misunderstandings and made integration easier for the developers. I also kept communication open throughout the process, addressing any questions or challenges as they arose. This ensured alignment between design and development, ultimately leading to a well-executed feature that met both user needs and functionality requirements.
Developer handover
Prioritisation Challenges: One of the biggest hurdles in this project was deciding which features to develop first. Balancing user needs with business goals and technical constraints required ongoing discussions with stakeholders. Differing opinions on priorities often complicated decision-making, making it essential to advocate for a user-centred approach while aligning with broader business objectives.
Development Constraints: The absence of dedicated front-end developers posed challenges in implementing certain design elements. Some interactions and visual details had to be adjusted due to technical limitations. To mitigate this, I maintained close collaboration with the development team, ensuring that design choices were feasible while still delivering the best possible user experience.
Stakeholder Subjectivity: Some stakeholders had strong personal preferences that didn’t always align with user research findings. At times, subjective reasoning influenced discussions, requiring careful negotiation and data-backed justifications to keep the project on track. Providing clear reasoning backed by research proved especially effective in supporting proposed concepts and reinforcing user-centred decisions. Balancing stakeholder expectations with a user-focused approach was crucial to ensuring the final design met real user needs.
Adapting to Constraints: Throughout the project, I had to continuously adapt to shifting priorities, technical roadblocks, and stakeholder feedback. By staying flexible and solution-focused, I ensured the final product was both user-friendly and technically achievable, maintaining a balance between design vision and implementation realities.
Challenges
I made a conscious effort to ensure the design was usable by as wide a range of people as possible. Given Telstra’s broad user base, including older Australians and users with limited digital literacy, I incorporated several accessibility best practices into both the user interface and the interactive flows. We ensured the design met WCAG 2.1 AA standards, particularly around colour contrast and tap target sizes, as a large portion of our audience included older users.
Visual Accessibility
• Ensured all text and icon colours met WCAG 2.1 AA contrast ratios.
• Increased tap target sizes to support users with motor impairments.
• Used clear typography and consistent hierarchy to aid cognitive accessibility.
• Avoided all-caps in body text and maintained clear visual structure throughout.
Screen Reader Compatibility
• Added descriptive labels to all interactive elements for clear screen reader announcements.
• Assigned alt text to non-text content (e.g. brand logos) to provide context.
• Maintained linear, predictable navigation patterns that work well with assistive tech.
• Included proper labels and guidance for any input or form fields.
Accessibility Considerations
As a member of the MyTelstra design system guild, I contributed by designing and refining components used across different products. I focused on making sure accessibility was considered early in the process, at the component level, not added in later. I worked with developers to ensure elements like colour contrast, keyboard navigation, and screen reader support were built in from the start. This approach not only helped create more consistent and accessible experiences across the platform, but also allowed for smoother implementation during development.
Design System
Design
In the design phase, I started by creating the first round of UI using Figma. I used the existing design system to quickly build out key screens and flows, which helped keep things consistent and saved time. These early designs focused on layout, structure, and core interactions, giving the team something concrete to review and respond to. It was a fast and efficient way to bring the concept to life and start gathering feedback.