RESUME            ABOUT



My Account


Toysrus.com
Customer Profile Management of omnichannel eCommerce
2018

︎  My Account

 MY ROLE

User Experience Designer
Design Research (audit, personas, competitor analysis), workshops, ideations, UX Deliverables (IA, flowcharts, wireframes), UI Design, User Testing, Design System, Visual QA

Balsamiq, Sketch, InVision, Axure, Zeplin, Usertesting.com, OpinionLab, Adobe Analytics

TEAM

Product Director, Product Manager, User Experience Director, Project Manager, UI Engineers, Back-end Engineers, QAs

OVERVIEW

Omni-channel retail experience has changed over the past few years. Our users' needs and behaviors on the eCommerce sites, Toysrus.com and Babiesrus.com also have shifted. Additionally, as Toys"R"Us has grown to serve 500MM+ annually unique visitors in support of $1B+ eCommerce business, Toysrus.com has added four more accounts which allowed to have different login credentials for each. The customer experience was painful. 

________________________

 How could we continue to improve our seamless customer shopping experience?





To continue to improve our customer shopping experience more delightfully, effortlessly and seamlessly, Toys"R"Us redesigned My Account. We rebuilt as Responsive Web Design including features: Order History, Wallet, Layaway Payment, Rewards, and single sign-on(SSO). Product success criteria were Toysrus.com and Babiesrus.com Checkout and Payment were easier, faster and consistent to navigate with a pointlessly difficult experience through My Account touch points. Also, we attracted more users to sign-up and retained them to log-in more by showing relevant data and making a loyalty key customer touch point. 



Design Thinking process


DESIGN RESEARCH

To find users’ pain points on the current TRU My Account pages, my team conducted qualitative research and gathered quantitative data. For qualitative research, I audited more than 65 pages of My Account aligning with my own perspective on UX best practices. I also tested usability using usertesting.com. Additionally, I reviewed OpinionLab customers' comments, and then, I organized into categories using card sorting methodology on Trello. What I found from qualitative research were that many users' frustrations came from orders tracking information, layaway payment process, and technical, behavioral user experiences.



OpinionLab analysis(left)  Card sorting exercise on Trello(right)


I spend some time to review several direct and indirect competitors from established retail players and other industries: food, travel, finance to new-age startups. Then, I created competitor analysis. I found that they have similar category labeling: Profile, Orders, Address, Payment Methods, Rewards, My List, and these categories displayed on the navigation menu. Another noticeable thing across all has they displayed orders status and history information on their My Account landing pages.



Competitor analysis spreadsheet



For quantitative data, my team gathered users behavioral metrics from Adobe Analytics and Brooks Bell for users engagements of CTRs on key sections, time on pages, number of visits to pages, and path. These metrics helped to improve taxonomy.

TOP FINDINGS

We presented top findings to stakeholders and prioritized by 2018 business goals.
  • My Account landing page is cluttered and overwhelming.
  • More than 32% of click metrics is Order History, but order status and tracking information are not clear.
  • Less than 0.9% of signed-in users click some links and categories.
  • Additional sign-ins are required to view other TRU accounts: Layaway, Rewards, Wishlist, Registry.
  • Layaway payment process is not satisfying.
  • Adaptive Design.

DESIGN HYPOTHESES

We came up with broader Design solutions for each pain point.
  • Revise taxonomy for clear hierarchies of categorizations and labeling.
  • Use slide panel overlay patterns in TRU UX Design System.
  • Display information in a concise way by showing relevant data and remove irrelevant data.
  • Add new features: Single sign-on and Wallet
    to allows to bring all payment options and addresses in one place.
  • Make a fully Responsive Web Design.

  

UX DELIVERABLES


To improve taxonomy, I created Information Architecture based on my design research, competitor analysis, which helped me to create a hierarchy of categorization for the navigation. Then, I created flowcharts and wireframes in Sketch that helped to understand UX flow and see where edge use cases existed.

Single-sign-on flowchart


Layaway payment flowchart

Collaborating with engineers was one of my favorite parts of the design process. I showed my design early and often to the team, therefore, our engineers can start planning and working on their needs in an agile development environment. We make sure TRU technical capabilities, constraints like our wishlist, proposal features and functionality were in scope if there are possible concerning APIs, or resources. We also improved our products by leveraging technical strengths.

ITERATION

Once low or high-fidelity comps were a good spot, we had a handful of internal reviews with stakeholders to make sure if our design is aligned with their goals. I also tested usability on Usertesting.com by creating interactive comps in Axure. User testing and A/B testing helped to make design decisions and move forward to the next stages of the process with assuredly.

UI Design Sketch boards
Our Design team established a TRU design system by initiating a style guide. All Designers and UI Developers met weekly to ensure our Design System aligned with all of TRU products and platforms. I also provided UX annotations and specs in Zeplin, and used Axure or Principle to communicate animation/transition to Developers.

I worked very closely with Developers and QAs. UI Developers and I sat together every day after standup and designed in the browser to implement fully responsive Web Design.


Zeplin board


__________________

We made a huge improvement to My Account, and this new experience is satisfying. The key changes we made are:



︎  View My Account
My Orders
More than 32% of users sign in for tracking orders. We emphasized active order information by highlighting order status, order number, order date, total price and order items in concise way on chiclets with impactful Visual Design on the My Account landing page. We also built a filtered by year functionality.

All your payment information in one place
Single sign-on allows having the power of bringing all data of each user. A new Wallet feature displays all your payment options: credit/debit cards, gift cards, coupons, loyalty points, shipping and billing addresses in one place. You install and maintain every payment options by scanning cards with mobile phone cameras. This solution is easy to accessible and editable.

Consistent slide panel overlay pattern
We didn't want our users to be overwhelmed by too much information on the pages. We established UX pattern of slide-panel overlay functionality for filtering orders, add, remove, edit form fields, cancel orders, and any additional static help information.

Responsive Web Design
We rebuilt a fully responsive web design with one break point for mobile and desktop. One desktop version, we including left navigation to easy to access other My Account sections.

_______



Mark

© 2018 Soo Koh