Zeplin Landing Page Redesign — a UX Case Study

Zeplin’s current landing page

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

Problem 💢

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.

Zeplin’s colour scheme

Goals 🎯

There were two goals that I set out to achieve through the landing page:

  1. Communicate Zeplin’s brand colours & icon on the landing page
  2. Improve readability of the landing page

Initial Wireframe of Landing Page 📍

Low-fi Wireframe
Hi-fi Wireframe

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.

Expanded low-fi wireframe of 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:

  1. Good commercial landing pages have a strong call-to-action on first impression
  2. 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)
  3. 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.
  4. 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.

--

--

--

Nanyang Technological University | 🛒Passionate about Marketing Analytics | 🔎 https://cedric130813.webflow.io

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Providing a Divine and Nature’s touch to the living room

Wide-Body 1970 Pontiac Trans Am Is A 700-HP Track Monster

<img src="trans-am.jpg" alt="Riley Stair's 1970 Pontiac Trans Am">

Amazing Stories Behind the Original, Unrestored Muscle Cars at the 2017 Muscle Car & Corvette…

Case Study: Editorial Design

Cloning Meesho.com: A functional and visual clone.

Website Redesign Checklist: Step by Step — Sonder Marketing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ian Cedric Io

Ian Cedric Io

Nanyang Technological University | 🛒Passionate about Marketing Analytics | 🔎 https://cedric130813.webflow.io

More from Medium

A UX Design Case Study: Roof Space

UX Research Case Study: User Behavior of Using Zoom Meeting App in The Pandemic Era

Designing a Social Media Art Application- A UX Case Study

Case study — What does an online eyewear store have to do with the Design Thinking method?