Qeexo
Responsive Web
Timeline
July - August 2020
(1 Sprint, 2 weeks)
(1 Sprint, 2 weeks)
Role
Responsive Web,
UX/UI Design
UX/UI Design
Platforms
Desktop
Company
Qeexo
Qeexo uses machine-learning solutions to analyse sensor data and provide actionable insights. I was tasked with redesigning Qeexo's responsive website, which is based on WordPress.
I merged two separate websites by improving their usability, restructuring their layout, and redesigning the entire web page. I used collaboration tools to facilitate two-way communication, despite an 18-hour time difference between Sydney and San Francisco.
To optimise the two-week sprint, I reviewed the Statement of Work, studied past websites, and met with Seeso's Project Manager. I prepared a sitemap and conducted a competitive analysis before the kickoff meeting to understand the client's needs efficiently.
I designed Lo-fi and Hi-fi wireframes for the desktop version, then created a responsive website with improved branding. Communication utilised collaboration tools. For feedback, pages were organised into 14 templates, to be discussed later.
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.
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.
In reviewing previous navigation bars and regrouping and renaming unnecessarily separate pages, I redesigned the navigation to highlight key products and the industry.
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'.
Competitor/ Comparative Analysis
Before wireframing, I conducted competitor research in related industries and identified repetitive landing page patterns.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
