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.
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.
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.
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.
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.
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.
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.
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.
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.
Changing with specific images applicable to each industry, I improved the applications section for the user to identify them intuitively.
Adding categories, authors and thumbnail images on the article cards, I redesigned the former layout of the article with only texts.
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.
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.
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.
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.
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.
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.