Shipping an engaging responsive website to help drive more web-based sales.

 
banner_1.png

Client

GreytHR

Studio

Uncommon

DURATION

4 months

Team 

  1. Dhruv Saxena
  2. Ridhi Brahmwar

 

ROLE

  1. UX Designer
  2. Visual Design Lead

SKILLS

  1. UX Analysis
  2. Wire framing
  3. Prototyping
  4. Illustration
 
 

ABOUT THE PROJECT

GreytHR is India’s leading HR and Payroll software company targeted specifically towards small and medium sized enterprises. This project was for the revamp of the customer facing website NOT the software itself.

 

 

OUR SOLUTION

SEE THE LIVE WEBSITE WE DESIGNED.

 

 

WHY GREYTHR NEEDED US

GreytHR’s website had not been updated for decades was no longer being helpful in driving sales. Shown below is the Homepage for the website BEFORE GreytHR came to Studio Uncommon.

Desktop.png
 

Not only was the website visually very dated, it also had a very complicated site hierarchy and site navigation, as shown below.

Screen Shot 2018-05-27 at 1.37.18 PM.png
 

 

IDENTIFICATION METHODS

We started the entire process by doing a UX analysis of the old website to identify what exactly was going wrong and these were the methods we followed.

05_GreytHR investigation.jpg

GreytHR customer Interviews

We conducted interviews with existing GreytHR customer to understand their journey and experience using the website.

 
05_GreytHR investigation.jpg

FLY-on-THE WALL SUPPORT CALLS

We shadowed a lot of their support calls to understand how GreytHR support handles customer problems and what are the most common problems that customers come to them with.

 
05_GreytHR investigation.jpg

Data ANalysis

We also analysed their mix panel data to get quantitative insights to some of the most common problems on the website.

 
852117912_7982673614378111784.jpg
 

PRoblems Identified

06_GreytHR Problem.jpg

Word of mouth

GreytHR had started relying heavily on the word of mouth for promoting their software

06_GreytHR Problem.jpg

LOW CONVERSION RATE FROM WEBsITE

73% of the people who browsed the wesbite dropped off without any purchase or signup for free trial. They had extremely low conversion rate from their website.

06_GreytHR Problem.jpg

LOW SIGN-UP for free trial

A whooping 90% of the people dropped off at the sign up form. 

 

MISSION STATEMENT

So after the identification of the problems, this became the mission statement for our project

Create an engaging & easy to browse website to help improve GreytHR’s conversion rate.

 

 

GOALS FOR NEW WEBSITE 

With that mission statement in mind, these were the goals we identified for the website.

MAIN GOAL

Flatten the website, which means reduce the site hierarchy and make the site easy to browse

SUB GOALS

  1. Simply the Features page and make the product features easy to find
  2. Help customers self solve problem and not feel dependent on the support page
  3. Improve experience for the sign up page.
  4. Make the entire website aesthetic and pleasing.
 

DESIGNING THE WIREFRAMES

paper prototypes.png
digital prototypes.png
 

 

 

HOW INSIGHTS INFORMED FINAL DESIGN

INSIGHT 1 - Features were hidden under complex navigations.

Shown below is the old features page with unclear and complex navigation.

old_features.png

 

 

 

 

As shown in the site hierarchy in the very beginning, if a user came in to navigate on the website, they couldn't reach what they wanted fast enough. So we created lots of alternate versions for the feature page, experimenting with all kinds of best practices in layout and UI.

Features wireframes.png

 

 

FINAL DESIGN- FIND FEATURES EASILY

It occurred to me that the problem could be solved with a change in the layout, We went for a tab structure so that all the 6 core features could now rest at the same level in terms of information hierarchy, it brought all the features to a single page and made it very easy to swap between them to see the features nested under them.

See the live features page here

 
Screen Shot 2018-06-09 at 6.06.48 AM.png
 

INSIGHT 2 - Pricing plans were not easy to understand

