Redesigning the Zeta website (…and hello!)
As a young design team, we’re big believers in sharing our learnings with the larger community. Here’s the first of many deep-dives into how we design at Zeta: our redesign of the Zeta website.
Our flagship product, “Zeta Meal Vouchers”, was launched in early 2015 to help employees save taxes. However, since then we’ve added multiple new products under our belt, and the old website was starting to look dated.
Being a company that deeply values design, we decided to do the redesign in-house despite ongoing projects; after all, who better than us to tell our story.
Here’s our journey.
Goals
We wanted a website that looks really, really good. But simply having a good looking website wasn’t enough. Just as importantly, we wanted a website that could clearly articulate Zeta’s value to its customers.
“How well we communicate is determined not by how well we say things, but how well we are understood.” — Andy Grove
Specifically, we had two primary goals with the redesign:
- Communicate & sell our expanded suite of products
- Use our new brand language across the website (including the Zeta personality, colour palette, typography, icons & illustrations)
Design Process
The first phase in the process was to list down characteristics of our target audiences — corporates, employees and merchants.
In doing this, we realised that designing the homepage to target all three audiences would reduce the focus on any one. So, we decided to split the website into different landing pages, each tailored towards a specific kind of user.
With this clarity, we then set about defining how the website would look and feel.
Visual Language
Getting the visual language right was important to us. More so because claiming tax benefits is a complicated process; one that employees consider cumbersome but necessary.
With Zeta, we wanted to change that.
“We really care about how products evoke emotions in their users. For Zeta, we wanted to evoke feelings of positivity, freshness, approachability, and dependability.
…when it comes to visual design, it’s very easy to make something beautiful, but hard to make it meaningful.”
— Afsal, Visual Designer at Zeta
While at first, we started with softer colours to give more importance to the content, we soon realised that strong visuals bring focus to the content.
Eventually, we came up with the beautiful new palette you see above. In addition to working well with content on white surfaces, the colours we chose also look stunning against Zeta’s brand colour, violet.
Photography
We recently moved to a brand new office and didn’t want to miss the opportunity to showcase it on the website. And while we could’ve called in professional photographers, we decided to *keep-it-real* 😁 and do this in-house too.
Here are a few candid 😉 photos we took around the office:
Animations
We wanted the website to reflect our innovative products, and hence it had to be a lot more lively and engaging than the usual text +image combo.
At first, we considered using parallax to liven-up the website. But after a few tests, we realised that parallax significantly distract users from the content of the website. Our own experience of browsing parallax-scroll websites only reinforced this further.
The solution came in the form of rich “storytelling” animations that we created in After Effects for each website section.
We wanted the right balance between content and visuals for our website. This is when we decided to explore a story-telling approach where each section is accompanied with an animated story of the product’s concept.
This involved the herculean task of painstakingly conceptualising each animation in Adobe After Effects. It initially seemed far-fetched and unscalable, but with a lot of dedication we finally made it.
— Saptarshi, Interaction Designer at Zeta
Development
While not obvious on the surface, as much work went into development as it did into design. We wanted to ensure that the website was fast and accessible on any device, since otherwise the design would go unseen by users.
Reducing asset sizes ten-fold
The main development challenge which came up was to keep the website size small while keeping the animations intact.
Our initial approach was to convert the animations into GIFs, but there were two problems with this:
- The GIFs were still too big in size (5–10MB).
- Controlling GIFs with Javascript without using heavy external libraries wasn’t practical.
While searching for a solution, we came across a plugin for After Effects called BodyMovin, which automagically converts After Effects animations into CSS or Canvas. However, although the plugin worked really well for simple animations, it didn’t work well with complex ones like ours.
Finally, we stumbled across a little tool called Handbrake which is used for converting videos and optimising them for the web. We decided to give it a shot and the results we got were mind-blowing! Our animations shrunk from 3–5MB to just 200–300KB — that’s almost a 10x reduction.
With the file size issue resolved, we then focused on making the videos mobile-accessible. This meant handling things like replacing the videos with static images for mobile devices (iOS doesn’t support autoplaying inline videos).
Coding the website
We started developing the website in plain HTML/SASS but the code soon became difficult to maintain. So we switched to using the EJS template library which made it easy to modularise the code and reduce repetition.
For CSS, we switched to the BEM naming convention. Not only did this make our CSS look beautiful and maintainable, but also reduced the number of !important exceptions in our stylesheet to zero!
In addition, we also used Grunt to make it easier to automate a number of tasks — including combining and uglifying the JS and CSS files, minifying the images, automatically inserting browser prefixes for CSS rules, etc.
Doing all this rapidly reduced our development time and helped pave the way for super-fast iterations in the future.
In conclusion
It’s been quite a journey redesigning the Zeta website, and there’s a lot more we wanted to do. But as somebody smart once said — “Real artists ship” :)
Check out the new Zeta website here: www.zeta.in
As always :)
Press ❤ ️if you like the post.
For more posts on designing and building products with ❤️, follow us on Medium, Twitter, Facebook and Instagram :)
