We followed an agile design process.
Audit and heuristic evaluation of current Upgrade flow
I began the design project with an audit of current site and mapped out the areas where I think might cause the drop out rate in each stage.
I began with an audit of current flow.
Identify pain points through quantitative and qualitative research
I first went through the KPIs of current flow. This was to help me answer the following questions and to identify the key use cases & user profiles:
- How many devices does a user upgrade during a transaction?
- Are they all the same devices?
- How many upgrade orders include accessory purchase?
- What is current conversion rate?
- Where do users start to drop out?
I teamed up with a user researcher and together we did user interviews remotely.
After these evaluations, I teamed up with a user researcher and together we did user interviews remotely with 5 current MyBusiness customers who perform upgrade regularly, who were asked to perform an upgrade with current system. This was to observe how they use the current system, dig deeper into why or what causes their difficulties in finishing the order, and what is missing in terms of their needs. We also did 2 group interviews with small business customer reps and big business customer reps, because they not only help perform the order for customers quite often, but also receive a lot of phone calls from customers for help. Talking to them provided a lot of insights on customer behaviors and in the meantime, validated assumptions I made for the audit.
I organized all the materials we gathered to understand the gap between user’s needs and the flow. Most importantly, the flow needs to be able to scale for enterprise accounts with 10,000+ lines while can also accommodate the needs for small accounts with only 2 lines. And for business customers, they are
- Task-oriented, who have a clear idea of what devices they want and for whom
- Efficiency-oriented, who need to go through the portal for different orders several times a day
Hence, the flow needs to be simple, efficient, easy to locate items, able to accommodate to different needs. Based on these thoughts, I generated a user flow and sketched a first draft of wireframe.
Current user flow for Upgrade vs. a new user flow I proposed.
Some of the main changes I did are as follows.
- Removed some of the mandatory steps that users not quite often need from the main flow, but instead, made them optional with an entering point in lower funnel on user’s choice
- Segmented the experience based on account size
- Consolidated and streamlined the steps instead of finishing the flow one by one for each line selected
Prototype we used for user testing on "Happy Path".
At this point, I started to share the wireframes with functional leads (project manager) and IT partners to get internal feedback. This was the time for me to leverage the design with business requirements, system limitations and review if there’s any user scenarios I will need to take into considerations or will break the design. After several meetings of review and got everyone on board with the flow, I started to produce a prototype using InVision and work with our user researcher to recruit users for user testing.
We conducted user testings remotely through WebEx.
We did user testing with 5 users this round. This round was to focus on what we call “Happy Path”, which stands for the most simple but also the most common path for a user to upgrade devices. We invited them to finish a task of upgrading smartphones for 5 employees. During the task, we observed how did they react towards the change from current flow, if they were able to finish the task without our help, and if there’s anything or usability issues stood out during the testing. We also included sub-tasks for certain pages where we needed answers for. All of the users were able to finish the main task while there were some issues for the sub-tasks. Some of the iterations I made based on user testing findings are as follows.
1) Change the placement of filter options and resize the hero image on grid wall to make the search results and filter options stand out.
During the study, 5 out of 5 users had confusions in finding the search results below the hero image and 5 out of 5 users did not see the filter options on grid wall. The size of hero image being too big that was taking almost the whole screen blocked the visibility of search results below it and made CTA of filter to blend in with accessory cards. Thus, design change is made to lower the height of the recommendation portal and move the filter options to be side with search bar on top of the page.
2) Remove the mini shopping card pop up and place a continue button on the page.
Users were distracted by a mini shopping cart that pops out when they add something to the cart and disappears after a few seconds (this was partly because of prototype limitations, partly because of what “magic timing” should it be when it goes away, but most because it breaks their attention from the shopping page and does not serve the purpose of confirmation) and because of these, they were also not able to find a way to continue the steps.
3) Restructure and redesign the Equipment Protection page.
During the user study, users were confused how the information was displayed on this page and was not able to understand the differences of each equipment protection options. They also thought they could check to select the options.
Conduct user testing on edge cases
After design iterations based on last round of usability testing, I started to work on a new prototype and recruit users for another round of testing. This time I was curious to see if users were able to finish the tasks of edge cases and the sub-tasks that were failed last round. The task users were asked to perfom was
Upgrade 2 different devices for 2 employees, one of whom were not upgrade eligible and need to borrow the eligibility from another employee.
One of the flows that we tested for the edge cases.
We also asked them to add accessories in the order and assign specific accessory to specific employee(the assignment is for billing and shipping purposes, as the system requires each accessory purchased to be associated with a mobile telephone number.). 4 out 6 users we tested were able to finish the task while 2 of them needed some help from us to finish it. Mostly because the users were not familiar with the scenario of transferring upgrade eligibility and a learning curve for some users to get used to the interface elements according to Verizon new brand guidelines.
Deliver pixel-perfect screen design and responsive layout
Some of the screens for mobile view.
At this step, I did some final adjustments to the flow and lock the design. Then I focused on pixel-perfect screen design and responsive layout design according to Verizon Brand Guidelines. The reason why we followed desktop-first design approach instead of mobile-first in the beginning was that over 95% of our transaction happened on desktop. The usage for mobile was quite low and we have a dedicated APP for small business clients. Considering the complexity of the system, for mobile, I removed certain functionalities to ensure the “Happy Path” mentioned above is the main focus area for users. I also adjusted some interface elements according to Material Design Guidelines.
