Project in progress
E-Commerce comparison function
Challenge
Create an intuitive, flexible mobile tool for users to compare multiple products, plans, technical specifications and purchase options.
My role: Lead UX/UI Designer & Researcher
Art Direction: Max Menath, Patrick Halferty
Solution
Create several compact mobile experience options that follow best practices and give users a rich load of information, in an easy to understand format.
Client-driven content
Working with several stakeholders on the T-Mobile team, we gathered information on the different types of content our tool would present for users. This was the client-provided example of a use-case for our comparison tool:
Content first
First, the tool will need to house comparisons of: products, plans and features. Poring over these existing experiences, the comparison tool will need to accomodate the following types of content: Image(s), Name, Reviews, Cost, Call-to-action, Description, Icon, Link(s) and finally, Legal copy.
User journey & multiple points of entry
One the challenges of designing this experience is that the tool needs to showcase various types of information and live in several different environments. The comparison tool needs to live as the sole content on a dedicated page, as well as function as a module within a greater page experience.
The user journey to this experience is undefined, they may be arriving from a page with more information, or arrive 'cold' from an email link. This non-specific user journey gave us greater ambiguity and more flexibility we needed to build into the tool's basic mobile functionality.
Research
After identifying the content, the next step was identifying the hierarchy of information. To do this, I came up with some key research questions, focusing on the experience of phone purchasing, the use-case which will drive a high number of customer conversions with this tool on T-Mobile.com:
What is the most important factor for users when purchasing a phone?
How do people decide what phone to purchase?
What role does online shopping play in the phone purchase process?
Card sort
I brought in our research subjects and after interviewing them, did a manual card sort.
Research participants created an information hierarchy for me, ordering the features they look for when shopping for a phone, by importance to their decision. We also asked what they use their phone for on a daily basis, and how they felt about the amount of time they spent with their phones.
Clear patterns emerged: users either cared about price or they cared about brand. Everyone wanted a great camera, and no one thought they had a healthy relationship with their phone.
This last piece of information held some important lessons to carry forward: people are not phone shopping for pleasure, it is a chore.
User insights
Universally, users were passionate about their phones. In our modern lives, users are spending almost every waking moment with their phones in arm's reach. Examining the phone purchase journey was a helpful avenue to help understand more about what is driving users in their actions. I learned several key facts which would impact my designs:
Brand & community reviews play the strongest roles in the purchase process
Not all users are primarily interested in technical specs
Shopping for a phone occurs approximately every 2 years
Moving forward, it was clear the comparison tool needs to be compelling even to users who are not interested in rows of technical specifications, and that it needs to be completely intuitive with no new learning involved since users will use this tool infrequently.
Market strategy
As T-Mobile grows to become the largest phone carrier in the US (as of Q218) they are increasingly focusing their marketing efforts on special offers for key demographic groups that are growing within the American population. Recently, their campaigns and plan offerings have expanded and focused on increasing their customer base among Military families and aging phone users over 55.
User personas & demographics
I created three personas to capture T-Mobile's desired market growth. They represent the key demographics among current customers and areas of desired growth. Formerly, T-Mobile's brand efforts focused on young, urban populations in coastal regions. They are now expanding to provide more service across the country and looking to grow among families and older populations.
User interface design
Starting with extensive competitive analysis, we examined what worked and what didn't for other e-commerce responsive comparison tools. Sketching on a whiteboard, I rapidly iterated for quick progress.
I aimed to create an interface with:
Strong visual hierarchy
Intentional use of colour
Use of helpful iconography
Flexibility of call-to-action location
A bold look that follows T-Mobile UI standards
Sketching solutions
After reviewing key aspects and content hierarchy on the whiteboard with my art director, I moved to sketching on paper. Rapidly sketching out layouts and different types of possible user interactions with the interface, I explored different groupings of the content and gesture options.
Initial user interface explorations
Feedback & guidance
We carefully combed over the three initial options I created and I helped guide a conversation to further this project through gathering feedback and helpful criticism. First, I built another horizontal concept, for visual variety. Next, we looked at typography and the comprehension of information.
Technical specs: The client requested we build a solution that can house up to 20 rows of information. My recommendation following best practices for user experience would be to include less information and instead a function to seek this information if desired. However, we needed to execute on these instructions for an interface that can handle a heavy load of technical specs, enough to satisfy any super user.
Call-to-action: The location of the CTA is key to any conversion process, and in the cases of these interfaces, sometimes the CTA simple read 'find a store' because the manual process must be completed in person. We needed to nail down where and how the CTA would live in this experience.
Scrolling: The horizontal versions and side-by-side vertical scrolling patterns were too unfamiliar for users, scrolling was a learning experience and therefore non-intuitive. We needed to closely follow established user patterns, like swiping.
UI Option 1: iterating
The first option is driven by a card-based information delivery system. The strength of this option is the user's ability to lock a chosen product and compare other to it, side-by-side. This action is selected with a checkbox at the top of each card, which continued to evolve over the course of the product development.
I played with different ways to show sections and using background colour for emphasis and visual hierarchy.
Growth and UI development is shared here looking from left to right in the artboards below.
UI Option 2: iterating
For the second option, product solutions continued to evolve. Going from three visible columns to two, and capitalizing on a familiar side scroll user pattern. I explored variations of how to show sections and delineate category titles from product-related data. Finally, adjusting iconography to align more with common colour conventions for positive indicators, instead of the powerful T-Mobile magenta.
UI Option 1: final
This UI also features a more digestible information hierarchy where data has been separated into sections which can be skipped entirely when reading if the user is not interested in that portion.
UI Option 2: final
This option features a side-swipe scroll based on the rows remaining static and in the information moving horizontally. The data below each product moves, but the category titles and labels remain in one place.
The strengths of this option include bold labeling for clear, immediate understanding of the technical specifications outlined.
Measuring success & future goals
Since this project was completed in an agency environment, the quantified results of the improved user experience are not shared with designers on the agency-side. Without access to the larger data set, I can only validate the design decisions made here from my own ad-hoc testing. However, if it were within scope, I would love to research and dive into these data sets for improving future iterations:
Success rate (ie: purchase, call, etc)
Time on task
Task success
Errors
Satisfaction with experience
Engagement (ie: user visits/week, actions/visit)
Once mobile-first design decisions are made, the project will be expanded to display all information on desktop, as well.