Sharp E-Commerce Integration
The Sharp Website E-Commerce Integration project improved user experience by adding a smooth, intuitive shopping platform. Users can easily browse, select, and purchase products, boosting customer satisfaction and sales.
Design Process
Empathize
Primary Research
Secondary Research
Define
Problem Statement
User Persona
User Journey
ideate
SiteMap
Infromation Architecture
Prototype
Lo-Fi Wireframe
Study Guide
Hi-Fi Wireframe
Hi-Fi Prototype
Test
Baymard Analysis
Problem
The E-Commerce Integration project introduced a user-friendly shopping platform, making it easy to browse, select, and purchase products, thereby boosting customer satisfaction and sales.
Solution
The Sharp website lacked an intuitive online shopping platform, leading to poor user experience and low customer satisfaction.
Secondary Research
Cluttered Layout: Weak visual hierarchy made key products hard to spot, leaving the site outdated and uninspiring.
Poor Navigation: No filtering or sorting forced users to scroll endlessly, causing frustration.
No E-commerce Integration: The site was a product showcase, lacking direct purchasing options.
Lack of Engagement: No interactive features like reviews or comparisons, reducing user trust and interest.
While reviewing Sharp’s existing website and competitor platforms, I noticed several key UX issues:
Baymard Analysis
Before redesigning the website, I analyzed it using Baymard’s guidelines and found several issues affecting usability, accessibility, and conversions. These insights helped me improve navigation, user experience, and overall engagement in the redesign.
User Journey
I mapped out Emily's journey to identify key friction points and opportunities for improvement
Stages
Feeling
Doing
Findings
Next steps
Online searching
Finding and researching Sharp website
Emily starts by searching for alarm clocks on google, hoping to find one that matches her needs.
She started exploring sharp website.
Once on the Sharp website, she navigates to the "Explore alarm clocks" section.
Curious and optimistic
Relieved but
curious
Overwhelmed
She click on image and find error page. So, she goes back to the product details page.
Frustrated
Satisfied but cautious
Her search results show a variety of online stores, including Sharp's website, which catches her interest.
She decides to click on the Sharp website to
explore their offerings.
Explore Sharp's products such as alarm clocks, cloaks and piggy banks.
Decide to explore alarm clocks
She finally spots an
alarm clock that she likes and decides to click on its image to get more details.
She encounters an error page.
She viewed “Buy Now” option on product detail page
She decide to click on “Buy now” option.
Completes the purchase
successfully, feels happy and accomplished.
She's redirected to Amazon for purchase, where she reviews the product details once more.
Buy the product
She clicks on the product details and selects the
"Buy Now" option.
User Persona
To humanize our users, I created a persona that encapsulated our targeted audiance.
She finds it frustrating when alarm clocks have complicated interfaces, making it hard to set alarms quickly.
Frustration with unreliable alarm clocks that cause missed classes or late submissions.
She is dissatisfied with alarm clocks lacking customization options like adjustable volume or snooze intervals to meet her needs
Wake up on time for early morning classes to start the day productively.
Improve time management to balance studying, coding projects, and leisure.
Develop strategies to reduce stress and maintain a healthy work-life balance while achieving academic and career goals.
Emily is a student at a large university, majoring in Computer Science. She lives in a dormitory on campus and juggles a busy schedule filled with classes, studying, and extracurricular activities. Emily is passionate about coding and hopes to pursue a career in software engineering after graduation. She values efficiency and organization in her daily life to manage her workload effectively.
Emily Smithson
Age
Location
Education
Family
20
Philadelphia, USA
Undergrad Student
Father, Brother
Attributes
Tech Savvy
Organized
Goal Oriented
Socially Connected
Goals
Limitations
By designing with Emily in mind, every decision was centered around making the site more intuitive, engaging, and conversion-friendly.
Build Me Up
App which helps to gain weight
View Project
Sharp
Social Savvy Bot
Gen AI Chatbot
Research on Gen AI Chatbot in Pharmacy
View Project
E-commerce Platform
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Features
Casio
Westclox
La Crosse Technology
Philips
Product Filtering
Wishlist
Payment Gateway
Delivery Option
Discount/Offers
Shipping tracking
User Account
Competitors
To ensure Sharp’s e-commerce platform met modern expectations, I analyzed competitors like Samsung, Sony, and LG. Key insights included:
These insights directly influenced our strategy, leading to a cleaner, more interactive, and user-friendly design.
E-Commerce Integration Sitemap
To ensure a structured and user-friendly navigation flow, I designed a clear sitemap that optimized product discovery and streamlined the shopping experience.
View Sitemap
Homepage: Featured new arrivals, bestsellers, and promotional banners.
Product Categories: Organized by type, making it easy to find specific clocks.
Product Pages: Detailed descriptions, images, and purchase options.
Cart & Checkout: Simplified process with clear CTAs and secure payment options.
This structure enhanced usability, reduced friction in the buying process, and improved overall engagement.
To create a seamless user experience, I structured the website with a clear and intuitive information architecture. The navigation was streamlined to help users easily browse products, access categories, and complete purchases efficiently.
View IA
E-Commerce Integration Information Architecture
I created low-fidelity wireframes to define the website’s structure, focusing on layout, navigation, and content hierarchy. These wireframes helped streamline the user journey before moving to high-fidelity designs.
Desktop Low-Fidelity Wireframe
Color Palette
#0B0B0B
#ED4C34
#282828
#F19B38
#C2C2C2
#12AF9D
Tyopgraphy
Open Sans Semibold 40
Header 1
Open Sans Regular 40
Header 2
Open Sans Semibold 20
Header 3
Open Sans Regular 20
Header 4
Open Sans Semibold 15
Header 5
Open Sans Light 15
Header 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Buttons & Icons
Favorites Feature
Icons
Field Layout: Inactive & Active State
Cart Button
Button
abc@gmail.com
Email*
Email*
Study Guide
The style guide defined typography, color palette, and UI elements to ensure visual consistency across the website. It featured a modern sans-serif font, a balanced color scheme with bold and neutral tones, and cohesive button styles to align with Sharp’s brand identity and enhance the user experience.