Web 1920 – 2.png
Website UX and design for
ehsAI
The design process for creating ehsAI’s new website
OVERVIEW
This project aimed to design an effective and compelling site that formed the foundation of ehsAI’s digital identity. ehsAI is a compliance technology company that uses artificial intelligence and machine learning to help organizations intelligently manage compliance documents and permitting.
My role was to find out more about the users, competitors, and the company’s value propositions. I also worked on translating user research into an effortlessly navigable experience, by working on information accessibility. I aimed to create a cohesive visual language for the company through identity guidelines, offering a modern, smart, and friendly design. 

I collaborated closely with the product manager, CEO, COO, a fellow designer, and the development team as a UX researcher and Web Designer.

     

Role:


UX Researcher

Web Designer

Timeline: 


4 months, 2020

 
 

Design toolkit: 
 

XD

Illustrator

Photoshop

After Effects

Miro

Zoom

Jira

shotsnapp-1619307472.297.png

Goals
 

The high-level goals were to:

       

Refresh layouts and design an online presence that introduces the product’s benefits and features and how it can help customers.        

Translate user research into an effortlessly navigable experience, by working on information accessibility.

             

Lead users to book a demo or contact the company for more information.          

Heuristic Analysis

Where did I start my research?​

I began by learning about the company’s goals and motivations and experiencing a product demo.

I worked on understanding the personas, company mission, visions, and value propositions. Several meetings with the CEO and COO helped me find answers for some of my user-related questions as they were actively in touch with customers and have a great understanding of them.

 

Following this, I did a heuristic analysis of the websites to discover hidden usability problems on the website and find obstacles to be fixed. I checked the navigation between different menus and how easily a visitor can find the information they are looking for. I wrote some notes on each page of the website. It was effective in studying and understanding the user experience and, in the next steps, designing the user journey map.

   

Competitor Analysis (7).png

Heuristic analysis of the websites helped me to discover hidden usability problems on the website and find obstacles to be fixed.

ehsAI's old website

Heuristic Analysis

Findings:

1

Missing a Mobile-Friendly design

The current website was neither responsive nor mobile-friendly. The navigation contains too much information, making users confused about where to go.

2

Hidden Company Values

Some important values of ehsAI were hidden or not well-delivered.

3

No CTA

There was no Call-to-Action button on the website to encourage visitors to book a demo or contact for more information. 

4

Repetitive information

The same data was presented in different forms in different sections of the website.

5

Uninspiring Color Scheme 

The colors used in the website were mostly dull and dry, which made it look old-fashioned.

6

No clear content segmentation

The contents were presented without any division between them. 

Site map

Creating a sitemap helped me visualize how the website is - and how it should be - structured in order to accommodate users (personas). This gave me a better idea of the navigation that a user would experience while visiting the website.

Site map (2).png

Creating a sitemap was helpful to visualize how the website is - and how it should be

Target Audience

who are the end-users?

To better define the target audience, I asked questions about the company's mission, vision and value propositions. I also had interviews with the CEO and COO about the target group of the website. In the end, I developed a further persona to align with the current goals of the company: a CEO of a company who is looking for cost-effective solutions for managing compliance documents.. 

Artboard – 26.png

Competitors Analysis

How the competitors are presenting themselves, their strengths, and weaknesses

​Through competitor analysis, I assessed the strengths and weaknesses of the competitors' websites, observing how they present themselves and how they organize features, content, and navigation.

Competitor Analysis (6).png

Competitor analysis provided me with the opportunity to see how the competitors are presenting themselves, their strengths, and their weaknesses.

User Journey Map

Information discovery issues and other pain points - and design opportunities​

 

The insights from the research helped form a journey map for each persona, visualizing visitors’ behavior and obstacles faced, and revealing design opportunities.

Journey map.png

I visualized the representation of the customer experience and looked at the website from the user's point of view.

Site Map

Answering user needs - Establishing a new sitemap

