UX / UI DESIGN
How improving and aligning the customer experience of Cetaris.com lead to a 12.5% increase in conversions.
User research, Ideation, Wireframe, Prototyping, User Testing, Illustrations
Sketch, Illustrator, Zeplin, FullStory, Google Analytics, Trello
Nov 2018 - July 2019
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.
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.
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.
In addition, the design style was inconsistent with 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.
The re-design of the Cetaris.com focused on three main aspects:
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.
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.
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).
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 on 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 than being told in words and stock images. All this information later informed the design choices I made in the re-design of Cetaris.com.
The sitemap was created to show how we want to funnel traffic with the end goal of converting a prospect.
After compiling user interviews and user flows, I started to plan out the structure of the website through various sketches.
Based on what users value 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 constraints.
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.
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.
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 the 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.
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.
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.
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.
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 an ROI calculator showing the warranty returns a company can get by using our software.
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 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.