Increasing Conversion for an E-commerce Website

It was important that we defined our tone of voice based on our audience of students and professors. A website’s tone of voice communicates how an organization feels about its message. The tone of any piece of content can be analyzed along 4 dimensions: humor, formality, respectfulness, and enthusiasm.

We want to exude fun and be enthusiastic about education, similar to the way students feel when they first start their education journey as a freshman. We're not too casual and just formal enough to be relatable, similar to the way professors maintain respect in front of the classroom.

I switched the sites design system over to an eight point grid. This helps streamline all design elements, improves communication between team members, and ensures consistency throughout the site.

I explored various type scales to see their impact on the site using our Roboto and Roboto Slab font family. I used a modified major third type scale starting at 16px as the base body font size. This became the standard type scale component we would use in Sketch.

We chose hues of magic for our brand because the color is a little warmer and more playful than the traditional corporate blue. Cheddar has a nice contrast and is chosen for our call to actions on the site. Several other neutral colors were chosen for usage as borders, shadows, text, and smaller elements.

The imagery we choose follows the tone we set. We want to show diversity and inclusivity in a safe environment where anyone is welcomed and ideas are respected. We are about being bold and embracing the student lifestyle of transience and fun. No matter where a student travels, we want to be there for them and make it easy to study in a busy lifestyle.

We had several issues with the search engine and vertical layout that increased motor and cognitive loads when searching and browsing for products. According to search data, we know that students search products based on matching name or ISBN and will verify the search results by looking at the cover, author, and edition. We need to redesign the Search Results Page to help students identify key information when making purchase decisions.

Searches yielding one result don't send the user to the PDP.

When searching for a specific ISBN and the results only yield one, we now send the user directly to the matching PDP.

The empty state for search results doesn't offer any helpful hints.

We've redesigned the empty state to now provide helpful tips and provide contextual alternate queries and products.

The vertical scrolling page with small book images make it difficult to browse.

We've changed the layout so browsing categories and large queries can be easier, with focus on larger covers and emphasis on key purchase information like book title, format, and price.

There are no labels to differentiate book formats.

We've added badges to help differentiate courseware, chapters, subscriptions, and bundles from an eTextbook format.

Students were having a difficult time identifying whether they were purchasing the correct eTextbook. VitalSource's product catalog consists of eTextbooks in eight different variants. As we looked at redesigning the Product Detail Page, we need to take into account the variations of the catalog.

1. Standalone eTextbook
2. Standalone eTextbook with license variants
3. Subscriptions
4. Bulk Purchase
5. Chapters
6. Courseware
7. Courseware Bundle
8. Sampling

The previous design for the page only contained the book metadata, a short description, and purchase options. We've collated feedback from students on Reseller Ratings and summarized top concerns regarding the PDP.

• Students wanted more information on the book's table of contents and format
• Students did not know how to access their courseware or book
• Students did not realize they were making a digital purchase

Stakeholders had key business goals that needed to be met in attempts to boost conversion rates and sharing.

• Business wants a way for teachers and students to easily share the PDP
• Business wants to highlight the e-reader features
• Business wants to highlight the accessibility features

We changed the hierarchy to help students identify the most important information regarding their purchase. In order to help identify that this purchase is digital we wrapped the book inside a tablet, added text to denote the digital asset, and displayed the book format as ePUB or reflowable. We worked with marketing to devise an introductory video that highlighted Bookshelf, our e-reader, and a How-To for students wanting to learn more about accessing content and additional features.

The current cart experience took the user to the cart page every time they added an item. This was annoying if the user wanted to remain on the page and continue shopping. We redesigned the cart to reduce this friction.

Stakeholders were concerned about the usability of the experience and wanted data to verify that this redesign would work. I created a prototype (link below) to test students with the task to add two items to the cart and remove an item. I set out to conduct usability testing of this new cart experience on a nearby college campus.

Analysis of Google Analytics showed that we can improve the cart and checkout flow to decrease abandonment and increase conversion rates on both desktop and mobile. The design research team and I reviewed our Hotjar recordings to get a better in-depth understanding of what is happening during this phase of the shopping experience.

Prior to working at VitalSource, I worked at an e-commerce agency developing shopping experiences for both desktop and mobile sites and apps. I utilized my expertise in the field to provide an audit of VitalSource's checkout experience.

1. Consumers were checking out in the wrong country
2. Consumers did not see errors
3. Input fields did not save consumer information
4. Unnecessary fields and poor form design
5. Click-out potential is high due to lack of funneled checkout
6. Account creation forms before checkout for new users increases friction
7. No guest checkout or one-click pay button options

I explored several ways we can approach reversing the flow and push account creation until the very end after a consumer has finished checking out. In the initial version, we would reduce the information collection from account creation into a post-purchase backfill. Eventually, the goal is to move the entire account creation process after the consumer has finished checkout.

We only need the users email and password to create an account; however, our legal agreement with publishers is to collect their student status. This information collection can be delayed until after the consumer has logged in the second time. This will tremendously reduce the friction in checkout.

Correct Country

With all the clutter removed from the checkout, the regional selector is more prominent in the top right. We also added some messaging and restricted the country dropdown to the current country.

Form Fields and Feedback

The new redesign reversed the checkout flow to have account creation in the end. This reduce the amount of fields the consumer needs to fill out. Errors now have a more prominent design, with the screen focusing on these errors whenever the consumer clicks on submit and an error is returned. The consumers input is now saved in these new fields if they skip around. We also added client-side validation so that some fields can be verified without the need for the user to submit the whole form.

One-Click Checkout

We've added Apple and PayPal as additional one-click buy options.

Major Increase in Conversion

The conversion rates were astounding. Along with the redesign, we changed our game plan in Google Adwords and started marketing on social media. We went from generating 100k sales to 300k sales per day (2018), 300k sales to 600k sales (2019) per day, and 600k sales to 1 million per day (2020) during our rush periods when students are returning back to school. Our trajectory remains strong with 1 million sales per day in 2020 for four consecutive days during rush.

More Data Driven Design

There were various parts of the experience that would benefit from more user testing. We can better our design process by integrating consistent user testing on medium to large features. The bigger issue here is caused by a lack of formalized A/B testing platform. We have an informal feature flag process where we can roll back changes when we see issues in Google Analytics; however, this is not comparable data and is not sustainable. In my previous work on e-commerce websites, A/B testing allowed us to reduce churn and make data-driven decisions quickly. We are currently testing out A/B platforms to integrate into our process, but the decision has been slow due to legal requirements. 

Too Fast and Too Furious

While my work on the project is ongoing, some of the sprints were very quick and business decisions were often made on the fly. This type of work often leads to holes in the use cases. Often times decisions were made based on how we can fit a square into our already existing circle architecture. Results were decided based on how much effort it takes for development to finish the feature due to rush on the timeline. While this may work in the short-term, the team should focus on long-term goals as well. This would help design make more informed decisions by basing work on data and not effort of integration.