Lasso Hero image


Website design for AI x Creator marketing startup - UX/UI design




Responsive website




UX/UI Designer




March 2023

Client and project

Lasso was started to empower creators across the world to grow their professional brands by leveraging the world's most powerful technology - AI.

The founders experienced firsthand the pain of scaling influencer and creator marketing after working with the world's fastest-growing DTC and SaaS companies. Reaching your audience through partnerships should never be this hard, which is why Lasso was built for.

The company is about to launch an innovative AI project with a "LinkedIn for creators" theme but with added creativity. We have developed a website to encourage user sign-ups and validate their new project scope.
Three mobile screens of Lasso landing page and product features


I planned the design through the following 8 stages:
1. 🎯 Project Definition & Scope
2. 💕 Understanding the Problem
3. 🔍 Competitive Research
4. 💡 Ideation
5. 📲 High-Fidelity Mockups and Prototypes
6. 🔬 Usability Testing
7. 🙌 Design Handoff
8. 👀 Quality Assurance

-The team:

Project Manager
UX/UI designer(myself)


The company conducted user research and identified several pain points experienced by users.
3 problems descriptions

☝️ Strike a balance of Creator x Professionalism with visual design.

✌️ As a new player in the market, we want more commercial design that should appeal to a wider audience.

Understanding users


Based on the user research conducted by the company, I identify the problem from the user's perspective and create 3 types of user personas.

1. Pro-creator
2. Part-time creator
3. Company - Brand deal officer
Professional creator persona details
Part-time creator persona details
Brand deal officer persona

-Competitive analysis:

Before starting the design. I conducted a competitive analysis to understand the market better.
Competitive analysis result

Ideation Process


To ensure a cohesive design, we began by defining the concept's tone and created mood boards with both dark and light themes.
The client expressed a preference for the dark mode, which conveys a futuristic and premium vibe.
As a result, we chose to incorporate a pastel accent into the dark mode design for this project.
Mood board - dark theme Mood board - light theme

-Idea generations:

To represent our future users, we opted for 3D illustration avatars as we currently don't have active users.
This choice gives a more realistic touch.
We aim for abstract product screens that provide a glimpse of our product.
Our next plan is to elevate the demo product design to a modern, clean look.

I then create a Mid-fidelity wireframe based on these rough sketches to share with stakeholders.
Mid-fidelity wireframe picture

-Design iterations:

Next, I created detailed high-fidelity wireframes that were thoroughly tested with users to ensure optimal user experience and usability.

Design Annotations - Version 1

Design Annotation - version.1

Design Annotations - Final version

Design Annotation - final version

Design system

design system colour palette
Lasso design system type scale stylesheet
Lasso design system grid for web and mobile designs
Lasso design system components
Lasso design system avatar and icon visuals

Final design

-Responsive Design:

Our top priority is to provide an exceptional user experience.
We have made it effortless for users to engage with our website, which can be accessed easily on any device.
2 tablets and 2 mobile screens with Lasso website screens

-Accessibility considerations:

🌈 The color contrast ratio meets the WCAG Level AAA standards.
🔍 The body type size is slightly larger than the standard size.
🅰️ The CTA button size has also been optimized for easier selection by making it larger.

-Final Prototype

I use prototyping tool and HTML/CSS to generate high-fidelity design prototypes for the project.
The coded prototype is now available for use by real users.
You can access the outcomes by clicking on the button below:
Lasso web pages examples



I have realized the significance of design principles, especially in creating self-explanatory UX/UI designs. Through this project, I was able to enhance my skills in two areas that are valuable to me.
Firstly, I learned how to effectively communicate using visuals by utilising project communication tools such as Slack, Figma, and Google Meet.
Secondly, I led the project from the designer's perspective, applying user-centred approaches, and defending my design decisions with clear explanations to manage stakeholders.

-Next steps:

In this project, UX copy was not given much priority. Some of the copies are lengthy and lack clarity.
It would be beneficial to prioritize improving the UX copy for the next. Additionally, the design should be adjusted based on the results of validation testing.
PC with Lasso product screen on a table