AT&T store
CMS CRM updates
Company
AT&T
Product
E-commerce
Approach
Mobile / Web
Framework
React/Js
Platform
iOS/Android /web
Design comps in collaboration with the Business and Consumer marketing teams to create innovative and compelling stories in line with each season’s campaign adhering to brand’s guidelines.
Ideal AT&T Users:
- 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
- Device and gadget buyers with connection and easy installments.
- Update CMS design based on campaigns and product markeitng.
- 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.
- Update essential information on home screen and new offers on timely basis for relevant campaigns.
- 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.
- Back button pitfalls.
- One page checkout.
- 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.
- Add relevant information and personalized user experiences.
- Ensure a seamless experience for both iOS and Android users.
- Design a visually appealing UI that is engaging without causing cognitive overload.
- Implement a user-centered approach with a focus on mobile-first design principles.
3 months
- WIP
- Review
- Development
- Shipped ✅
- Archive
Store sections and components
Global header
A standardized header for use when building applications and services that live in the AT&T ecosystem.
Icons
I worked closely with the amazing team at AT&T to develop the strategy and redesign of entire functional icon, app icon, and pictogram suites. It was a long and rewarding process with hundreds of icons that are in use today.
Mini banner alert / Blue streak
I worked closely with the amazing team at AT&T to develop the strategy and redesign of entire functional icon, app icon, and pictogram suites. It was a long and rewarding process with hundreds of icons that are in use today.
Sign up
Navigational card
Navigational cards enable the user to identify, compare, and choose their desired next step.
Sections
Container-driven layouts define regions in which the content will live, whether those regions are fixed, flexible, or fluid, and how those regions are prioritized at each responsive breakpoint.
RTBs
Product page
Website features
Global header
User profile (Product Registration)
Search
Chatbot
Online payment
Set autopay
Product page
Sections
Cards
RTBs
Sign up
Notificaitons
AT&T 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.
Grid System
Naming convention / tokens
“Names” that specify the function of UI elements are crucially important to users relying on assistive technology such as screen readers.
When implemented natively using HTML, each of the various page elements will usually have specialized markup, which assistive technologies are designed to work with.
