Elevāt Website Redesign and Development

Redesigned and developed Elevāt's official website to improve overall navigation, scalability & responsiveness

Elevāt is an industrial IoT startup company focused on bridging the gap between the industrial ecosystem and digital data to increase utilization, output, and uptime of machines.

Quick glance at the new website stats (2020 vs 2021):
1. New users were increased by 10.74%
2. Unique pageviews were increased by 135.20%
3. Pages/session was increased by 132.79%
4. Average session duration was increased by 48.33%

My Role
Web/Graphic Designer, Video Editor

With
Adam Livesay, Jeff Baumberger, Lisa Dreher

Year
2021

For
Elevāt

Approach

Planning

Analyze the old website
Set goals
Look for inspirations
Create sitemap (consider scalability)

Design

Provide outline for content writer
Wireframe
Fill in content & iterate on the design
Design graphics

Build & Testing

Build website in Webflow
Iterate on the design & interaction
Design & testing on different screen sizes
Set up website tracking (Hotjar, Google Analytics, Pardot)
Set up filters for bots

Evaluate & Maintain

Collect & implement feedback
Replace static images with animations
Maintain & iterate

Expand Menu & Animated Banner

Users need to make an extra effort to view more pages from the collapsible menu, and it's not scalable, so I expanded the menu and added drop-downs to group more pages.

I also replaced the static banner image with animated videos, showing how Elevāt's application was used in practice.

Heatmap From Hotjar (A Website Tracking Tool) of the New Navigation

Target Personas' Pain Points & Add Informative Graphics

Elevāt mainly targets two groups of users: Original Equipment Manufacturer (OEM) and Fleet Owners. These two personas have different goals and pain points. Therefore, we have a total of six value propositions that target two personas (three for OEM and three for Fleet Owners).

Unlike the old website, we dedicated six pages to dive deeper into each value and showcase how Elevāt's products can help them achieve their goals.

For the product intro image, instead of stock images, I edited the image to be more informative and connect to Elevāt's products.

Detailed & Downloadable Use Cases

Use cases show how the Elevāt's application behave and being implemented in different industries (forestry, construction, etc.) This information is particularly useful for visitors because they can relate their own situations to the particular use case and see how Elevāt can help them. Therefore, instead of a section on the home page, we dedicated a page that linked to several use cases (currently writing up more).

The industrial industry is a slow-changing industry that still uses paper printed documents most of the time; therefore, the pdfs allow customers to have it whenever they need it.

Show Don't Tell

According to Nielson Norman Group, users often leave the webpage in 10-20 seconds. It's important to catch users' attention within this short period. Therefore, I replaced the chunky text with bullet points on the product page, which are more concise and easy to read. I also created animated videos that are more visually appealing and can hold users' attention longer.

Screenshots from Google Analytics (2/25 - 4/6 VS 4/7 - 5/17)

Responsive Web Design & Optimization

23% of visitors are viewing Elevāt's website on mobile devices, and the percentage is still growing. I modified the design to make sure the contents can adapt to the different screen sizes and chose fixed or relatives sizings for each element.

Webflow Breakpoints (Use to Design for Responsiveness)

I tested Gifs, MP4, and WebM formats to improve the video optimization and found out the WebM format has the fastest loading time, smaller file size, and the best quality.

Testing Video Loading Speed (Gifs, MP4, WebM)

Reflection

Set Up Tracking & Learn to Understand Numbers
As a designer who values a lot about data and numbers, I set up Google Analytics, Hotjar, and Pardot to track the website's traffic. I love seeing how my design directly influences users' interaction with the site and how I can improve it through understanding the numbers and watching the website's sessions recordings.
‍
Design with Intentions - Iterate, Testing, Iterate, Testing
It's important to design with intentions: how I want users to navigate through the site and how can I use visual hierarchies and interactions to reinforce my intention. I constantly iterating and testing new designs as I learned more about users' behaviors.
‍
Learn New Tool for the Better Outcome - After Effects
During the soft launch stage of the website, I realized the details on the static mockups of the application were too small to see, and therefore, didn't provide valuable information about the products. I decided to learn After Effects and replace the mockups with short animations, proving to be more effective and informative.

Things Can Be Improved:
1. Further blocking bots' submissions that have the same first and last name (let me know if you know anything that could help)
2. Add customers' & partners' quotes to increase credibility
3. Improve Search Engine Optimization (SEO)

More Projects

UX & UI Design • 2020

APiJET Aircraft Turnaround Management

UX & UI Design • 2021

Finana — A credit building and financial goal planning app