Asurion Service Sites Refresh
Project Description
What were we tasked with?
Design a refreshed web experience, user experience and development platform for
SprintComplete.com (and later also
Protectioncenter.ATT.com) service sites that encourages and facilitates continued personalized engagement among our customers.
I worked on four parts of this project:
User Research
Customer Discovery Interviews
Let's talk to some people!
We conducted initial customer discovery interviews through
Usertesting.com to gain insights on what users expect to see on their mobile insurance site. We had them walk through receiving the brochure in store, navigating to the website, and then log onto the website.
From this, we collected some key findings:
- Users want to see information personalized to them
- The current site is mainly geared toward set-up and new users
- Users prefer online chat over calling to address their issues
Card Sorting
Not quite "52 Pickup"
We also recruited some coworkers to do a card sorting exercise to figure out what features we expect on a mobile insurance site. From there, we thought about which features needed to be prioritized, which ones are essential for the website experience, and what message do we want to convey to the customer when they reach the site.
Results of card sorting: 18 main features expected on a mobile insurance site
Participatory Design
Group activity!
We conducted some participatory design activities to gain an even better perspective of what users expect to see in their logged-in dashboard on their mobile insurance site. We recruited a group of participants online and gave them some exercises to draw out what they currently think is their mobile insurance site, an example of a “hub” that they commonly use, and what they want to see on their mobile insurance site.
One of main findings was that users want a very personalized hub with the ability to view plan usage and alerts, especially for their children. Many users also were not aware of all the features that came with the protection plans that they had purchased.
Participants doing an exercise where they create their own "ideal hub" while munching on snacks!
User Flow
A big web!
Based on our research, we were able to create a user flow diagram to map out the user experience going through the website. This helped us illustrate where users expect different features and better understand where to place key business features.
Large user flow diagram!
Navigation
Identifying the Problem
What's the issue here?
One of the main issues with the old service sites was that there was no central navigation system that unified all the pages in the website. The header was different on different pages and there wasn’t a way to reach the rest of the website without going back to the home page.
Different navigations on different pages on the same site :(
Initial Design Exploration
First drafts, first drafts! Hear all about it!
I explored some designs for how a more robust navigation “hub” could look like in both desktop and mobile views. This hub would need to be fairly dynamic and adaptable as features to the service are added and removed, as well as switched between different carriers.
A little messy, bear with me.
Iterating the Designs
Second drafts, second drafts!
I moved forward with two main designs to be higher fidelity: a horizontal dropdown and a vertical sidebar. According to feedback I received, we wanted to make sure that the navigation was very adaptable, so I explored different ways to do so, including removing icons/graphics and adding accordions. I also looked at how the designs would translate between desktop and mobile views.
Final Design Choices
What'd I end with?
In the end, we decided to go with a purely text navigation to optimize space, accessibility, and adaptability. All text allows for sections to easily be switched out and moved around with minimal strain. The new navigation will be accessible on every web page and includes sections that connect each part of the website.
Desktop and mobile versions of the navigation
The "Recommender"
The “recommender” is a navigational tool that we created to encourage user engagement and personalization. Like the navigation bar, it also connects different parts of the website but it is driven by the user’s needs and interests. It will recommend different experiences and content based on what pages the user has viewed.
User Flow Diagram
Can you tell it's my favorite diagram?
We started by creating a diagram to map out how the recommender could redirect the user to different experiences within the website. This will help us in thinking about how the tool will look like and how it can fit on each page to shape the user experience.
The "Recommender" user flows from different pages on the site
Initial Sketches
Square 1!
In creating the design for the recommender, we considered how the user flow would look like when using it. We looked at where it could live on the website so that it would be consistent and accessible, as well as engaging. Early on, we decided that using cards would be an easily-adaptable, yet engaging design pattern to use in the recommender.
Lots of different ways to go about this...
Adding Features
Iterating and iterating ...
I continued to explore how the cards could look and how they would be laid out within the recommender. I played with how to display the information on the card, as well as how to create an engaging call-to-action. I also looked at how to better the user experience to make it feel more personalized, such as “Save for later” and “Give me new recommendations” buttons. Each iteration considered scalability between desktop and mobile versions.
Iterating card designs for desktop and mobile versions.
An iteration that allowed for a more personalized experience in the site header/hero.
Increasing Engagement and Personalization
We can make it better
We decided to switch from icons to photos to make the cards more engaging. We also transitioned from a “Save for later” CTA to a simpler heart “favorite” feature to make better use of space. The labels above the cards would change based the card’s content and help make the recommender more personalized.
More iterations to increase user engagement
Mockup of the current iterations of the Recommender on an example page
Final Designs
What'd we finally land on?
The recommender cards then went through several iterations before being finalized. We created different cards to differentiate primary versus secondary recommendations for the user. The primary cards use a dark gradient to draw more attention, whereas the secondary cards are more minimal to fit more on a page without it being too cluttered. They are also skinned differently depending on the service provider.
Final versions of the Recommender card designs
Landing Pages
For each of the experiences on the service sites, we created a landing page that gives an overview of the experience and also directs to relevant content. The landing pages create an intermediate place for the user to land on to better understand where they’re being directed to and where to view similar, relevant information.
The Problem
What's wrong with the pages now?
The original service site CTAs directed the user automatically to different websites, so the sites lacked cohesion and created a lot of confusion for the user. There is no “hub” for all services and experiences that fall under a specific category, so the user can’t easily find relevant interests, making for a poor user experience.
First Drafts
The process begins anew ...
Originally, the user dashboard/home page acted as the landing page to reach the different experiences on the service site. Following our hypothesis, we planned to have a “preferences selection” for the users to better personalize the content that they see. We later decided to simply use cookies to pull up relevant content to streamline the user experience.
Final versions of the Recommender card designs
Our Solution
The process begins anew ...
Our landing pages would have universal headers and footers to maintain consistency throughout the site. The information on the page would be customized based on the experiences (phone optimization, photography, security, etc).
Initial site page template
Iterations
You get the gist by now
I created several designs for possible landing page layouts for both AT&T and Sprint, as well as in desktop and mobile views. We wanted to make the landing pages appear dynamic and engaging for the user to scroll through. We decided to use block-based formats because one of our main considerations was making sure that there was a seamless transition from desktop to mobile views — blocks allow for an easier yet consistent arrangement between different resolutions. (P.S. the recommender makes an appearance on the landing pages, too!)
As this was toward the end of my internship, these intermediate designs will (hopefully) be used to influence future iterations of the landing pages!
Final iterations of the site designs
Conclusion
As my first real internship doing UX Design, this was an incredibly eye-opening experience. Thank goodness I came out of it loving UX Design even more rather than the opposite. Here’s just a few of the many things I learned during my short time at Asurion:
- Collaborate and listen — Not just the lyrics to Vanilla Ice’s “Ice Ice Baby”. I’ve never been in a more collaborative environment than my time with the design team at Asurion. We would frequently have meetings and crits with other designers throughout the week to really sharpen our designs. We would also meet with tons of stakeholders (from both Sprint and AT&T), which helped me understand just how much input a design must go through from all fronts before it’s pushed out for the public. It’s quite the marathon.
- Do it for the users — The golden rule in user experience and for good reason. Throughout the design process, we were constantly thinking about making the experience better for the users, what the users would think, how they would interact with the system, and then ultimately test it with the users themselves (don’t just make assumptions!). It’s super interesting seeing how the users think differently from us as designers.
- ITERATE — I keep referring back to this but I keep seeing it in every project that I do. Especially in such a fast-paced environment like Asurion, we were iterating like crazy. We met with stakeholders and executives that all had their own input (sometimes contradictory, too 😠) and it was our job to be able to sift through the critiques and balance out what was necessary to implement and what wasn’t. This made the entire project shift directions several times in just my short time there, which sometimes led to scrapping a lot of work. Let me tell you, our Figma file was FULL.
- Think of the entire system — This one’s a new one for me. I never thought about designing for websites as extensive as an entire mobile insurance site. Before we even got to designing we spent days working on site architecture and diagramming user flows through the site. Even within the context of the recommender, which was just a small feature at the bottom of each page, there was so much thought put in to how the user would get to it, where they would go, and how all of those experiences tied together. We drew on every white board in the office for this one.
Morgan (my manager) and me 🥰
I absolutely loved my 10-week stay at Asurion. It taught me so much about the field of UX Design in industry and gave me a newfound appreciation for all the work they put into developing new products. It was also because of my amazing supervisor
Morgan that I got to work on such a dynamic and fun project!
***This is my work as of the end of my internship at the end of July 2019. Many of these designs are works-in-progress as the final sites will not be launched until Fall 2019. The final product may vary!
