Qeexo
Responsive Web

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

Qeexo develops machine learning solutions that generate actionable insights from sensor data. As a product designer enrolled member of R U FREE, I was in charge of the renewal design of the US client Qeexo's WordPress-based responsive website.

Despite 18 hours time difference between Sydney and San Francisco, using collaboration tools, which facilitate two-way communication, I combined the previous two separate websites into one with refining poor usability, revised the structure of sites, and redesigned the entire web pages.

2.1
Design Sprint

To get the most out of the 2-week sprints, I analysed the shared SoW and the previous websites first before a meeting with PM from Seeso. By preparing improved sitemap and competitive analysis in advance of the kick-off meeting, I wanted to clearly understand the client's needs without wasting the meeting opportunity.

In order to iterate feedback and revision quickly, I designed desktop pages of Lo-fi and Hi-fi wireframe first and started GUI design of the responsive website considering mobile as well after rebranding Qeexo with improved colour and font.

When it comes to the communication — which will be mentioned more later — I utilised the collaboration tools, and I referred each page by numbering into 14 templates, making it easier to gain design feedback without hassles.

3.1
Problem Space

Qeexo wanted to combine two separate websites — company introductory and strategic product websites — into one, which have not seamless user experience.

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 emphasis on what actions users should take on the website. 4. Overall, websites consisted of lengthy text as a basis and there is a lot of unnecessarily repeated information.

4.1
Approach

Understanding the sitemap and improving the overall usability

The Onboarding procedure will guide you to start with creating an account while explaining the key features and methods upon how to use this app. You can easily sign up through the onboarding flow or log in through your favourite social media accounts such as Facebook and Google.

4.1.1
Navigation Bar

While examining the navigation bars of previous websites and regrouping and renaming pages that were unnecessarily separated, I redesigned the navigation towards highlighting key products and the applied industry.

4.1.2
Footer

Rather than showing it on the navigation, I suggested to the client that the introduction of the company itself such as About Us should be moved onto the footer and grouped into the category of 'Company' with Press, Career and Support pages.

4.2
Approach

Competitor/ Comparative Analysis

In advance of wireframing, I conducted competitor research in related industries and found repetitive patterns on landing page.

4.2.1
Navigation and CTA

Call to action (CTA) is a sentence, phrase, or word that makes users take specific actions. It appears in the form of a button on a web page as one of the common design patterns.

Additionally, it is the most important elements enabling to generate more conversions with a powerful tone to persuade users. CTA is usually located both in the navigation bar and at the top of the landing page so that users can access it from any page.

4.2.2
Partners & Testimonials

Another design pattern I observed was that they expose their partners at the top of the landing page and insert testimonials in the middle of the landing page.

Qeexo's past website had a separate page that only introduces partners, but 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

The Onboarding procedure will guide you to start with creating an account while explaining the key features and methods upon how to use this app. You can easily sign up through the onboarding flow or log in through your favourite social media accounts such as Facebook and Google.

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.