Project
Improving price browsing, visual design, and info architecture for International Roaming Plan page on uscellular.com.
Improving price browsing, visual design, and info architecture for International Roaming Plan page on uscellular.com.
Challenge
The landing page detailing plan options for customers traveling internationally previously required customers to download a lengthy PDF list of countries to view pricing for different plans and regions. This was not an ideal experience, as it presented an excess of information and terms that may be confusing to customers, rather than allowing them to search for the specific countries where they would be traveling.
It was also not ideal for mobile users who would need to download a PDF document that was not optimized for mobile viewing.
It was also not ideal for mobile users who would need to download a PDF document that was not optimized for mobile viewing.
Several visual and content updates were also needed to refresh the look of the page, align with new branding and ADA guidelines, and present the information in a way that was simpler to understand and navigate.
Role
I collaborated with the UX architect to help define the preferred user flow, and to understand and refine the necessary content updates. Additionally, I executed the UI design implementation with interactive prototypes across multiple screen sizes, updated the look and feel to fit our ongoing rebranding and ADA compliance needs, and helped to organize information in a way that was more intuitive, all while working within the limitations of the available data.
Process
Between UX/UI and development, we determined the ideal experience for users and the technical feasibility of execution based on the timing and available tools. We presented two different options to the business owners and determined the best option for a quicker launch and potential scalability.
In addition to the UI for this improved functionality, I worked with the business team to refine the content on the page and organize it in a more intuitive way - presenting simple how-to instructions from the beginning, and more clearly distinguishing different plan options and pricing using typography and styling techniques.
Sample search UI, showing modal window, autocomplete function once 2+ characters are entered, and search results.
Refreshed landing page with updated branding, ADA-compliant styling, and reorganized information.
Previous landing page before updates.
Keywords: UX, UI, user experience, user interface, responsive design, branding, ADA, WCAG, accessibility