Zeplin Landing Page Redesign — a UX Case Study
Last week, I was exploring a few Figma plugins and I chanced upon Zeplin, which takes designs and exports them for handoff. For starters, Zeplin was started by a small Istanbul-San Francisco based team which began in 2014, and is available on Figma, Sketch and Adobe XD.
And an idea popped off in my mind which was to do a conceptual redesign of Zeplin’s landing page, as a way to see how I can make it (1) accentuate its brand identity (2) find ways to improve the user experience
There were three main problems I identified on the original landing page.
Firstly, as a first-time viewer of Zeplin’s landing page, it felt very plain and it did not reflect the brand identity of the orange Zeplin logo. Furthermore, the font used in the landing page was too faint and did not appear striking enough to make a strong first impression.
Secondly, the margins between each section could have been spaced out further for better readability.
Thirdly, the buttons could follow more strictly the colour scheme of the Zeplin logo which is a spectrum of orange colours.
There were two goals that I set out to achieve through the landing page:
- Communicate Zeplin’s brand colours & icon on the landing page
- Improve readability of the landing page
Initial Wireframe of Landing Page 📍
Fonts used: Sora from Google Fonts https://fonts.google.com/specimen/Sora
For this initial low-fi wireframe, I used the Extra Bold Sora font to emphasise the tagline which was “Deliver on the promise of design”.
Additionally, as there is a call-to-action button on the landing page, I added thicker borders around the “Get started for free” button.
With that, I proceeded to continue the wireframing for the rest of the landing page.
Low-fi landing page (left)
There were some key readjustments to the components of the landing page:
1. Tagline with a call-to-action button
2. A carousel of the key clients that use Zeplin for their product teams (Pinterest, Starbucks, Autodesk, Box)
3. Product hero sections for each of the key selling points for Zeplin (Handoff+ and collaboration)
4. Customer testimonials, which would be in between each selling point
5. And finally, a contact form at the end of the landing page for interested enterprise users / companies (which was missing from the original landing page)
High-fi landing page (left)
After drawing up the low-fi prototype of the landing page, I proceeded to do a high-fi landing page.
There were some key elements I noticed about commercial websites:
- Good commercial landing pages have a strong call-to-action on first impression
- They have a few key “big-name’ client companies as social proof and a testament to their product’s viability. (notice how its the usual grey-toned collection of famous brand logos)
- The fonts that they use on their landing page are bold and consistent. It sends across a message that they are confident about their product.
- Two key call-to-action ‘nodes’ on the landing page: (1) the Get Started button at the top (2) the contact us/ Get in Touch form at the end
Lessons Learnt and areas to improve 🎯
More accurate research methods. While doing this case study, I realised that most of my improvements were ‘refinements’ that relied solely on secondary research. In a real-world scenario, it would have been more of user interviews with people who use Zeplin and have visited their landing page. Another area to explore was the use of user personas, which could be useful in terms of understanding the target audience of Zeplin.