Topology
Eyewear

Topology
Eyewear

Topology creates custom eyeglasses and sunglasses tailored to each individual's unique facial measurements and style preferences. Their app generates a precise 3D model of the face, analyzing over 2,000 measurements to ensure a perfect fit.

Project 


Overview

Objective 1

Incorporate fashion to enhance brand value and increase customer shopping interest.

Objective 2

Educated customer the best eyewear style is the one that fits best.

Objective 3

Introduce the iOS app designed for styling glasses to boost both download and sales rates.

Final 


Results

No. 1

SEO on Google for "Custom Tailored Eyewear" in 2019.

↑32%

Increase in Conversion Rate from Website to iOS App.

Muse
Creative
Awards

Platinum
Winner

Muse
Creative
Awards

Gold
Winner

Sliver Winner

A' Design
Award & Competition

awwwards.

Mobile
Excellence

Muse
Creative
Awards

Platinum
Winner

Muse
Creative
Awards

Gold
Winner

Sliver Winner

A' Design
Award & Competition

awwwards.

Mobile
Excellence

Design
Process

Original Site Audit & User Research

User research shows many overlook eyewear fit issues. Stylish designs boost shopping interest, enhance experience, and drive better results.

User Flow

Fidelity Evolution

Final
Design

Objective 1: 



Incorporate fashion to enhance brand value and increase customer shopping interest.

By displaying a variety of custom-tailored eyeglasses on the Home and Frame pages, customers have access to a wide selection of options that can enhance their shopping experience.

Objective 2: 



Educated customer the best eyewear style is the one that fits best.

An informed customer understands that the best eyewear is a perfect fit. Simply download our iOS app to perform a 3D scan of your face and Virtual try-on.

Objective 3:

Present the iOS app designed for styling glasses to boost both download and sales rates.

Utilize two sections on the Home page to showcase the features of the iOS app: it creates an accurate 3D model of the face and allows customers to design glasses according to their personal preferences. Display CTAs in various locations, including the top bar and the “Measured for you” and “Design by you” sections.

Design Systerm

Design system to ensure there was visual consistency across designs and a foundation for each team to work upon.

This consisted of the grid, typography, iconography, and UI elements such as buttons, links, navigations, etc. This system had to be flexible enough so that as a team.

Learning 


& reflection

Learning 


& reflection

Data-driven decision making, incorporating user feedback & testing

Data-driven decision making, incorporating user feedback & testing

Data-driven decision making, incorporating user feedback & testing

Brought user research and data results into design decisions, we making sure every choice is backed by real insights. This helps create designs that work effectively for the users.

Communication ahead of time with crossed functional teams

Communication ahead of time with crossed functional teams

Communication ahead of time with crossed functional teams

We use Figma as a collaboration tool to share feedback and a create consolidated feedback google doc across teams. We go beyond design and technical audits to make sure our designs can be executed within the available time and resources.

ⓒ 2025 Scarlett Liu Portfolio

Design, strategy, and problem solving craft creativity with impact by blending innovation, thoughtful execution plus strategic thinking to create meaningful, compelling, and lasting solutions.

ⓒ 2025 Scarlett Liu Portfolio

Design, strategy, and problem solving craft creativity with impact by blending innovation, thoughtful execution plus strategic thinking to create meaningful, compelling, and lasting solutions.

ⓒ 2025 Scarlett Liu Portfolio

Design, strategy, and problem solving craft creativity with impact by blending innovation, thoughtful execution plus strategic thinking to create meaningful, compelling, and lasting solutions.