Una - Redesign Company Website
My Role:
UI/UX Designer,
Developer
Platform:
Responsive Website
Tools:
Figma, Illustrator, WordPress
Duration:
6 months
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 journey 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.
Results
What did I influence and change?
Enhanced UX Understanding and Data Integration
Enhanced company's understanding of user experience principles and integrated with Google Analytics to gain data-driven insights for future adjustments and optimizations.
Created a design system to enhance cross-platform consistency
Established the first design system, enhancing design consistency, accelerating development, and improving collaboration between design and engineering teams.
Reduced Customer Service Dependency
Substantial decrease observed in customers' reliance on customer service support, and most customers can book free trial classes or request demonstrations on their own.
20%
Platform users increased by
in one year
Conclusion
The thing I learned
Next steps
Other projects
Mentoring Platform
