CAROSS
E-Commerce To C Desktop & Mobile Website to increase brand identity and user engagement rate.
Team Member
1 UX Designer
1 Marketing Manager
1 Marketing Sales
Time Periods
05.2024 - Present
Job Type
E-Commerce Website
My Role
Desktop&Mobile Mockup UI, Web Development, Visual Identity Design
Design Tools
Figma, Adobe Photoshop, Illustrator, CSS, HTML, Javascript
Project Objective
Caross Tech is an Automotive company that specializes in designing an E-Commerce website to increasing sales for services businesses by increasing user engagement rates and conversion rate by visualizing brand identity and responsive design for desktop and mobile devices.
Deliverable
As the lead web designer and developer, I successfully launched the website in a record 2 months. Through a focus on user-centered design, I drove a 46% increase in online store traffic and a 0.24% improvement in conversion rate.
Empathize
11
Million
of the workers spend up to one-third of their workload in meetings.
The meeting host noticed a concerning lack of engagement and disconnection among 20+ person participants’ meeting, leaving to a lack of meaningful face-to-face interactions with participants.
The meeting participants were multitasking and struggled to stay engaged with key discussion points, causing them to overlook some of the communication during the meeting.
92
%
of the workers spent time on multi-tasking during virtual meetings.
“JOB TO BE DONE 1”
Meeting Host
70
%
home-based workers felt lack of engagement during video calls.
When I host a meeting over 20 person, I can’t see my participants’ real-time reaction (situation), I want to increase physical body language interaction during the meeting(motivation), so I can foster more meaningful face-to-face interactions. (expected outcome)
“JOB TO BE DONE 2”
When I join in a meeting with multitasking(situation), I want to quickly and speed up my responses(motivation), so that I can fully contribute to the communication without missing key insight.(expected outcome)
Define
In order to identify and prioritize the most critical user tasks, I conducted 20+ surveys and 5 user interviews in 1 week; here’re the data analysis below:
✨ How might we ?
How might we help meeting participant easier to fully engage save more time on responding key discussion, even while multitasking?
How might we help meeting host in reducing effort on reacting with meeting participants’ to ensure quick and effective communication among all meeting members?
Ideation
Before
After
Before
After
👀 Scenario 1: Meeting Participant
When Stella jumps from the previous meeting, she still had to handle some emergency calls and cannot pay 100% attention to the next meeting.
✨ Area of Improvement:
It effortlessly convey feedback quickly through natural gestures.
👀 Scenario 2: Meeting host
When john hosts a 30-person meeting nearly one hour with most of participants mute themselves and turn of their cameras, he feels powerless.
✨ Area of Improvement:
He felt more engagement with his participants after simplifying the physical effort on responding body communication.
Iteration
📈 In our final solution, we integrated hand recognition capabilities using Azure MLOps for deploying our machine learning model, enabling fast and accurate inference for a seamless user experience.
1. The meeting begins, and everyone in the meeting room is on mute.
3. With the drop-down menu in the reaction control bar, users can
enable the AI Emoji Reaction mode.
5. While the system is recognizing the real-time gesture expression, a
dynamic background color animation is displayed to reflect the
emotion being detected.
✨ Technology Impact:
1）Improved Model Deployment;
2) Advanced Machine Learning;
3) Data Privacy.
Github Resource
2. One of the members begins to speak, and the view switches to the
active speaker mode.
4. Due to privacy concerns, the reaction requires user approval before
being displayed.
6. After the facial expression is recognized, the AI automatically
generates emoji, and the user has the option to either
confirm or try again with a button.
Software Architecture
7. Once confirmed, the real-time emoji will appear at the top left corner
of the user's avatar in the meeting.
8. When the chat window is opened, other participants will also see the user's real-time emoji reaction in the chatbox, serving as a double reminder to the speaker during their presentation.