2022
None
UX, UI, Product Design
UX/UI Designer, UX Resarcher
.jpg)
During the 90s in NYC, the East Village was home to a rapidly growing Japanese community. Many longed for a taste of home. In 1995, Sunrise Mart opened their doors. Providing the long awaited taste of home too many Japanese New Yorkers and food lovers alike.
Users need a better way to browse and navigate products while on the site, because when browsing the site there is no current capability to browse all products on one page. In order to browse products users would need to choose a category of products they would like to browse from, then choose the subcategory of the parent category in order to view products. This current system limits the shopping and browsing experience of users and causes more difficulty when navigating the product pages.
In order to improve the browsing and navigational flow for users on the site, I will incorporate side bar menus in addition to the existing top navigation menu to choose categories, filters, and sort options to allow users to choose what products to view. I will also include breadcrumbs so users will know what previous pages brought them to the current page they’re viewing with easy access to whatever page they where previously on.
UX research, UI design
Before jumping straight into Figma and going hog wild. I initiated my research by emerging myself into the ethos that is Sunrise Mart. Once I understood their story, values and mission I was ready to pivot my energy towards their users. My user research goals were to unearth the needs of users shopping both in store and online.
What are the core tenants of the company?
How do users interact with existing site?
What are users current pain points with existing site?
Which features are essential to users?
A survey was conducted on 27 participants to identify brand awareness, shopping habits and features that they found essential when visiting the Sunrise Mart site.
Post synthesizing survey responses I conducted in depth interviews with participants that would be considered the core Sunrise Mart cliental, participants that shopped regularly for speciality Japanese groceries. Research goals were to further identify pain points, frustrations, needs, and desires when visiting the Sunrise Mart site and sites offering similar products.
.jpg)
.jpg)
All participants have had great experiences shopping in store but that experience didn't quite translate onto their site.
Users value navigational features like breadcrumbs, search bar, and bookmarks.
Images of products were vital in aiding participants to make purchases.
Delivery and pickup options are must for all users.
Use of negative space is key to reduce stress when navigating through product listing page
Competitive analysis was conducted to identify competitor's strengths and weaknesses to inform Sunrise Mart's features and information structure.
After conducting user interviews, all the participants responses were synthesized to identity themes, opportunities, and features that I could focus on to further improve the user experience of their site.
A persona was built based on the data collected to help drive decision making and keep the product focused on solving users pain points, frustrations, and goals.
.jpg)
Anice's user flow is the process of browsing products, inspecting product description, purchasing a product.
.jpg)
A persona was built based on the data collected to help drive decision making and keep the product focused on solving users pain points, frustrations, and goals.
.jpg)
James's user flow is the process of browsing products, adding to a wishlist so he can improve his in-store shopping experience.
.jpg)
.jpg)
To kick-off the design process, quick sketches helped me get ideas on paper to establish which elements were necessary for each screen. A low fidelity prototype was then created for initial user testing.
Rough sketches were done to get my initial thoughts on paper and brainstorm new ideas for specific UI elements.
.jpg)
Using the feedback and insights gained from research, analysis and sketching, a how-fidelity prototype was created to begin user testing.
A usability study was conducted to determine where improvements could be made and identify new ideas to satisfy user expectations, needs, and desires.
Hamburger menu and top navigation bar confuse users in which one to utilize.
Users wanted more options to view different product categories
The site feels crowded and dense.
Remove hamburger menu because its redundant and distracts users from the primary top level navigation.
Drop down menus for different product categories so users can better navigate products.
Further utilize breakpoints, and wider gutters to have sleeker UI.
.jpg)
Inspiration was drawn from fine dining restaurants with a focus on minimal yet functional simplicity. The UI design reflects the user's desire to have a clutter free, curated look and feel.
.jpg)
.jpg)
.jpg)
Sunrise Mart is a staple in speciality Japanese groceries and a staple in NYC. I took that sentiment to heart and redesigned their website to have a sleek and modern UI, an easy approachable navigation and to highlight their incredible story and products.
Users land on the homepage and are welcomed with a quick overview of how the online shopping experience works, reviews and images of Sunrise Mart.
After browsing the homepage users can navigate to the Product Listing Page where they can browse products by. category or filter products to their choosing.
Once a user selects a product from the PLP they can see their product of their choosing and all relevant info they would need.
Users can follow friends and read their reviews or write a review and share pictures of their own dining experiences
.jpg)
Integrates all needs into one streamlined experience.
Clean UI with sensible breakpoints and negative space.
Straight forward and accessible navigation.
Saves favorites for quick reference later.
Detailed Product Description Pages with allergen, nutritional facts, and item location.
Quick and easy checkout process with delivery and pick up options.
.jpg)
