Qeexo
Responsive Web

Timeline
July - August 2020
(1 Sprint, 2 weeks)
Role
Responsive Web,
UX/UI Design
Platforms
Desktop
Company
Qeexo
1.1
Overview

With its machine-learning solutions, Qeexo analyses sensor data to provide actionable insights. In my role as a product designer enrolled in R U FREE, I was responsible for the redesign of Qeexo's WordPress-based responsive website.

I combined two separate websites with refining poor usability, revising the structure of the sites, and redesigned the entire web page using collaboration tools, which facilitate two-way communication, despite 18 hours time difference between Sydney and San Francisco.

2.1
Design Sprint

My first step in maximising the 2-week sprint was to analyse the shared SOW and the previous websites before meeting with PM from Seeso. The purpose of preparing a better sitemap and competitive analysis ahead of the kick-off meeting was to clearly understand the client's needs without wasting the meeting.

To iterate feedback and revision quickly, I designed desktop pages of Lo-fi and Hi-fi wireframes first and then began designing the responsive website, considering mobile as well, after rebranding Qeexo with improved colours and fonts.

Communication - which will be discussed in more detail later - was handled via collaboration tools, and each page was numbered into 14 templates to make gaining feedback easier.

3.1
Problem Space

Qeexo wanted to combine two separate websites - the company's introductory and its product websites - into one, which was not providing a seamless user experience before.

1. Users had to understand the company's business by exploring the two websites alternately.
2. Landing page did not clearly state what the company is providing.
3. There was no CTA button and no indication of what actions users should take on the website.
4. Overall, websites use a lot of text as a basis and there is a lot of unnecessarily repeated information.

4.1
Approach

Understanding the sitemap and improving the overall usability

As a first step, I organised a sitemap to identify the current problems with the previous website. Working through this, I gained a deeper understanding of Qeexo's problems and saw opportunities for improvement.

4.1.1
Navigation Bar

In reviewing previous navigation bars and regrouping and renaming unnecessarily separate pages, I redesigned the navigation to highlight key products and the industry.

4.1.2
Footer

Instead of putting it on the navigation, I suggested moving it to the footer and grouping it with Press, Career, and Support under the category of 'Company'.

4.2
Approach

Competitor/ Comparative Analysis

Before wireframing, I conducted competitor research in related industries and identified repetitive landing page patterns.

4.2.1
Navigation and CTA

Calls to action (CTA) are sentences, phrases, or words that urge users to take specific actions. As a common design pattern, it appears as a button on a web page.

Furthermore, it is crucial to generate more conversions by persuading users with a powerful tone. CTAs are often placed in both the navigation bar and at the top of landing pages so that users can access them from anywhere.

4.2.2
Partners & Testimonials

The landing page also displays their partners at the top, followed by testimonials in the middle.

Qeexo's past website had a separate page that only introduces partners, which I believed it was an unnecessary page. Therefore, I suggested to the client that it would be improved by deleting the partner page and displaying directly their logos at the beginning of their homepage instead.

5.1
Wireframe

Iterating the process of creating wireframe and gaining feedback to enhance the design rapidly

Based on the discussions from the kick-off meeting, Lo-fi and Hi-fi Wireframe on the entire pages were shared, which facilitate to receive feedback instantly for confirming wireframe. By using Zeplin and Trello, I reported what I had revised and requested which specific parts needed comments.

6.1
Improving branding systems

Colour

While maintaining the previous brand colour tone, I proposed the new colour scheme to the client by refining the overall chroma and applied on the landing page as a sample draft, which enabled me to convey the improved colour more convincingly.

6.2
Improving branding systems

Typography

I applied Sora for the title font, which is a rounded typeface that harmonises more with the Qeexo's logo, and used Lato for the descriptions, which pairs popularly with it. Typography systems were established responsively for both desktop and mobile device.

6.3
Improving branding systems

Components

In addition to designing the components of the navigation bar and CTA buttons for the desktop and mobile device, I transformed the bar on the desktop into a side menu on the mobile with the Free Trial button so that users can access the button through it no matter where they located.

7.1
Design Solution

Landing Page

By entirely restructuring the landing page to be more persuasive to customers, I've improved the conversion rates on their website and helped their sales to new customers.

Home

The previous design had no clear emphasis on what the company do by displaying various products with the image slide.

Therefore, I improved the first screen with CTAs by expressing the headline in one sentence and inserted promotional videos on the right upon clients request.

Partners

The partners' logos were placed as a single-line at the top, reducing the unnecessarily occupied space before.

Diverse companies are displayed through the automatic interaction effect.

Product information

I revised the product introduction, which was previously divided into 3 different subjects with lengthy texts, as a condensed single section presenting a strategic product.

Applications

Changing with specific images applicable to each industry, I improved the applications section for the user to identify them intuitively.

Blog

Adding categories, authors and thumbnail images on the article cards, I redesigned the former layout of the article with only texts.

7.2
Design Solution

Auto ML Page

The primary task on the page describing the principal product, Auto ML, was to combine the two pages into one. The solution was to convey the visually appealing and summarised information, which was being expressed unnecessarily in two pages on former websites.

Product Information

By utilising relevant graphic images with each subject, I delivered the critical feature of the product more intuitively to customers rather than screenshots of the actual product whose colour tone does not match anymore with the revised one.

Features

While remaining the layout of using icons as before, I applied the new brand colour and arranged them with a small card format so that the user can understand the aspects at a glance.

Challenges & Solutions

To revise the former design, which takes up a lot of space with lengthy text, into one screen, I selected key features and graphically visualized Challenges, Solutions and Benefits.

This graphic makes it easy for the consumer to see the effects of Qeexo's products intuitively.

Responsive web

As it is inefficient to duplicate the graphics to the mobile as well, clients required me to modify it with a colour gradient, excluding graphics such as arrows while remaining design consistency on the mobile.

Workflow

For the reason that the previous workflows occupied unnecessarily the large space, I improved it putting them into one screen by letting a user interact with the process, clicking upon the buttons step by step.

CTA

While maintaining the layout of the previous design, I applied the new branding system, matching the overall design tone.

7.3
Final Outcome

14 Templates, 45 Pages

This project was completed by designing 14 templates and 45 pages corresponding to desktop and mobile. I was able to experience the overall design process ranging from planning the content of landing page to company introduction such as About, Career, and Support.

8.1
Communication

Although there were a tight schedule and 18 hours time difference, the project was able to carry out smoothly with a product manager at Seeso and by actively utilising the advantages of the collaboration tools including Trello, Slacks, Figma and Zeplin.

9.1
Reflection

When I first got offered this project, I hesitated to accept it due to the tight schedule. However, I desired to solve the clear problems of the previous website and find it enabling me to grow through a new project.

Even though the clients were distant, we iterated as quickly as possible so that successfully I was able to ship the renewal project within two weeks. There's certainly a lot that could be improved such as interaction or detail design, but it was a great experience to work on the entire websites' redesign process.

Receiving positive feedback from the clients, I'm excited to be a part of this journey and see the impact of my new design applied to Qeexo.

Explore more projects
byb
2019 - 2022
Product Design
Mobile app
E-learning game