I designed a seamless back to school experience across web and Jet native apps to help parents locate school supplies in a timely and easy manner. The experience launched from July 1st to September 12th.
After the launch, GMV on key categories was increased by ~21% and the conversion rate for Jet Grade List (a core experience widget) is ~150% higher than the average site conversion rate.
Each year from July to September, as the first day of school approaches, parents would prepare various school essentials to send their kids off to school - which brings both excitement and challenges. Jet launched a unique site experience in 2017. It included an integration with Teacher's Lists, Jet curated grade list, and curation of key categories. It was a single page experience.
To align on 2018's Back To School strategy, I worked with PM and analytics team, retail marketing team, and a principal designer to revisit the site experience and its performance last year. Based on the learnings from last year and changes in budget and merchandising this year, we were able to plan the upcoming campaign experience and strategies.
To align with Jet's persona, we chose mother Lizzy as our target customer for Back to School experience. Based on Lizzy's personal traits, we decided on some guidelines for the experience that could benefit Lizzy:
To better empathize with Lizzy and find her pain points during Back to School shopping trips, I first launched 5 interviews on usertesting.com. From the interviews, I found the pain points below:
Even though most parents start Back to School shopping with a list, it is still very hard for them to remember everything on the spot of shopping and keep track of their progress
Back to school shopping usually involves multiple categories. In a lot of times, parents have to go on multiple trips (either online or in store) to finish the shopping, which is very energy consuming.
Parents were overwhelmed with choices, they are looking for product recommendations with a point of view.
To understand how our competitors tackle those customer pain points, I conducted a competitive analysis of Back to School campaigns of other large E-commerce sites including Target, Amazon, Walmart, Staple, Toy R US. I compared special Back to School features, studied how they structured the site navigation, and analyzed common design patterns that the team later referenced in our design process. My biggest finding was that list functionality plays an important role for most of our competitors.
I incorporated ideas and priorities from different teams like retail, marketing, analytics and site management when delivering the design for CMS landing pages through several white boarding sessions.
Based on their insights about assortment, strategy and user data, I was able to decide on the page structures and hierarchy of the content later in my design process.
Since Jet has more mobile users than desktop, we took the approach of mobile-first design, So the first explorations that I drafted were specifically for mobile.
Buying school supplies is the most important as well as the most difficult part of Back to School shopping, since each grade requires different supplies and it's hard to memorize and locate them. For parents who needs recommendations, Jet grade list can help parents to find and purchase products for a specific school grade in a timely and easy manner. It is a list of curated school supplies Jet recommends to the customer based on different school year grade.
Assumptions: A universal expandable checklist would help parents to stay on top of their goals
My initial idea was to granularly break down each checklist category into product carousels with a collapsed universal checklist that was sticky at the top of the page. A customer can expand the checklist from the product listing page to the product detail page to check if they have got everything from the checklist.
Learnings: Users were not engaging with the hidden checklist at all because it was so subtle that they didn’t notice it.
Assumption: A checklist with more focused product recommendations would help parents to shop more efficiently.
In the next round, I decided to break the form of a traditional checklist and push the idea of curation. For each item of the checklist, we picked a featured product for users, if they are not interested in the one we recommended, we also had a button labeled "see more like this"to show them more products recommendations in this checklist category.
Learnings: People appreciate the simplicity and cleanness. But I learned that when they are not happy with the product we pick for them, they would just bounce without discovering the functionality of "see more like this". Besides, the list concept is so subtle in here, people even didn't realize that they are shopping a list.
Assumption: Having the checklist side by side with the product options would help parents to stay on track of what they need to buy.
In the 3rd round, I made the list more prominent and exposed at the top, and put a product listing page underneath, so that people can have a more clear idea of what they need with options beneath with product filters.
Learnings: Option 3 tested well! People understand it is a list and they are taking time to go through each item in the checklist and pick products. We decided to take the approach of a in context exposed checklist for Jet Grade List.
After deciding on I finalized the UI to make it consistent with the Jet Design System. Due to technical limitations and time constraints, this is the final grade list we launched with.
To better help engineer to understand the scrolling behavior on mobile, I made a video prototype to demonstrate the ideas.
After tackling the flow, I designed for different breakpoints and for different scrolling behavior. I used Zeplin to ship the design and wrote a document to specify the widget's behavior regarding to clickable area, pagination and other cases.
There were originally 2 approaches to deliver the back to school experience, the first one was an easy path, sprinkling down the Back to School content across the site without starting anything new. The advantage of this approach was obvious: the amount of work is relatively light, we can leverage the current site taxonomy and navigation structure to launch the experience quickly.
However, we took a step back to really think about how we can save Lizzy's trouble of going back and forth among different categories to gather Back to School essentials. We want to create a one-stop shop for Lizzy to buy everything in one place. This idea led us to the Approach 2, where we have a focused Jet back to school shop as a virtual node on the site, it has its own taxonomy and can be linked to from existing categories.
For some experiences, like fashion and grocery, instead of following the product taxonomy, we revisited the insights from user interviews about how people shop Back to School essentials and created some curated collection based on people's behavior to help them pick the right product more efficiently.
Jet Back to School Hub is the landing page of the BTS shop, it serves as a front gate of the Back to School experience. Customers can use the hub to navigate to the category they are looking for.
I also collaborated with the PM to list all the entry points of users' Back to School experience. so that we can make sure that wherever users start the shopping journey, they always have access to the upper level experience and knows how to navigate to other relevant site experience.
This is a prototype I made for back to school experience. The images and copy in this prototype is not final. This prototype mainly served as a reference for retail marketing team, creative (photo shooting team) and copywriting team throughout the entire campaign planning.
The experience launched from July 1st to September 12th, our partners in research and analytics team has set up a dashboard in adobe analytics to track its performance. Here are some of the highlights during its live period:
- The GMV(Gross Merchandising Value) on key Back to School categories increased 21% after launch, which is 35% higher compared to what we did last year.
- The conversion rate for Jet grade list is ~1.5 times higher than the general conversion rate across the site.
- The scroll depth is above average on key Back to School categories.
When designing a small feature, it's important to look at the big picture first and think how the small piece fits into the overall experience. Creating site map and experience map was a good way to help me think holistically.
Think about how the same functionalities can work across different cases. For example, when designing the Jet grade list, I was not merely thinking about how the grade list could work for back to school, I was also thinking how it could work for future experiences like recipes.
UX designer doesn't work in silo. A successful product is always a collaborative effort. It's crucial to involve our partners from research, product, creative, copy writing and engineering early in the process and always align with them.