UX / UI DESIGN

Re-Designing Cetaris.com

How improving and aligning the customer experience of Cetaris.com lead to a 12.5% increase in conversions.

Mockup design of Cetaris.com website
ROLE

User research, Ideation, Wireframe, Prototyping, User Testing, Illustrations

TOOLS

Sketch, Illustrator, Zeplin, FullStory, Google Analytics, Trello

DURATION

Nov 2018 - July 2019

Impact and results

The re-design of Cetaris.com led to a 12.5% increase in website conversions during the month of August 2019 when compared to the same time in the previous year. Since the launch, there has also been a 2.1% decrease in bounce rate, and an increase of 11.9% time spent on the website.

Problem

Through customer interviews, Fullstory sessions, and Google analytics, I was able to uncover various usability and design issues that occurred within the old Cetaris marketing website. Two key issues were a high bounce rate and low session duration.

Screen Shot 2019-10-07 at 10.16.01 PM

The landing page of the old Cetaris.com website.

When the user first lands on the website, it is not immediately clear what Cetaris does. The image does not add any value to support the content.

Furthermore, the information architecture was confusing for users to go through. New visitors were often confused by the product drop down menu.

Navigation drop down menu

 In addition, the design style was inconsistent from the rest of Cetaris products and many of the pages did not meet accessibility guidelines. All this ultimately contributed to a lack of conversions and meant that we were unable to meet the target business goal of 10 conversions per month.

Solution

The re-design of the Cetaris.com focused on three main aspects:

  1. Improve the information architecture and website accessibility.
  2.  Align the website design styles with the customer facing products that was already in place.
  3.  Revise website content by “showing” Cetaris products rather than “telling” prospective customers about it. For example, this means putting up more product mockups, and creating illustrations for users to feel more personal to the product. 
Team setup and role

I was situated under the marketing team with one copywriter, one illustrator, and a third-party developer. Every week I worked with the lead designer on the product team to get feedback and critiques for my work. 

My main role in this project included conducting user interviews, creating user flows, designing low and high-fidelity wireframes, collaborating with the developer to bring the designs to life, and QA testing for bugs. Some minor work I did involve creating hero illustrations for the industry page and creating product mockups.

Approach

In this project, my team and I used the Kanban agile system. We used Trello to monitor the progress of each task within the first release and prioritized the work based on how often users currently use each page.

Phase work deliverables

In the first release of the website, our goal was to re-design the home page, product pages and industry pages. The company page would be left alone until the next iteration. However, what I eventually came to realize was that based on the required time completion, I was not able to fully re-design the industry pages and the product page (i.e. including the necessary mockups and illustrations to support my final designs).

Phase 1: User Research

I looked into some of the issues Cetaris.com faced by interviewing three new customers who were stakeholders in the decision process during the hunt for maintenance software. In the research session, my main goal was to improve the information architecture of the website, understand the mindset of prospective customers during the buying process and see what they valued in a maintenance software. 

In the past, the content on the website was structured around what the internal team thought customers valued. They used terminology based off of their experiences working with Cetaris products and customers.  

By analyzing various FullStory sessions, I discovered that navigating the website appeared to be confusing because of the way the content was structured. Thus, in order to improve the information architecture of the website, I created a card sorting exercise for the participants to rank what they valued under technology and services in a maintenance software. 

Everyone that I interviewed said they valued a quick ROI as one of the top priorities when evaluating a maintenance software. Furthermore, all participants reported that having a versatile and mobile experience within their maintenance products is extremely important to them. In addition, the participants preferred being shown the product solutions rather being told in words and stock images. All this information later informed the design choices I made in the re-design of Cetaris.com. 

Card sorting exercise
Phase 2: User flows

Based off of the information that was compiled from the user research sessions, I created the buying flow of prospective customers. This helped me further understand their motivations and where people may be dropping off in the buying process before they request a demo. 

User Flow of Cetaris
Phase 3: Draft concepts, low-fidelity & high fidelity

After compiling user interviews and user flows, I started to plan out the structure of the website through various sketches.

