Lakeshore has been developing innovative products since 1988. Their developers take Lakeshore products from ideas to realities—from first sketches and 3-D simulations to rigorous testing and classroom use. To ensure quality and safety, every product they carry undergoes an average of more than one hundred hours of development and testing before it reaches the customer.
Their e-commerce website had been an afterthought and not responsive to include today’s users, on mobile and tablet. The checkout experience was difficult and tedious, now it’s world class and is accessible from any device!
Step 1
Identify the Problem
The users on site had trouble navigating to deeper sections on the site and the search functionality was limited. This lead to increased user frustration when shopping for items buried in the product listing page. The PDP was unfocused and didn't give the user the info they needed to make an informed purchase and foster a sense of security in the transaction.
Step 2
User First Approach
Through a systematic approach of user survey's and feedback we were able to provide insights into the redesign process, putting the concerns of the user in line with the needs of the business. Throughout this process UX was looping in Marketing, Engineering, and Product Leadership to allow for full transparency into the design decisions being made.
Step 3
Design Solutions
As the project was fully realized, approved by leadership, and handed off to developers, UX was right along side the engineering process. Upon launch we recorded thousands of high NPS scores and began a new cycle of iteration based upon feedback from the users.
Search did not have an “autofill” feature where the engine could guess at products based upon user input.
Difficult navigation with no drop downs to expose deeper categories as well as redundancy on page – having 2 cart areas right next to each other.
Main content area was the only image assets on page that allowed a user to find new products, this simply pushed them into sale categories that were limited in terms of products.
Carousel was limited in terms of functionality, could not reflect users recently viewed items, nor could it boost popular items (trending) when a sale was occuring.
From the feedback gathered the UX team approached the redesign via competitive analysis, iterative testing, and a/b testing to determine the best possible experience for our users, both returning and new.
Persona Driven Design
The research that goes into forming personas usually happens early in the design process. In the Design Thinking process, designers often start creating personas during the second phase, the Define phase. Like most design elements, personas can be developed iteratively. Personas will be used during all later phases of a design process to informing design decisions made by the team.
Medium Fidelity Wireframes
Due to time constraints proposed by leadership we started with mid-fidelity wireframe approach. By varying text weights might also be used to separate headings and body content we were able to communicate our approach with precision. Though still black and white, the team used different shades of grey to communicate the visual prominence of individual elements to leadership to grasp concept blocks.
The Finished Product
Through rounds of testing, revisions, and content/image selection we arrived.
Enterprise Level Seach
With a new search rendering engine, we were able to process search results to the user within the first 3 characters – eliminating the frustration and confusion of the most used feature on the site.
Cart & More
The Cart was updated to not only show the current contents of the users shopping, but also show our new rewards program that allowed users to get perks, free shipping, and more!
Hero Section
This lead to an increase in user engagement within categories most used. A singular CTA facilitated ease of use, and the user would always find these exact product matched within the next product listing page.