The Amazon Chime messaging application is used by Amazon employees and external customers across the globe using a variety of platforms and is used in different work conditions. Upon investigation, there was a significant amount of feedback requesting that the web application be usable on browsers on mobile devices.
NOTE: For copyright reasons, the featured UI screenshots are mockups I created to represent the actual product
The Challenge
The Chime web application is primarily used on a desktop browser or using the dedicated mobile apps on iOS and Android. The current UI is not responsive on web browsers on mobile sized viewports.
The Solution
As the frontend engineer and primary UI/UX lead, I created a design for the web application in the mobile breakpoint based on the design patterns that already existed in our mobile iOS and Android applications.
The UI needed to adapt to follow the existing design language on the iOS and Android apps. After some testing, I decided to forgo the existing web “sidebar” navigation and implement a bottom navigation system that is commonly used in mobile applications.
In order to be frugal and efficient, I made it a point NOT to compromise existing web functionality and accessibility. As such, only existing web components, elements, and styles were used in the design.
With cross-team coordination, planning, and design iterations, the work was completed within 3 months and deployed in the Beta environment. Positive anecdotal feedback increased since deployment, and plans were drafted to replace the existing mobile applications with wrappers for the web application to provide the same consistency cross-platform with less maintenance overhead.
• The Chime web application is now usable across screen device sizes on supported browsers.
• The new responsiveness created an opportunity to increase consistency across platforms by potentially replacing redundant mobile apps with web wrappers.
• Technical audits are mandatory to determine proper design that respects actual design constraints and allows for the smoothest handoff between designers and engineers.
• Consistent communication and design iterations with the team allow for a design that tackles multiple concerns from product, design, and engineering perspectives
Get in touch
Feel free to reach out!