Senza Carta
Launching the brand new digital employee experience

Intro

As my team at NetEngine was reaching to the delivery point of the MVP product for a ruby on rails application named Senza Carta, I was involved in designing and developing a landing page for the product.

Client

Senza Carta, means “paperless”, aims to bring a new digital employee experience for Human Resources in business and individual job seekers.

Challenge

I was asked to continue iterating the design based on my team member’s initial work. My client also wants to see some illustrations on the site.

Process

Ground Work

Logo

What the client wanted was simple at the initial stage, be on brand and be clean. The landing page of Facebook Workplace and NetEngine’s in house project Cloudbill were given as example.

The team was only provided with a logo and some content from client’s pitch deck.

Here’s the initial design presented by my team:

Design v1

With a tangible page to look at, the client started to realize her vision of the landing page, so we get some very constructive feedback:

  • Not fond of the liberty we took with changing the logo
  • More distinctive colours to separate different sections of the page (the current grey colour is too light)
  • The page needs to be divided into two categories, for individual and for business. Each category has its own style and content.
  • Require some illustrations for the individual page to target a more diverse demographic
  • Would like to see more product mockup images in the page
  • New example: deputy’s feature page

Iteration 1

I picked up the work from this point. During the feedback meeting, the client expressed her interests in seeing some illustrations on the page for individual users (job seekers) to deliver the message that Senza Carta is for everyone.

The first idea that jumped into my head was bags. No matter what’s your job, you will always need a bag. So I created a bunch of them.

Bags

Following the spirit of the new example picked by the client, I created some on-brand device containers for the screenshots of the actual web application and searched for some nice stock images from unsplash .

I presented the new version of the individual page at the end of this iteration and client was pretty happy about the illustration and the usage of stock images.

Design v2

Iteration 2

I was on track to hit the budget by finish the design of the business page. However, the more I am working on the business page, the more I feel that the elements on the current individual page, stock images and product mockups, belong to the business page. It would be way cooler if I had the chance to create more illustrations for the individual pages.

So I asked, and the client said yes!

Illustration

Here’s the final version approved by the client:

Design v3 2
Design v3 1

Development

With the client’s consent, the actual Senza Carta web app requires a relatively low level of browser support. Therefore, I also got to use flexbox to implement the landing page.

Last but not least, I decided to add some extra spice to the page by doing some SVG animation.

View animation on a tablet, laptop or desktop

Group 2 Created with Sketch.

Reflection

  • Be respectful to client’s logo, even if you think it looks good after you tweaking it
  • Don’t be afraid to use stock images

Knowledge

SVG Optimization

Inline SVG Helper for Ruby on Rails

SVG Animation

CSS Trick - Animating SVG with CSS

< Back to Work
INSTAGRAM
/
LINKEDIN
/
DRIBBBLE
/
2016 © LENNON CHENG
SOURCE CODE
/
STYLE GUIDE
/
2018 © LENNON CHENG