Sofvie
"Stay safe, stay protected, stay compliant"
with us, your workplace will become a safer and healthier environment for all.
Introduction
Sofvie is an EHS (Environmental, Health, and Safety) company that specializes in providing comprehensive solutions for managing workplace safety and compliance. Our goal is to help you create a safer today and tomorrow. Sofvie offers a wide range of services that help businesses achieve compliance with local and international regulations, reduce environmental impact, and ensure the health and safety of their employees.
2023
Year
Duration
5 weeks
Figma
Miro
Zoom
Google docs
Light house
Google slides
My Role
Tools
UX Researcher
UI/UX Designer
UX project lead along with 3 designers
Platform
Web Application
Problem
As a startup and relatively fast-growing company, Sofvie's website contains significant content and elements that have also changed and evolved with the company. As a result, the website contains numerous errors and inconsistencies. Users were confused and doubtful as a result of these inconsistencies, resulting in an increasing dropout rate.
Solution overview
We need to redesign the website to make it more intuitive and user-friendly, which will provide the users with the right information about the product and increase the number of demos booked.
Week 01
Research
Due to the fact that this was a foreign industry for all of us, we divided our research into two parts:
Industry research- To provide a better solution, we need to gain a deeper understanding of the industry.
Competitive analysis - In order to determine how other companies are providing solutions to similar problems.
COMPETITIVE ANALYSIS
For competitive analysis, we studied and researched apps that solve a similar problem:
- eCompliance
- cority
- VelocityEHS
WHAT WORKED!
eCompliance- streamline users to their specific industry, Pleasant graphic, uses technical jargon but less cognitive load compared to Sofvie
cority- separate customer service page.
VelocityEHS- entire section built for accessible view, minimal technical jargon
WHAT IS MISSING?
eCompliance- slow website load time, lack of visual consistencies, and page balance.
cority- poor website load time, elements without any usage explanation
VelocityEHS- The usage of dark colors can make users feel overwhelmed and clustered.
Week 01 Deliverables
After thorough research into the EHS industry and competitor analysis. I gathered the research data from multiple teammates and updated it so that it conforms to a common visually appealing theme in Google Slides. Which we presented to the client at the end of the week.
Click here to view the Google slides.
Addressed- Do a competitive analysis
Week 02
Website Audit
Following the completion of the research, it was time to conduct an audit of the website. Audit is one of the vital tasks which client requested as he was revamping the website and product. They wanted us to highlight the crucial UI/UX issues. Thus, we met with client to determine the exact result/output he is seeking from the audit. As a result of synthesizing client’s requirements with the available timeframe, we arrived at the following audit constraints:
A total of 40 pages were to be audited.
In addition to identifying the issues, we were supposed to propose possible solutions/suggestions for the specific page
We were also asked to perform a Lighthouse performance test on each page.
Moreover, client asked us to point out any grammatical errors or overuse of industry jargon on the website.
AUDIT TEMPLATE
Having distributed 10 pages to each of us, I suggested creating an audit template to ensure we cover the same audit topics and maintain consistency. The audit template includes the Heuristics analysis, feedback/suggestions, and What we liked and what we did not like on the page. The following are the audit topics:
Audit points by client:
- General Feedback- Overall look, feel, page length, consistency, and use of assets (icons, graphics, and images).
- Layout- element positioning, section structure and order, responsive element states, element hierarchy.
- Copy- correctness, hierarchy, clarity, simplicity, and spacing.
- Accessibility- Use of colors, contrast ratio, Images, all tags, and font size.
- UX- Cognitive load, element proximity, similarity.
Audit points added by us:
- What we liked
- Feedback/Suggestion
- Broken links
- Grammar mistakes/typos.
Here is an audit of the home page. Check out the rest of the audits by clicking here
Following are the most recurring issues during the audit:
Week 02 Deliverables
In order to make it easier for the Sofvie team and us to distinguish between the issues, I color-coded the points. Then, we had a meeting with the client and two other lead designers from Sofvie and presented our findings in a Figma file to them. Later, I gathered this information from my team in order to share it with the client so that other individuals from Sofvie can also refer to it.
Addressed- Conduct a thorough audit(UX and performance) and analysis of the website to identify any issues.
Addressed- Provide possible solutions alongside the issues.
Week 03
Prototyping & Redesigning
After the website audit now was the time to implement the information gained from research, competitive
research, and audit into our design and design decisions.
By gaining this information, we will be able to come up with the best solution when designing the website. In order to narrow down our design process and decision, I met with the client to discuss what he is hoping to achieve from the design and what the primary objective of this page is. The client mentioned the following design constraints for the page:
He wanted us to redesign the homepage
The user should be able to find and gain the information needed from the page.
Users should be easily able to book a demo.
BEFORE WE START...
The client provided us with a copy of Sofvie's brand guide, which greatly assisted in the design. As each of us designed a section of the homepage, I suggested setting some ground rules so that our designs and elements were consistent.
- We decided to stick to the Sofvie brand colors
- We changed the size of the header and body text since the size in the brand guide and on the website was too small.
- We choose the same frame to design
- In our design, we will use similar imagery and icons as the website
LET’S DESIGN!
Below are the before (before redesign) and after (after redesign) images of the homepage
BEFORE
AFTER
- Enlarged Demo buttons, indicating the primary function/goal of the page.
- Using lighter color background will reduce user feeling overwhelmed or clustered.
BEFORE
AFTER
- Relocated the 'Who we are' video to the About page.
BEFORE
AFTER
- Make sure the text passes the contrast test.
BEFORE
AFTER
BEFORE
AFTER
- Additionally, we added images of the people to make the section easier to scan and understand
BEFORE
AFTER
- Incorporated a micro-animation by creating a carousel.
BEFORE
AFTER
BEFORE
AFTER
- This version is more readable and cleaner
- On the right, I have added a preview section so that users do not need to visit the page to see what it is about.
BEFORE
AFTER
- Additionally, we have added an industry section to the homepage.
- In this section, users can find out how Sofvie is doing in their respective industries.
We ensured that there were no grammatical errors or extra spaces
For the text, we used a font size that is sufficiently visible (body-18px, header-32px)
Depending on the type of text, we used fixed font sizes and weights.
Week 03 Deliverables
During prototyping, we tried to address all the recurring issues raised during the audit. After prototyping, we met with the client to conduct a design critique session. We shared our designs on a Figma file and presented them to him. As a result of the client’s feedback, we made minor changes to the design and proceeded to the testing phase.
Addressed- Redesign the homepage.
Addressed- An increase in demo bookings.
Week 04
Usability Testing
Having identified the primary objective, it was time to create the test script, which I created in collaboration with my team. During the testing of the homepage, we will be focusing on the following tasks:
- Take a scan of the website. What do you feel about the page?
a. Do these sections make sense to you?
b. What do you think clicking on the "see more' will do?
c. Out of the 12 features, which ones do you care about the most?
d. How would you interact with the industry section? You want to know how Sofvie’s product works in the oil industry. How would you learn that?
After scanning the page, Are you able to find the information you need?
- What do you look for on a page to trust the page or product?
- How would you fill out the form/ Book demo?
After receiving feedback from stakeholders (clients), it was now time to test the usability of the homepage(we designed) with the users. In order to move forward, we met with the client to discuss Sofvie's homepage goals.
Two crucial tasks that users should be able to accomplish from the homepage are accessing and gaining the necessary information and easily scheduling a demo.
BEFORE WE START…
A list of points to consider before conducting a usability test.
Note:
- We obtained permission from the client and the company management to contact real individuals for the test.
- Our connections and social media channels were only able to connect us with two users; therefore, we asked the client to connect us with three additional individuals.
Usability Testing TAKEAWAYS
Week 04 Deliverables
Our usability test was a success, as the users were able to complete all the tasks without any issues. On the day of the testing, I sat with my team and merged our prototype frames to create our now homepage.
Although users were able to finish all the tasks, there were a few suggestions from the users which we will be implementing next week on the design.
Week 05
Final Iteration
In light of the feedback we received from the users during the usability testing, we iterated our design further. Here are some of the minor changes in our design:
To demonstrate the effectiveness and success of the software, users wanted to view statistics.
ISSUE #1
Looking at statistics will create transparency (a brand attribute) between the company and its customers, which will increase the confidence of the users in the product. Hence, we selected the most important aspects of EHS software (derived from initial industry research) and incorporated them into a statistical graph.
SOLUTION #1
ISSUE #2
Would like to view all of the product's features at once
SOLUTION #2
Initially, all features were displayed in carousel
BEFORE
AFTER
ISSUE #3
Icons in the bottom navigation band are inconsistent
SOLUTION #3
Made sure the icons were consistent and all the elements were aligned.
BEFORE
AFTER
What to do next?
The project may have been finished, but additional efforts are required. We have presented our work to client and the design team and they are now collaborating with his development team to implement the modifications to their website. If I had more time, I would like to improve the chat support assistance on the page, as it appears to be a bot that is very slow and the prompts are poorly designed. I have already discussed this with client and given him a few suggestions for making it more user-friendly. Furthermore, Sofvie recently began a podcast, for which I would like to design a social media page for the website.
Lesson Learned
The team successfully redesigned the website's homepage. Client appreciated our teamwork and work. Here are a few things I learned:
- Be platform flexible
It was a great learning experience for me since this was my first website project (all my prior projects were mobile).
- To adapt is to move ahead!
During my IDP, I adapted to the EST time zone in my routine so that I could keep in sync with everyone since I was in PST and everyone was in EST.
- Patience and perseverance are the keys
On our final usability testing day, we encountered some difficulties merging the hi-fi frames. But I remained calm and persevered and came up with a working frame which was used for the testing later in the day
- Communication is your ticket to success if you pay attention and learn to do it effectively.
It was the open communication within the team that enabled us to achieve the project's milestones.