Although many sites in our study featured wishlists that allowed users to save items for later, people were reluctant to use them because they expected a high interaction cost for setting them up (for example, due to having to register). - Nielsen Norman Group
With the release of the Luma in 2015, Magento merchants using the storefront theme required guest shoppers to register for an account to save and track items in their registries and wishlists. Fast-forward to 2019, Venia 2.0, a modular storefront theme built on Progressive Web App (PWA) technology, will eliminate high-interaction costs for guest shoppers who wish to save their items.
Incorporate Luma's legacy list features into Venia while also delivering value to both the shopper and the merchant.
For the duration of my 2019 summer internship, my duties consisted of:
I worked with my UX Manager & Senior UX Designer for project roadmap and mentoring.
To build out the list feature, it was important to understand what types of lists exist in various verticals, their functionality, their visual treatments on mobile, and how they affect shopper sentiment and ultimately conversion. The research is organized into the following pieces:
I conducted heuristic and competitive analysis between three major retailers and the legacy Luma storefront: Walmart, Target, and Amazon. I focused on these major retailers because they offer a variety of products online and in-store that span multiple categories, offer powerful functionality on their mobile sites, plus they conduct regular holiday and seasonal marketing campaigns where saving items in a wishlist or registry are relevant.
Target, Walmart, and Amazon offer the following lists: registries, wishlists, and "other". Other can include lists that act as: save for later, favorites, grocery lists, etc. It's important to note that these lists cannot be created without having an account.
The general use case for merchants is that lists are used to increase engagement with different shopper bases based on relevancy and purchase habits. Engagement such as account creation and follow-up email marketing can drive traffic to a site along with users sharing their lists with friends. The key benefit is that lists can reduce cart abandonment when items are out of stock and measure the effectiveness of a company's marketing efforts by tracking which items are purchased vs. stay in a list.
Registries are lists that cater to milestones, such as weddings, births, and graduation. It's predicated on purchasing for an event thus offering a wide range of functionality--like gift tracking or item prioritization. Additionally, merchants tend to offer curated content and specific branding compared to the other types of lists.
Wishlists are geared toward occasional or seasonal purchasing cycles, like holidays, birthdays, or "back-to-school". They're more limited in functionality than registries, but similarly, they offer content and product recommendations around seasons and holidays.
Other lists function more like personal shopping assistants that center around day-to-day or more frequent purchasing cycles:
How do shoppers add items to their lists and where can they view them?
Registries and wishlists have higher degrees of functionality that even shopping carts lack, but Other Lists are very limited in their capabilities.
This last phase of Discovery came after Optimized Mobile Ecommerce Checkout 2019, in partnership with Paypal and the Magento Community, released an article stating that wishlists on mobile storefronts could hurt conversion.
After reading the article, I began to question the value of lists :
After reading the article, I searched for another study that could provide more context on how shoppers engage wishlists on e-commerce sites. Nielsen Norman Group's study, Shopping Cart Or Wishlist, observed that when shoppers don't have access to their lists; they utilize the shopping cart to save and track products.
The problem statement can be summed up by these two aspects:
Making the list feature available to non-authenticated users will deliver shopper value by providing an easy way to shortlist items of interest, and deliver business value by designing a visual layout that doesn't distract from purchasing but rather entice the shopper to engage the site further.
After we determined that guest shoppers could shortlist items without account authentication. I began ideating on the interactions and touchpoints of the feature. Here's how I organized the Ideation phase:
I worked with my mentor and supervisor, a Senior UX Designer, to create an epic in Jira to track my design work but also to create task scenarios of how the shopper would engage the feature.
The initial user path was that a guest shopper would shortlist a few items of interest and add items from their list to the cart. In the list modal, shoppers would see a sign-up/sign-in prompt to save and track items on their lists. After authentication, shoppers would be to track promotional deals and also create new lists.
It seemed fairly straightforward at first until we had to consider the following problems:
Guests would see a 0-state header when they landed on the site--refer to the first header in the sketch below.
Option 1: Once authenticated, the heart icon could convert to a user icon (second header sketch) to call out that the user is logged in but also to provide a shortcut to all account settings, which is where the lists could live.
Option 2: Instead of converting the heart icon to a user icon, the user icon could be added (third header sketch). This could provide shoppers quick access to their Favorites instead of going 2-3 levels within the main navigation to find it. Plus keeping the heart icon next to the cart could be a subtle prompt to buy from their Favorites list.
As a standard industry practice, registries and wishlists can't be created without account authentication vs. "Favorites" - where some merchants allow guest shoppers to shortlist items using their local mobile storage. On Venia, once a guest shopper creates an account; will the header heart icon only surface the "Favorites" List or all types of lists? Will including all types of lists to the Favorites Shortcut distract shoppers?
To produce a deliverable by the end of the summer, we decided to focus on designing interactions for non-authenticated shoppers who want to shortlist items of interest and add a few items to their cart in a single purchase session. The research highlighted the value of limiting high interaction costs for guest shoppers, therefore, making this design focus that much clearer.
Lastly, Magento offers storefronts and business solutions that are designed to meet the needs of B2B or B2C merchants of different company sizes, verticals, and shopper bases. These storefronts center around general e-commerce best practices, but the merchant can customize to best meet the needs of their vertical and shopper base.
Child - Teachers can see content scores for the class, student groups, and the individual student. Parents are only able to see scores for their children.
Subjects - Both parents and teachers can see scores across various subjects.
Missions - Teachers and parents can assign missions and view scores on the disruptED platform based on the subject matter.
Stars / Streaks - disruptED engages students through gamification methods, such as stars and streaks (frequency of completed missions), where students are incentivized for completion of missions or assignments. Teachers, parents, and students can view the number of stars and activity streaks of each child, and for teachers, this includes student groups and the whole class.
Metrics - At this plane, only Teachers and school admin would view scores and percentages of students, student groups, and whole class across performance indicators of mastery, satisfactory, or below satisfactory.
AR / VR / ER - School admin and teachers would be able to segregate scores across different modes: augmented reality, virtual reality, and e-reader; to see where students or classes are experiencing growth or struggling. When explaining this to disruptED stakeholders and the design team, it would be important to understand if the content area or the various modes is contributing positively or negatively to student progress.
TEKS / Common Core - Teachers and school admin view student academic progress through TEKS/Common Core, state standards for K-12 curriculum and standardized testing. The Common Core State Standards Initiative is adopted by many states in the U.S., whereas Texas Essential Knowledge and Skills or TEKS are the state standards for Texas public schools.
The Prototyping phase of this project can be split into two parts : the wide scope where we explored non-authenticated to authenticated shopper flow; and the narrow scope - where we focused solely on the guest shopper adding items to their Favorites list.
In this prototype I focused on the guest shopper completing the following tasks :
In this prototype, the guest shopper completes the same tasks in the first iteration and signs into their account. This prototype demonstrates the heart icon changing states and the new touchpoint of the Favorites List.
The artifacts below were the result of us narrowing the scope to only focus on the guest shopper path. The tasks have parity with the former iterations, and I re-designed the following:
To gain feedback for the design, I organized the testing phase into the following parts:
I presented my research and designs to the Adobe-Magento UX Team for internal review before testing with users and submitting this project to Adobe Intern Expo.
After incorporating the feedback, I designed a high-fidelity A & B prototype to determine which experience shoppers enjoyed more. I wanted user input on the following:
Should the heart icon be placed towards the top of the image near the price and title (A version) or at the bottom of the image-closer to customization fields (B version)?
Should customization hide behind an ellipses menu (A version) or be surfaced in form fields (B version)? How should the add-to-cart button be designed so that users will be encouraged to purchase without feeling that the layout is crowded?
Are users able to confirm that items have been added or removed to/from their list without toasts? If not, should there be a micro-animation to make this interaction more obvious?
Presented below is the format of the usability tests and the top findings after synthesizing user feedback.
During my internship, I attended Adobe's Intern Summit at Adobe's Headquarters in San Jose, California. I submitted my work for the Intern Project competition where all Adobe employees can vote for interesting projects. I was elated to find out that I won best project for the Digital Experience Business Unit.
This project was an amazing opportunity to hone my design skills from research to UI/visual design. I'm passionate about end-to-end design and consider myself a full-stack designer. However, one area that I could have explored more is the component library of Venia. When briefed on the project, I learned that the design elements were created in 2017 and they were heavily inspired by Google's material design. The Venia theme is designed not only mobile-first but also Android-first, since most mobile users are on Android devices. Since Venia 2.0 features the latest PWA functionality, a 'nice-to-have' in this scope would have been updating prior Venia components and testing users' responses to the UI facelift.
The next step will be thinking through what user flows look like for authenticated users who wish to create a registry or wishlist. After further testing and iterations, the Magento-Adobe PWA team will release the list feature on the Venia 2.0 storefront for Magento Enterprise customers.
As for me, my time at Magento-Adobe this summer was rewarding in solving interesting design problems and learning from an amazing team of experienced designers. Thank you.
Hit Enter to Search or X to close