E-Comm Redesign Case Study

 

UX&UI Redesign

E-Commerce UX & UI Redesign

 

In summary

In 2017, I joined a new team and was immediately asked to help lead a complete design overhaul of Wordsearchbible.com. The primary goal for the redesign was to make products more discoverable, increase sales, and clean up the extremely dated and unorganized UI. The successful redesign led to a 100% increase in sales (~$3million increase) beginning in Q4 2017 and lasting through 2018.

 
 
 

My Role

UX & UI, Research

Tools used

Sketch, Invision, Card Sorting, User Surveys

 
 
 
screens.jpg
 
 
 

Hitting the ground running

Let’s start with a site map.

Joining the team mid-project was difficult. Ideally, I would take time to do thorough user research, test multiple prototypes, and iterate. But from the moment I joined the project, we were facing quick deadlines and pressure from stakeholders. We need to begin design work immediately in order to give the dev team time to implement the designs and meet our deadlines.

So I started with dissecting the site, reorganizing info, and creating an organized and detailed sitemap to give us a better architecture to work with and design around.

 
 
 
WSB Site Map2-min.jpg
 

 
 

Quick research

What do the best players do?

With limited time and upcoming deadlines, there was not much time for research. However, there was enough time to look at not only direct industry competitors, but e-commerce leaders like Amazon and take note of what they were doing well. One example of an inspiration I took from this process was how Amazon displayed products and menus when hovering over nav items.

 
 
amazon.jpg
 
 

 
 

Sketching

Building UX Strategy

Using Invision Freehand, I began sketching ideas to determine layout and UX of the site. I heavily involved the stakeholders in this stage of the design process, and iterated on their feedback to lay the blueprints for the two most important pages of the site, the homepage and the primary store page. After nailing down some solid wireframes, I was able to begin exploring the UI in earnest.

 
 
 
freehand.png
 
 

 
 

Defining a style

Modern, but not “too modern.”

Creating a visual style for the platform was a unique challenge due to the older, more conservative demographic of the product customer (pastors, southern baptist seminary students, church leaders). Stakeholder research revealed that their customers did not want the newest, most modern minimalistic design, but something that was still clean, contemporary, and professional.

 
 
 

Typography

Open sans was chosen as a typeface due to its contemporary look, readability and legibility on all platforms, and its neutral and friendly appearance.

typography.jpg
 
 
 

defining ui

Homepage Design

To establish some UI patterns and a visual style guide, I designed the homepage and presented it to the rest of the design team and stakeholders. After a few iterations, we settled on one we liked, and were able to get a tangible example of the look and feel we wanted to establish throughout the site.

 
 
homepage show.jpg
 

 
 

product navigation

Making products easy to find.

A huge priority with the redesign was to create a new way of navigation that would allow users to easily find products and browse around within the site. The solution, inspired by Amazon and other e-comm leaders, was to implement a mega-menu when hovering on the Store page that listed all product categories and sub-headings. This required sorting through the products with stakeholders and customers, grouping them, and creating a design that was accessible from any page in the site.

 
 
menu show.jpg
 

 
 

product display

Easily add to cart.

To make the transaction process as performant as possible, we needed to give the user an easy and intuitive way to add the product to cart for purchase. A clean grid was designed for each product page, equipped with a left-hand nav for each sub-category under product type. The product grid also clearly communicated with products were already owned by the user, which was a big win for our customer base, who typically have very large libraries.

 
 
 

 
 

Fully responsive

Make it mobile-friendly.

The site was completely broken on mobile, so making all designs fully responsive was a huge priority. All mobile designs were created in tandem with their desktop counterparts, and designed with the smallest screen size (iphone 5s) in mind. The result was an experience that was uniform and user-friendly across all web and mobile platforms.

 
 
mobile show.jpg
 
 

 
 

Conclusion

The MVP launch of the site went live of November of 2017. Immediately sales and activity saw an increase. By the summer of 2018, revenue was up by 100% - a multi-million dollar increase in sales. Issues still remained to be cleaned up in coming iterations, such as checkout flow, but overall the site was more usable, more elegant, and higher converting. 

The design and improved UX also eliminated almost all daily customer service calls, eliminating the need for a large number CSR representatives, which also saved the company thousands of dollars.