Sketch and wireframe of a website

Based on what users valued in a maintenance software, I organized the content within the home page to focus on showcasing how customers can get their ROI through Cetaris. While initially I had incorporated an ROI calculator within the home page of my designs, we later decided to move it into the second release because of time constraint.  

Responsive design was really important during the re-design of the website. In the past, on mobile devices, the text was hard to read and did not meet accessibility guidelines. Furthermore, the speed of the website was slower to load on mobile, meaning a delayed experience and often times a bounce.  

Phase 4: User testing and refining

I set up and ran basic test sessions of the website designs to see if users are able to navigate the website. After having 5 people go through the prototype, most found it easy and intuitive to find the information they need. They all thought the increased text size helped with readability compared with the old website.

Phase 5: Development & QA Testing 

With my colleague, we worked with a third-party developer to bring the finalized design concepts to life using Zeplin. We communicated once a week to check in with his progress and documented any issues we caught within an excel sheet. 

After development of the new website completed, I ran a company-wide QA testing session in order to see if there were any last-minute bugs or usability issues. Through Google forms, I created questionnaires for each tester to fill out based on various information. This included the device type, operating system type, and browser type they were using. Then the questions asked about any problems they encountered within each page of the website.


Phase 6: Final Design Release  

The home page was designed with a focus on what visitors were looking for in a potential maintenance software. The content and supporting illustrations were a direct result of the user research sessions I conducted with new customers.

According to psychology reports, social proof was also important in the buying process. People want to know who else has used our products.  I moved the customer logos from the bottom of the page to the top. I also utilized quotes we have received from customers in the past to help reinforce the content. 

Screnshot of website showing quote

This is a section of the home page content explaining the high-level key concept that is supported by a quote from one of our users.

In the navigation section, I decided to split our browser products from our mobile apps to create a sense of hierarchy. From there, instead of providing the name of the app, we kept it to simple searchable terminology that someone not familiar with our products can discover.  

Navigation products bar

The new drop down menu makes clear differentiation between the various products.

I added an extra contact section to the bottom of the home page in order to create a natural transition for customers to request a demo.

In the user research sessions, I had participants group images of different assets together and have them label what they think each group of assets would be referred to. Going into that session, my assumption was that calling mechanical parts within a distribution center “fixed assets” would confuse first time visitors. Through those sessions, I was able to conclude that the best terminology would be to use “facility assets”. Therefore, I used that terminology to guide potential customers down the funnel. 

Two buttons with images asking which type of asset a user has

This was created to guide users to the right products they seek.

In the card sorting exercise, many of the participants, said they valued a high return on investment when they were looking for fleet maintenance software. Therefore to showcase our value to prospective customers,  I designed a ROI calculator showing the warranty returns a company can get by using our software.

ROI Calculator
ROI Calculator mobile
Challenges and key takeaways

Over the course of the project, I faced many challenges. During the research phase, I discovered it was difficult to find prospective customers to interview that was within our niche (maintenance software) and who held upper management roles. Therefore, the second-best option was to speak to new customers who recently converted through our website.

 Another challenge I experienced was balancing the needs of SEO and content with user experience. In the old website, most people ended up skipping over a lot of the content because it was overwhelming to consume. I tried to make it fix that issue by working with the copywriter to reduce the amount of copy that was shown to users. In the end we had to compromise between having a specific amount of content for SEO and searchability purposes. 

Working with a third-party developer also provided a different set of challenges. In the beginning, I only tracked his changes internally in Trello. But very soon, I found that he did not always follow the specs in my design. He copied the code from the last website instead of starting on a new slate, which often meant going through the CSS and explaining the specific the type size I was looking for. After asking repeatedly for the same design to be changed on the website, my team and I decided to create an excel sheet to document his progress and report any bugs that were encountered.  

Other Work

VaxUX / UI Design

Re-designing Cetaris.comUX / UI Design

PortrProduct Design

XestoProduct Design

Ethereal MagazineBrand Identity

Boston Children's MuseumBrand Identity