Redesign Onix Website

Corporate website

Team: Onix AS
My role: UX/UI Designer

Onix.com is to help customers learn about Onix's core product - Onix Work - as well as an efficient tool to support customers, also up-to-date the upcoming releases and events of the company.

Background Information

Onix is a technology firm, offers software solutions to clients in the lifting industry in Scandinavian. The onix.com mission is to afford every buyer with confidence when buying and using Onix Work application. The company wanted to develop a clear UX strategy for Onix Work that provides its target users with real value and instant support services.

Project Brief

"Redesign the Information Architecture (IA) and key pages layout/wireframes of Onix Work website. Especially focus on Onix Work product."

...

Process

Project Research > Competitor Analysis > User Personas > Sitemap > Wireframe > Prototype

Project Research

Become Familiar with the Content

At the very first step, it's important to inspect the website asset that's available to understand business context, project requirements and what needs to be improved. Taking this as the valuable materials, I walked through the current site page by page and pull out all the content. This way, I can figure out what content is crucial, what content should be reinstruct. I typically start with the main navigation and keep going down to get overall.

Keys finding:

• The current site was so generic. Like an informative site, it had not focused enough on the company's key products which were the most important.
• Weak IA. Most links were not accessible through top navigation and were hidden within the content.
• Limitation of CTA buttons. The website just displayed one CTA only on a few pages. It made users confuse sometimes and didn't know what they can do next.

By talking to various people on the team, I was able to get a better picture of the project’s scope, identify the website focus, workflow, content, and features. From there, we came up with the following core types of content (some new, some existing):

User personas

During the research I identified two different scenarios that kept my focus and developed the following:

• Scenario 1.
  Returning users - around 270 client companies in total - who are using Onix Work and know how it works, want to find more plans & pricing, FAQs, new releases and support information.
• Scenario 2.
  New users - who don’t know about the product, want to learn more, book a demo or give a try.

Following that, here are two appropriate user personas:

Pain points

1. Unclear Message. In general, users don't get much information about the product that website is offering at first glance.
2. Confusing Information Architecture. The navigation as well as the content was displayed does not align with the way users really look for information. They don't know where to start and how they reach to their goals.
3. Difficulty In Finding Help or Support. In general, users don't get much information about the product that website is offering at first glance.

Design

Sitemap

The first thing I did was look at the content that will be shown on the website and see how everything is structured.
I aimed to create a sitemap that has a shallow depth, meaning it only takes three clicks to navigate to any page on the website. That’s much better for users to find information easily. So producing a hierarchy of pages based on primary content with a logical flow was my priority.

Wireframe

To make sure the page content and functionalities are positioned correctly based on user and business needs, besides that let the project moves forward I had created and used these layouts as the good samples between members of the project team to agree on the project vision and scope.

1. Provide the Home page with a clear goal.

Product key features, more practical CTAs, Amazing results in numbers, or Customer reviews were added to stimulate trust and establish the company expertise. It also shows new visitors to what the company's doing and provides key insights to their products or services. It helps to inspire a positive first impression.

2. Improve & Rebuild layout structure for two main pages: Product Features and Support.

Features covers the functionalities of the product that a visitor to the site can learn about and consider to their needs. The idea is that an average user might not know the services the company provides, but they can quickly scan the important information or watch the videos right below of the page as well.

Support focuses on addressing customer common questions about the product, it acts as the first point of contact for customers looking for answers before they reach out to the support team directly. Additionally, this page can benefit customers at different parts of the purchasing journey - whether they're in the consideration phase looking to understand how the company builds the user guide or follows up troubleshooting. In the old site, the company handled it separately, as an external site for Support. In this redesign page, I kept it in the same system and structured layout in a relevant order, grouped by categories or appropriate features.

And here are the remaining layouts for the web.

Visual Design

Following the wireframes, I created the polished design mockups with proper alignment, size, color, and suitable imagery. I used exact whole numbers of pixels for demensions as well as the position of the objects. It helps the website looks sharper, cleaner and more consistent.

...

What I learned

• Understand the basics. Website design is focused on arranging written, graphic, and visual content into well organized web pages. The best website design makes this content easy to access, navigate, and understand.
• Create informational hierarchy. Organizing information in a way that makes sense to the users so it can increase navigation usability and users can understand and find information easily as well.