MockupV9.2
Overview
Problem
Research & Analyze
Designs
Solutions
Results
Conclusion

Una - Redesign Company Website

My Role:

UI/UX Designer,
Developer

Platform: 

Responsive Website

Tools:

Figma, Illustrator, WordPress

Timeline:

Oct 2021 – May 2022

Overview

This project is focusing on revamping the company website of Una Technologies Limited to let our customers better understand our products value and start their free trail. When target customers browse our website, they don’t really understand what is the product and how can it benefit to them. Thus, I conducted user research, competitive audit, iteration design to modify layouts and visual design of the website.

My role

I was the only designer in this project, and worked with cross-functional teams that included product manager, 2 marketing and 2 developers. As I have a basic concept of programming, I also have some responsibility for front-end development.

Problem

😵‍💫 Users get stuck while browsing our products

Messy Information Architecture

Less relevant content in some pages that confuse users

No Defined Journey

Unclear user experience leads to frustration in users

Lack of Visual Guide

Unclear typography, layout and visual polish

Goals

🎯 "Improve conversion rates to increase sales"

User Goals

Teacher can find useful tools and resource to enhance their STEM teaching effectiveness

Parents can choose appropriate courses based on their children’s abilities

Business Goals

1. Enhance products value and attract more people to buy our products

2. Create a professional and international brand image

Research & Analyze

Gather pain points from customer services

I quickly tick off the design process by asking sales team about the most frequently question from the customers, and discussing with product manager about the product develop roadmap to understand the current situation. After that, I observed how user interact with our website..

Pain Points:

  • Hand to find the important information, such as course equipment and outcome.
  • Confused about the differences between courses and unable to choose the suitable course on their own.
  • Unable to discover and self-register for free trial lessons.

Conduct a competitive audit

After that, I did a competitive audit with both of our direct and indirect competitive, and get some design insights. I discovered their information architectures, layouts, features and visual guides, then written down what design ideas are useful to us.

💡 Insight

  • Positioning our unique value proposition: providing an all-in-one platform for AI education
  • Shape our brand image through professional and dynamic visual design and leave a good first impression
  • Provide intuitive course navigation for users to easily find course information and detailed content
  • Clearly demonstrate our diverse curriculum and suitability for students of all levels

Design Process

User flow with brief personas

Before I started designing, I met with marketing team to get the information for our existing customers, and also the frequent customer issues that they need to be dealt with.

Our two main target customers are STEM teachers and the parents with children who are interested at STEM. They discover and buy our products in different ways due to their different habits, educational backgrounds and needs.

Information architecture

After discussing with the product manager, we listed all our products and services and figured out what kind of information we needed to provide to our customers. Then, I reorganized the menu structure of the site by categorization, and arranged which pages would be appropriate for those information.

Create style guide

As our company is providing B2B and B2C educational service and product, showing a professional and lively image is necessary. Also, after referring some UI design guideline, I generate the following theme colour, font, button style.

Solutions

1. Use mega menu to replace traditional menu

Unclear categories and lack of visual design confuse users. By referring the previous re-organised website structure and other similar website designs, we generated a new menu bar.

At the same time, in order to clearly display a large number of products, a mega menu is used to make the design more creative and the display more flexible.

2. Homepage clearly showcases our products

On the homepage, the main purpose is to deliver the general concept of the company’s products and build trust with users. In addition to the introduction section on the platform and courses, we also provide numerical evidence of our accomplishments.

3. Redesign the web page layouts and IA

Subscription plans of platform and course

Through various styles and the motion effects, it is shown that the platform subscription is a basic core service, and the course subscription is an additional products that need to be used in conjunction with the platform.

Course description page

The first content section gives users the most important informations, include course highlight, brief introduction and price, etc. Thus, they can understand the content of the course quickly, and push them to take action to book a trial lesson.

View Live Website

Results

What did I influence and change?

Enhanced UX Understanding and Data Integration

Enhance company's understanding of user experience principles and integrate with Google Analytics to gain data-driven insights for future adjustments and optimizations.

Readiness for Advertising Expansion

Enhance company's understanding of user experience principles and integrate with Google Analytics to gain data-driven insights for future adjustments and optimizations.

Reduced Customer Service Dependency

Substantial decrease observed in customers' reliance on customer service support, indicating an improvement in user experience and satisfaction.

Conclusion

The thing I learned

  • Understand that design and marketing complement each other, learn to collaborate across departments, and let design ultimately contribute to business interests.

  • As I need to build a website with WordPress. This taught me to think like an engineer and think more about the executability of the design and the deployment process.

Next steps

 

  • Continue to receive feedback and improve: There are no perfect design, so keep receiving feedback and checking the interaction of the user will be useful for modifying the website.

  • To maintain and update the product pages: Since we will keep having new courses and updates, we will ensure information such as course content, prices are up to date.

  • Modify the menu and footer design: Menus and footers are an important part of presenting the structure of the website, so they need to be constantly revised as new courses or products are launched.dback from platform users.