Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history 
Updated
  • Loading branch information
@l1usteven
l1usteven committed Mar 17, 2024
1 parent 0088247 commit cf78456
Showing 1 changed file with 236 additions and 12 deletions.
248 changes: 236 additions & 12 deletions loreal-project.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>L'Oreal Project</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>L'Oreal x YSL Project</title>
<meta
name="description"
content="Discover Steven Liu's work as a digital designer specialized in UX design, product design, and project management for L'Oréal x Yves Saint Laurent. Explore his portfolio showcasing innovative projects and skills in user research, prototyping, and visual design, highlighting how Steven has crafted effective digital experiences for the cosmetics industry, specifically focusing on elevating the in-store experience with AI foundation shade recommendation." />
Expand Down Expand Up @@ -171,8 +167,9 @@ <h2 class="hidden">METHODS USED</h2>
<ul>
<li class="hidden">User Interviews</li>
<li class="hidden">User Journey</li>
<li class="hidden">User Flow</li>
<li class="hidden">Market Research Analysis</li>
<li class="hidden">Prototype Testing</li>
<li class="hidden">Usability Testing</li>
</ul>
<p class="hidden">
I conducted <span class="highlight">interviews</span> and
Expand All @@ -193,6 +190,18 @@ <h2>USER JOURNEY</h2>
class="zoomable hidden"
loading="lazy" />
</div>
<div class="container">
<div class="section hidden">
<h2>USER FLOW</h2>
</div>
</div>
<div class="img-container">
<img
src="image/loreal_user_flow.png"
alt="User Flow - AI shade recommendation"
class="zoomable hidden"
loading="lazy" />
</div>
<div class="container">
<div class="section focus">
<h2 class="hidden">KEY FOCUS AREAS</h2>
Expand Down Expand Up @@ -247,24 +256,206 @@ <h2 class="hidden">PERSONALIZATION</h2>
<div>
<img
src="image/loreal_animated_asset1.gif"
alt="Shade Finder AI - Your Shade"
alt="Shade Finder AI - Color Story"
loading="lazy"
class="hidden" />
<p class="hidden">Real-time scan visualization</p>
<p class="hidden">Complete look - Product upsell</p>
</div>
<div>
<img
src="image/loreal_animated_asset2.gif"
alt="Shade Finder AI - Color Story"
alt="Shade Finder AI - Complexion Routine"
loading="lazy"
class="hidden" />
<p class="hidden">Product up-sell opportunity</p>
<p class="hidden">Perfect complexion - Product upsell</p>
</div>
</div>
</div>
</div>
</section>
<section class="design">
<div class="container">
<div class="header hidden">
<h4>DESIGN PROCESS</h4>
<div class="divider"></div>
</div>
<div class="heading hidden">
<h2>WIREFRAME</h2>
</div>
<div class="split">
<div class="section">
<p class="hidden">
With the initial requirements for an
<span class="highlight">MVP</span> from the engineering team, I
proceeded to develop wireframe sketches based on the
<span class="highlight">established user flow</span>.
</p>
<p class="hidden">
The goal was to craft an
<span class="highlight"
>interactive experience enabling users to engage with the live
scan visualization</span
>. This allowed users to see how each scan affected their results
in real-time. From there, they could personalize their
recommendations, test them out, and provide feedback on the AI's
suggestions for further enhancement.
</p>
</div>
<div class="section">
<p class="hidden">
Our competitors took a more straightforward approach by simply
presenting the final recommended shades and products without much
explanation. However, our research showed that customers were
eager to delve deeper into the "how" and "why" behind their shade
recommendations.
</p>
</div>
</div>
<div class="img-container">
<img
src="image/loreal_wireframe1.png"
alt="Wireframe 1 - Profile"
class="hidden"
loading="lazy" />
<img
src="image/loreal_wireframe2.png"
alt="Wireframe 2 - Scan"
class="hidden"
loading="lazy" />
<img
src="image/loreal_wireframe3.png"
alt="Wireframe 3 - Preferences"
class="hidden"
loading="lazy" />
<img
src="image/loreal_wireframe4.png"
alt="Wireframe 4 - Results"
class="hidden"
loading="lazy" />
<img
src="image/loreal_wireframe5.png"
alt="Wireframe 5 - Review"
class="hidden"
loading="lazy" />
</div>
<div class="heading hidden">
<h2>USABILITY TESTING</h2>
</div>
<div class="split">
<div class="section">
<p class="hidden">
The wireframes converted into a simple grayscale prototype to
start the usability testing.
</p>
<div class="scenario">
<h4 class="hidden">SCENARIO</h4>
<h2 class="hidden">
A new customer comes in, looking to try out the AI-Shadefinder
and check if they are using the correct foundation shade.
</h2>
</div>
</div>
<div class="section tasks">
<ul>
<li class="hidden">
<p>Task 1</p>
<p>Achieve 3 passing scans</p>
</li>
<li class="hidden">
<p>Task 2</p>
<p>Test and choose the most accurate shade</p>
</li>
<li class="hidden">
<p>Task 3</p>
<p>Rate the recommendation accuracy</p>
</li>
</ul>
</div>
<div class="img-center">
<div>
<img
src="image/loreal_animated_asset3.gif"
alt="Wireframe - Scan results"
loading="lazy"
class="hidden" />
<p class="hidden">Scan results</p>
</div>
</div>
</div>
<div class="heading hidden">
<h2>TEST RESULTS</h2>
</div>
<div class="split">
<div class="section scan">
<h2>Scan Breakdown</h2>
<h2>Simplify Recommendations</h2>
<h2>Visual Aids</h2>
<h2>Relocate Side Nav</h2>
</div>
<div class="section results">
<ul>
<li>
<p class="highlight">7/8</p>
<p>
Users need a more comprehensive breakdown of the live scan
results.
</p>
</li>
<li>
<p class="highlight">8/8</p>
<p>
Users mentioned that they test the best match first, and then
device if they need to try others.
</p>
</li>
<li>
<p class="highlight">6/8</p>
<p>
Users suggested a visual diagram to show customers where to
scan and why.
</p>
</li>
<li>
<p class="highlight">6/8</p>
<p>
Users rarely utilized the side nav, and some did not even know
it was clickable.
</p>
</li>
</ul>
</div>
</div>
<div class="prototype">
<div class="img-row">
<div>
<img
src="image/loreal_animated_asset4.gif"
alt="Shade Finder AI - Your Shade"
loading="lazy"
class="hidden" />
<p class="hidden">Real-time scan visualization</p>
</div>
<div>
<img
src="image/loreal_animated_asset5.gif"
alt="Shade Finder AI - Our Selection"
loading="lazy"
class="hidden" />
<p class="hidden">AI shade recommendation</p>
</div>
</div>
<div class="img-row">
<div>
<img
src="image/loreal_full_width_asset1.png"
alt="Shade Finder AI - Facial Scan"
loading="lazy"
class="hidden" />
<p class="hidden">Facial zones visual aid</p>
</div>
<div>
<img
src="image/loreal_animated_asset6.gif"
alt="Shade Finder AI - Review"
loading="lazy"
class="hidden" />
Expand All @@ -274,6 +465,38 @@ <h2 class="hidden">PERSONALIZATION</h2>
</div>
</div>
</section>
<section class="conclusion">
<div class="container">
<div class="header hidden">
<h4>CONCLUSION</h4>
<div class="divider"></div>
</div>
<div class="split">
<div class="section">
<h2 class="hidden">ACHIEVEMENTS</h2>
<p class="hidden">
Improved feedback loop time by automatically delivering customer
feedback on shade match quality to the engineering team, resulting
in a
<span class="highlight">30% increase in workflow speed</span>.
</p>
<p class="hidden">
Increased Beauty Advisors' credibility with a comprehensive visual
breakdown of their customers' shade recommendation.
</p>
</div>
<div class="section">
<h2 class="hidden">LESSONS</h2>
<p class="hidden">
No need to reinvent the wheel. Few users used the left sidebar,
and it was not obvious it could be clicked. moving it to the top
and making it more recognizable significantly increased its usage
and opened up more space for the main content.
</p>
</div>
</div>
</div>
</section>
<!-- Bottom -->
<section class="work">
<div class="container">
Expand Down Expand Up @@ -324,9 +547,10 @@ <h4>UP NEXT</h4>
class="hidden"
>EMAIL</a
>
<a href="https://www.linkedin.com/in/steven-v-liu/"
<a
href="https://www.linkedin.com/in/steven-v-liu/"
target="_blank"
rel="noopener noreferrer"
rel="noopener noreferrer"
class="hidden"
>LINKEDIN</a
>
Expand Down

0 comments on commit cf78456

Please sign in to comment.