RESPONSIVE
E-COMMERCE DESIGN
COMPANY
.png){kind=small}
UX, UI, RESEARCH
MY ROLE
TOOLS
DURATION
2 WEEKS SPRINT
PROJECT SUMMARY
Among many other social problems, the coronavirus pandemic, has exacerbated inequities in access to food and nutrition. Residents of underserved neighborhoods lack access to healthy food. To address this, WEST PHILLY PRODUCE (WPP) serves communities located in food deserts, offering West Philadelphia and surrounding communities fresh fruits, vegetables and more. During a time when shoppers are trying to stay home and avoid unnecessary risk, West Philly Produce’s e-commerce platform offers everyone the opportunity to live a healthier life. As the sole designer of this project, my role was to create an e-commerce experience on West Philly Produce’s website.
THE
CHALLENGE
Current Website
It was imperative to me to put WPP’s target user needs at the core of the ecommerce design. So crafting a persona for that user was an important part of the process. My stakeholders provided me with an overview of WPP’s target user. Equipped with that information, I was able to start brainstorming possible solutions.
Proto Persona
In order to keep Tiffany as a customer, it is imperative that we create an easy to follow experience while making sure we are providing the best products possible and maintaining competitive prices.
How Might We
How Might We
How Might We
Help customers easily shop
online for their favorite items?
Help users have a simple shopping experience from their homes?
Incentivize our customers to
safely and easily shop online?
RESEARCH
Since West Philly Produce does not currently have an e-commerce platform on their website, I needed to first understand their customer in order to craft a shopping experience to fit their community’s needs.
C&C ANALYSIS
I performed a thorough analysis of their current website, and those of their competitors. My analysis helped me understand what users expect of a grocery delivery service. This table compares the functionality of WPP to that of other major grocery delivery services.
INFORMATION ARCHITECTURE
What would Tiffany’s ecommerce experience look like in real life?
The user flow bellow shows Tiffany’s path from first entering West Philly Produce’s website to completing her purchase. Visualizing this helped me identify where my focus should go and allowed me to plan a step-by-step roadmap for creating West Philly Produce’s online store.
User Flow
I mapped out WPP’s site in its entirety to ensure that I captured all of its offerings in the navigational system of the new website.
Navigational System
DESIGN
EXPLORING
DESIGN SOLUTIONS
Once I’d nailed down the navigational system, I was able to start sketching the responsive ecommerce store.
Hand sketching allowed me to explore multiple possible solutions in a short period of time, before bringing them to life in digital form/wireframes.
WIREFRAMES & PROTOTYPES
Global navigation if user doesn't scroll through entire page
"Shop online" call to action to incentivize user to shop through WPP online store
Featured products. These list of products change to reflect WPP inventory and seasonal produce
WPP mission statement
Additional healthy offerings
Search box
Navigation bar to browse through WPP various departments
Overview of each department with "view all" products for each
Breadcrumbs navigation to orient user
Counter so user can easily add (+) or subtract (-) products
Dialog box offering more information about each product
CLICK THROUGH CHECK-OUT FLOW
USABILITY TESTING
One round of usability testing conducted with 3 users.
Users were surprised when they weren’t prompted to “Login”. They all indicated that they really enjoyed the easy checkout process and that they would go back to the site to order groceries again.
100%
Of users were able to purchase products all the way to check completion
100%
Users found the flow INTUITIVE and EASY TO FOLLOW
Users indicated ways to improve the design as follows:
-
The ability to click on My Products
-
Users would like to be able to use the search feature
-
During the checkout process, some users were hesitant to press save and continue
BEFORE
AFTER
FINAL DESIGN
.png)
Logo
Type System