The new website's structure is designed to answer visitors’ need to find information easily with effortless navigation through different website sections.

Site map (1).png

Wireframe sketches

As I sketched out the user experience for the website, I focused on three specific areas that would be of high impact to the user:

​​

  • An effective introduction to the product, its benefits, and how it works

  • Smooth navigation through different sections of the website

  • Streamlined content structure

Competitor Analysis (8).png

Low Fidelity Wireframes

Low Fidelity Wireframes

Quick user tests with low-fidelity wireframes

I first worked on low-fidelity wireframes to define structure and information architecture.

This helped solidify the overall user experience of the website.

The interactive prototype allowed for quick testing of the layout with users. I tested the low-fidelity prototype with two users and two designers.
Overall, people liked the new website structure as they felt that they could immediately find what they were looking for. 

work with us –apply.png
Saving Calculator – 3.png
7ه.png
Insights – 1.png
Group 428.png
Group 429.png
Insights_ Download       – 1.png
who we serve – 1.png
NEWSROOM – 1.png

Mood boards, color palettes and logos

Creating a new, fresh visual identity


I designed a new visual identity for the company. It included a mood board, a new color palette, and two logos. 

Moodboard

Moodboard FINAL.png

Color Palette

Primary

Moodboard FINALrty copy.png

Secondary

Moodboard FINALff copy.png

Logo Design

Moodboard2.png
Moodboard.png

Final Logo 

fefcwef.png

Style Guide

After wireframing, I started developing a visual language to keep things consistent across all the elements in the product. This led to visuals that felt slick, energizing, and modern while retaining a welcoming and encouraging voice.

Ideation Session

Generating idea with the help of the target audience

In the next step, target groups were invited into the creative process. The objective of ideation sessions was to talk about problems and generate possible solutions.

logo ehsai.png
logo ehsai.png

Style Guide

Color & Typeface

Typography-desktop.png
Colors.png

Text Fields & Icons

Fields-desktop.png
Fields-desktop.png
Iconography_Mobile.png

Design Outcome

Final mockups; Homepage

Design Outcome

Card design; Desktop & Mobile version

Newsroom | Desktop 

Mask Group 7.png

Mobile

Mask Group 8.png

Product page | Desktop 

Mask Group 5.png

Mobile

Mask Group 6.png

Insights page | Desktop 

Mask Group 3.png

Mobile

Mask Group 4.png

Who We Serve page | Desktop 

Mask Group 1.png

Mobile

Mask Group 2.png

Design Outcome

Highlighting savings with a Savings calculator

Users can discover how much they can save with ehsAI through a simple calculator.  

Design Outcome

Featuring industry news with the Newsroom

 

The Newsroom showcases ehsAI's leadership in the field, and encourages newsletter subscriptions. 

Design Outcome

Bringing attention to opportunities to work with ehsAI with a 'Work With Us' page

Design Outcome

Form design

Saving Calculator – 2.png
Mask Group 9.png

Design Outcome

404 error page

asset-3.png
asset-4.png

Illustrations

Playful illustrations to refresh ehsAI's online presence

Group 431.png
contact-us0book-a-demo.png
Group 432.png
Hero_image.png
Group 430.png
work_with_us_illustration.png
Smart Data- outline.png
RISK MITIGATION.png
Speedy compliance.png
Saving-calculator-illustration.png
404-2.png
404 error.png

User Testing

Second iteration on the website

 

I created an interactive prototype, allowing for quick testing of the layout with users and communicating with developers about the limitations in development.

After designing the mobile and desktop UI, I organized seven online and in-person evaluation sessions with experts and the target group to assess the user experience. 

home-page.png

More Work

Web 1920 – 4.png
Web 1920 – 9.png

FOOJAN

A Platform to empower

women entrepreneurs

Web 1920 – 10.png
Web 1920 – 11.png

Kafshdoozak

A cartoon maker application

for kids

Web 1920 – 13.png
Web 1920 – 14.png

Clexi

A smart password manager