Lasso
Website design for AI x Creator marketing startup - UX/UI design
Where:
Remote
What:
Responsive website
Why:
Commercial
Role:
UX/UI Designer
Category:
Entertainment
When:
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.
-Process:
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:
CEO
Project Manager
Engineer
UX/UI designer(myself)
-Problems:
The company conducted user research and identified several pain points experienced by users.
Challenge:
☝️ 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
-Persona
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
-Competitive analysis:
Before starting the design. I conducted a competitive analysis to understand the market better.
Ideation Process
-Mood-board:
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.
-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.
-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 Annotations - Final version
Design system
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.
-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:
Conclusion
-Learnings:
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.
