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
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.
.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.
.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..
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.
.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.
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.
.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
.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.
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
Color Palette
Primary
Secondary
Logo Design
Final Logo
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.
Style Guide
Color & Typeface
Text Fields & Icons
Design Outcome
Final mockups; Homepage
Design Outcome
Card design; Desktop & Mobile version
Newsroom | Desktop
Mobile
Product page | Desktop
Mobile
Insights page | Desktop
Mobile
Who We Serve page | Desktop
Mobile
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
Design Outcome
404 error page
Illustrations
Playful illustrations to refresh ehsAI's online presence
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.
