Zo
Website redesign to increase user signups and interactivity
![](https://freight.cargo.site/t/original/i/3f0a509cd59544adc889630588cacbe3b505d20de58ec188822fe483ef343cac/Case-Study-Preview-Pic.png)
DURATION
2 weeks
(Feb’23)
2 weeks
(Feb’23)
ROLE
Lead Designer
Lead Designer
TEAM
Designers,
Zo founder
Designers,
Zo founder
RESPONSIBILITY
Project Management,
Website Design
Project Management,
Website Design
CONTEXT
Zo is a Web3 decentralized messenger available on iOS, Android, and the Web
I redesigned Zo’s website with the goals of:
- Fleshing out the app’s capabilities
- Create a modal to collect user emails
- Create a SDK (software development kit) landing page to collect developers’ contact information
This project was a great opportunity for me to showcase my visual design skills.
︎ Zo was a client at Wonderstruck Studio
PROBLEM
Zo’s value proposition on the website is not clear
Only users who are in the know would sign up for Zo.
The current website does not:
-
Articulate Zo’s value proposition
-
Have an email modal to collect contact information and allow users to claim their usernames
- Have a Chat SDK page to inform users about Zo’s SDK
Current web design:
![](https://freight.cargo.site/t/original/i/f24bdbd1620faf912c12e4e73f7e7ff9665c4891f77b6f59fb719285f1583fac/Current.png)
FINAL SOLUTION
Refreshed website with increased user interactivity
- Redesigned the Hero section of the landing page and added a call to action (for user’s to sign up via QR code + download Zo)
- Added cards to better communicate Zo’s value proposition
- Created email modal and information collection flow
- Created Chat SDK page to collect developers’ information
![](https://freight.cargo.site/t/original/i/39f59d9fec674eca869eaa2faa199a5529169e57cbc0f9d03c3ee162f3a55731/Landing.png)
![](https://freight.cargo.site/t/original/i/e16b3057f1ec36c6ee719ccbb85f5c79ff159d6c734550029a36541827fd5624/ChatSDK.png)
See how I arrived at this solution ⤵
RESEARCH
Competitive app audit
On popular messaging apps like:
- Discord
- Telegram
- Slack
Also used ChatGPT to generate sample code for the ChatSDK page visual 🤖
DESIGN GOAL
Create attractive visuals to give the website a new life
To achieve this vision, I broke it out into supporting design goals:
- Create a cohesive theme throughout all the pages
- Incorporate design trends that grab user’s attention and make website feel fresh such as:
- Gradients
- Amorphous glass effect
- 3D icons
Educate users on the value proposition of one of the first web3 messengers, which could increase user’s confidence in Zo’s capability to help them achieve their goals 🎯
Capture user’s interest to increase Beta app sign ups, which could increase app usage upon release 📈
IDEATION
Varying card elements & layouts
![](https://freight.cargo.site/t/original/i/5a39a078062e7ef1df66c78683e34098fa19c01b61b0251e3d94aa233420da26/Wireframes.png)
![](https://freight.cargo.site/t/original/i/e34a1efef3dc8f09bc7c93e4af5c2730c94879efa1d8fb441a55eb9305282307/Design-Elements.png)
VALIDATION
Presented to the client a few times and iterated based on his feedback:
🏆 Wins
- Client liked new purple/pink color palette
- Email modal > Full email page
![](https://freight.cargo.site/t/original/i/55f35c4da3ed1c52a1175b7154e732088601457bd4d23d4d3401c76eea17fd8c/Iterations.png)
SELF REFLECTIONS 📓
- Moodboarding and auditing what you do and don’t like about certain designs is very helpful for visual design. This helped me combine different visual concepts.
- Chatting with the founder early and often was key to successful iterative designs.