myAT&T℠
Redesign
Company
AT&T
Product
Subscription
Approach
Mobile
Framework
React/Js
Platform
iOS/Android
myAT&T: Manage Your AT&T Account with Ease
- Check your data usage
- Pay your bill and set up AutoPay
- Upgrade your phone or plan for in-store pickup or delivery
- Get support via live chat with an agent or find quick solutions with helpful articles
Ideal Users for myAT&T:
- Potential customers considering switching to AT&T
- Existing AT&T customers
- Tech-savvy individuals who prefer managing their accounts digitally
- Users who want to avoid customer service calls or visiting physical stores
- Explore the look and feel within brand guidelines and the new design system.
- Utilize UXR insights from previous testing.
- Ensure compliance with WCAG 2.2 AA standards.
- Regularly collaborate with the accessibility (a11y) team.
- Work closely with developers to break down the process and gather feedback.
- Finalize flows for each use case.
- Integrate motion design into the interface.
- Home screen lacks essential information such as data usage, bill payment options, and new offers.
- Design system needs updating to align with the new AT&T guidelines.
- Non-compliance with WCAG 2.2 AA standards, including color contrast, keyboard navigation, screen reader support, human-computer interaction (HCI), closed captions, audio descriptors, reflow, and motion design.
- Content and CTA prioritization are disorganized in the information architecture.
- Inconsistent brand colors, layouts, and visuals.
- Missing chatbot functionality and handling of edge cases.
- Update comps with the newly designed AT&T enterprise design system.
- Adopt AT&T design guidelines for a visually coherent interface.
- Optimize menus, navigation, feature discoverability, and clear call-to-actions.
- Integrate the new chatbot, Alice.
- Add relevant information and personalized user experiences.
- Incorporate Geofence (ADTM feature) to inform users of available hotspots.
- Ensure a seamless experience for both iOS and Android users.
- Create intuitive user flows to improve task completion times.
- Design a visually appealing interface that is engaging without causing cognitive overload.
- Implement a user-centered approach with a focus on mobile-first design principles.
- Ensure the overall feel encourages regular check-ins and profile completion.
3 months
- WIP
- Review
- Development
- Shipped ✅
- Archive
Final product shots
Product features
Sign in / Sign out / Create account
User profile (Product Registration)
Search
Chatbot
Pay bill
Set autopay
Geofencing
Manage payment
Payment history
Link to online store
Active armor
Notificaitons
Case Study
I start by conducting competitive research and gathering inspiring references in Figma. Next, I map out flows from UX wireframes and identify patterns, primitives, and components for construction. As a UCD certified designer, I prioritize user-centered design principles and take a minimalist approach to ensure a clean interface and optimal user experience. Later, I integrate motion design for enhanced visual feedback. I collaborate with the design team for evaluation before proceeding to UXR testing. Throughout the sprint, designs are iteratively presented to stakeholders for feedback and refinement.
Setting mood board
Ideal Users for myAT&T:
- Potential customers considering switching to AT&T
- Existing AT&T customers
- Tech-savvy individuals who prefer managing their accounts digitally
- Users who want to avoid customer service calls or visiting physical stores
Grid / Hotspot / Criterion
Lesson flow
Utilizing enterprise level design system
I applied AT&T brand guidelines and enterprise level design system to create an inviting and user-friendly interface, ensuring compliance with AA and AAA accessibility standards for maximum inclusivity and readability.
Previous design
Release notes Aug 2022
- Block spam and fraud calls.
- Manage Mobile Security features from AT&T ActiveArmor℠ security dashboard.
- Test internet speed, check router speed gateway and troubleshoot all from within the app.
- Performance improvements and bug fixes
- Improved wireless upgrade experience
User testing
For usability testing I made a clickable prototype. This allowed users to navigate through tasks such as signing on with an OTC, completing their profile, adding devices, paying bills etc
Optimized Oct 2022
• Check data usage from home screen.
• One touch View/pay bill
• Upgrade your phone or plan and make changes from home screen.
Optimized Nov 2022
A simplified shop experience
The shop experience in the myAT&T app had not been updated for years and aside from starting to look outdated, was somewhat challenging for users to navigate. Working with UX designer, we created a simpler and easier-to-navigate experience that more closely aligned to business strategies.
Optimized Dec 2022
Optimized Feb 2023
New order cards that deliver
The myAT&T app’s post-order experience was a pain point for both customers and the business, causing millions of calls to customer care. The updated simple and straightforward experience got three times the engagement from customers and cut calls in half.
Problem
The existing order card was hard to find, as it was far down the cluttered homepage.
The existing card also didn’t give customers information about the order status, forcing them to click through to a web page to get any information.
Release Notes
Now, staying on top of your AT&T accounts is much easier with the myAT&T app.
• Check data usage: Want to keep tabs on your wireless or Internet data usage? Open the app to check usage on the overview screen.
• Pay your bill: Never miss another payment. View/pay your bill in the app. Tell us how and when, and we’ll let you know when your bill is ready.
• Upgrade your phone or plan: Pick it up in the store, or have it delivered to you. You can also make changes to your plan right from the app.
Before