RESUME            ABOUT



Account


Toysrus.com
Customer Profile Management of omnichannel eCommerce
2018

︎  Slide PDF
︎  Account

 MY ROLE

User Experience Designer
Design Research (audit, competitive analysis), ideations, UX Deliverables (IA, flowcharts, wireframes), UI Design, User Testing

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

TEAM

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

OVERVIEW

Omni-channel retail experience has changed over the past few years. Customers' needs and their behaviors on the eCommerce sites, Toysrus.com and Babiesrus.com have shifted. Also, 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. Customers have to log in for different parts of a site. For a solution, we built Single sign-on.

________________________

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





Single sign-on allows having the power of bringing all data of each user. We can have one unified profile for address, phone number, email address, billing information, credit/debit card, coupon, rewards points, local/home store, past purchases, top actitivites, wishlists & registries, annual spend, average order value, texting & email preferences, and time at current address.

Now everything is in one place. We redesigned the Account section to improve experience more delightfully, effortlessly and seamlessly. We rebuilt as Responsive Web Design including features: Order History, Wallet, Layaway, and Rewards. The design success measurements were Toysrus.com and Babiesrus.com Checkout and Payment were easier, faster and consistent to navigate with a pointlessly difficult experience through the Account page. Also, we attracted more users to sign-up and retained them to log-in by showing relevant data and making a loyalty key customer touch point. 



DESIGN RESEARCH

With a limited resource, we found users’ pain points by gathering qualitative and quantitative data. We audited the current TRY Account page with UX best practices, and tested usability using usertesting.com. We also reviewed OpinionLab customers' comments, and then, organized into categories using card sorting methodology on Trello. What we found that many users' frustrations came from orders tracking information, layaway payment process, and poor technical, behavioral user experiences.



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


We spent some time to review several direct and indirect competitors from established retail players and other industries: food, travel, finance to new-age startups. Then, We created competitor analysis. We 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



Also, we gathered users behavioral metrics from Adobe Analytics and Brooks Bell for the users’ engagements of CTRs on key sections, time on pages, number of visits to pages, and path. These metrics define the IA taxonomy.

TOP FINDINGS

We presented top findings to stakeholders and prioritized by business goals and roadmap. The top problems are:
  • 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, and Registry.
  • Layaway payment process is not satisfying.
  • Adaptive Design.

DESIGN HYPOTHESES

We came up with broader Design solutions for each pain point. Here is some hyphotheses.
  • Revise taxonomy for clear hierarchies of categorizations and labelings.
  • Build the slide panel overlay patterns for Design System.
  • Display information in a concise way by showing relevant data and remove irrelevant data.
  • Add a new section, Wallet, so that we have a place for all payment options, addresses, order history, etc. in one place.
  • Make a fully Responsive Web Design.

  

UX DELIVERABLES


First, we improve taxonomy by creating Information Architecture, which helped me to create a hierarchy of categorization for the navigation. Then, we created flowcharts and wireframes that helped to see all use cases including any edge case.

Single-sign-on flowchart


Layaway payment flowchart

Collaborating with engineers was one of my favorite parts of the design process. We showed my design early and often, so that our engineers can start planning and working on their needs in an agile environment. We make sure TRU technical capabilities and constraints such APIs, resources, or timeline issues. We also improved our products by leveraging technical strengths.

ITERATIONS

As wireframe progressing, we had a handful of internal reviews with stakeholders and technology team to make sure if our design is aligned with their goals. We often 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 the 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. we also provided UX annotations and specs in Zeplin, and used Axure or Principle to communicate animation/transition to Developers.

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



__________________

We made a huge improvement to the Account section. New experience was very satisfying to our users. The key changes we made were:



︎  View My Account
My Orders
Since more than 32% of users sign in for tracking orders, we prioritized 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 Account page. We also added 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. Now, we are able to display all payment options: credit/debit cards, gift cards, coupons, loyalty points, shipping and billing addresses in one place, Wallet. The consumers also have an option to add the payment information by scanning cards with mobile phone cameras.

Consistent slide panel overlay pattern
We didn't want our customers to be overwhelmed with too much information on one page. We added a slide-panel overlay pattern 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 two break points.

_______



Mark

︎ PDF
© 2021 Soo Koh