In the old Pricing page, the user could very easily see what the price difference between the plans was but they couldn't easily see what features they were getting in one pack vs. the other. This made them very hard to compare and thus made it hard to understand which plan was best for them.

 
 

FINAL DESIGN- CLEAR VISUAL PRICING PLAN

I created a very visual way of representing the pricing plans, using a visual metaphors like a cycle for a light plan and a pick up truck for the most robust plan. Moreover, the blue ticks make it very easy to spot which features are easily carried forward in the next plan.

Live pricing page

Screen Shot 2018-06-09 at 6.20.20 AM.png

We also added FAQ's related to pricing to iron out any doubts that customers might have at this point.

Screen Shot 2018-06-09 at 6.20.34 AM.png
 

INSIGHT 3 - Support was not efficient.

This was a two fold problem: 

  1. Customers loved the GreytHR support but even for solving the smallest problem, the old support page prompted people to call the support center. So they felt like they were dependent on it.
  2. On the other hand, the support center employees received the same questions over and over again 
old_support.png
 
 

FINAL DESIGN- Robust Documentation for suppORT

This not only made the customers feel like they could now solve problems faster and on their own but also took away the burden from their support center employees.

Live support page

Screen Shot 2018-06-09 at 6.51.36 AM.png
 

INSIGHT 4 - Sign-up form was too long for just a trial.

Customers felt like the old sign up form with 6 fields was asking for too much information for just a free trial.

old_sign up.png
 

We designed a 1 field , 4 step bite-sized sign up form which made the entire process feel significantly smaller.

Screen Shot 2018-06-09 at 7.16.58 AM.png
 

BIGGEST CONTRIBUTION

INSIGHT 5 - Screenshots of the old software were breaking the new design

It was condition from the client that they wanted the screenshots of the product to be on the website. This was a problem because at the time of website was being built, the software was not very aesthetically pleasing ( which the client agreed to) so the solution I came u with was 

 

STylised screenshot illustrations that showed only key points

Screen Shot 2018-06-09 at 7.25.47 AM.png
Screen Shot 2018-06-09 at 7.26.05 AM.png
Screen Shot 2018-06-09 at 7.26.16 AM.png
 

Final Features page

This is how the features page looked at the end with all the stylised illustrations

final_features.png
 
 

RESPONSIVE DESIGN

All the pages were designed to fully responsive

Screen Shot 2018-06-09 at 7.54.30 AM.png
Screen Shot 2018-06-09 at 7.55.39 AM.png
 

VISUAL LANGUAGE

As I played the role of the visual design lead also, my job was to make sure all the issues were being addressed at both the UX and UI level. Not only that,

  1. I set the brand language for the entire website
  2. Created custom illustrations and icons for the website

Live Homepage

Screen Shot 2018-06-09 at 7.43.05 AM.png
Screen Shot 2018-06-09 at 7.43.34 AM.png
Screen Shot 2018-06-09 at 7.43.47 AM.png

 

 

 

 

 

 

 

RESULTS

At the end of the project, not only did we tackle all the sub goals mentioned above, but our main goal of flattening the website was achieved. Click on the right arrow below to see how significantly lighter the website branching became thus making it very easy to browse.

 

PROJECT SUCCESS

  1. Shipped and developed within given deadline (4 months).
  2. Burden on support center by 36% lesser call rate.
  3. One step login led to 29% more signups for free trial.
 

PERSONAL GROWTH

At studio Uncommon, I grew immensely as a designer. They taught me how to design in an organised manner. I learnt to create design systems ( naming conventions and art board management) and use Sketch ( text styles, symbols, brand ai etc) very efficiently. You can read about the design system followed at Uncommon. Till date I use this method and teach it to any team I am in.

Screen Shot 2018-06-09 at 7.53.24 AM.png
 

PERSONAL TAKEAWAYS

  1. This project was my first web design project. I order to collaborate better with developers, I took a short online course on basics of Bootstrap and HTML, CSS. Understanding of code greatly helped in the shaping of design.
  2. I learnt that there is always opportunity to provide engaging solutions even in traditional industries.