User Experience Designer
7-Eleven (Concept)
2 Week Sprint
Two platforms? Too confusing!
The Delivery feature delivers food and household goods to one's door in a matter of hours. Meanwhile, the the Shop Online feature exclusively sells 7-Eleven products on an Amazon storefront.
Having two separate platforms just doesn't make sense. Every user who used this site for usability testing were confused about the the dual-platforms when searching for and buying products.
A unified webpage.
The redesigned sleekness and minimalism gave users a new perception of legitimacy and authenticity. After each usability test, every user said they preferred the redesigned site and stated that they were more incentivized to purchase from the improved site layout.
Update: their new site looks just like mine!
Old Website Platform (Amazon Storefront)
My Design
Their New Site
The resemblance is uncanny, eh?
Platform differentiation
Key Takeaways:
The purpose of Shop Online is to maintain brand identity and increase brand awareness by exclusively selling 7-Select products.
The purpose of Delivery is to preserve their core values by focusing on the customer and being innovative.
Convenience is 🔑
“I go to convenience stores because they are readily available”
“I go to 7-Eleven stores because everything is organized neatly”
“I go to convenience stores only to buy snacks and toiletries”
“I avoid convenience stores because I don’t think they’re safe”
“I go to convenience stores because of short wait times”
Understanding structure
From there, I made a rough sketch of the user flow in regards to purchasing/ordering merchandise.
Digital sketches and wireframes
Sketches of Homepage
Iterations of sketches for the homepage.
Iteration 1 - The first sketch looked very much like the original 7-Eleven homepage, with the exception of the large, yellow “SHOP” button on the top right corner to indicate a redirect to an external site to purchase products.
Iteration 2 - The second sketch emphasized the integration of the commerce component right into the homepage. Navigation for products is facilitated with a dropdown menu.
Iteration 3 - The final sketch is a refinement of ‘iteration 2’ to polish visual clutter. The intent of ‘iteration 3’ is to clean the website up to maintain a simple, minimal theme to indicate easy navigation. This version was selected.
Sketches of Product Selection Function
Iterations of sketches for the product selection task.
Iteration 1 - When selecting an item from the product page, it would take you to a separate individual product site before adding to cart.
Iteration 2 - Incorporates a light box, embedded screen within the product listing page to easily retrieve information and seamlessly have access items to cart. This version was selected.
Wireframe of Product Landing Page
Wireframe of Product Selection
After sketching, mid-fidelity wireframes were produced to blueprint the structure of the platform. Many usability tests led to many iterations of the website.
Website Walkthrough
You can test out the prototype of the site right here!
The design is yet to be perfect, nor will it ever be perfect. With the constant evolution of technology, this platform will always be under rework. To better and further my design, I would:
Research consumer behavior regarding short-timed deliveries, and determine the optimal time frame for deliveries.
Improve the checkout process by integrating a more efficient and logical delivery system.
Incorporate a tracking feature to determine the status of the delivery while one is waiting for their purchase to be delivered.
