Web design for UE education

A client case for designing company’s logo, design system and web page mock-up

Responsibility
Logo, visual composition, UI design
Duration
2 months
Tools
Figma, Webflow, Photoshop, illustrator, Mockitt, Zeplin
Team
3 UX/UI designers 1 client 2 engineers
Final output
Live preview

Overview

"What is UE Education?"

UE Education is a student service based in Hangzhou, China that provides students who need to study abroad with with guidance and helps them complete their applications for the top Canadian universities.

Client's goal

The client's goal consists of mainly 4 requirements, which are as follow:

  1. Create the website in English
  2. Design the company's logo
  3. Mock up web pages for the main user flow
  4. Create design system for the website

Talking to students

"Surveys & interviews from 45 students"

In addition to the 15 students that our client found for us, we gathered 30 more student participants from the Internet, all of whom expressed desire to study in Canada. In total, we have 45 students with whom we conducted 2 rounds of interviews.

The first round was a simple survey whose main purpose was to show students several competitor's websites, screening out the websites that students feel most comfortable with and want to read.

The second round was a zoom interview conducted to understand the reasons behind the participants' preference for certain websites by looking at the way they interacted with the websites and speed at which they scanned them.

Key user stories

Following 3 rounds of user interviews, we were able to understand what motivated students to look at the websites and what factors prevented them from reading on. This allowed me to identify 3 key user stories.

Early explorations

"Logo design"

The design of the logo is divided into 3 steps:

First, I designed the graphics and narrowed them down to the ones that related most to the universe.

Second, I designed and tested the three colours that I selected for in the early stage: Yellow, blue, and green.

Finally, I framed the graphic into a square along with the logotype.

‍

"Design system"
  1. Color:

For colours, we started by a round of research and screened out the symbolisms that matched the company's values. After that, we backed it up with a round of user research on the colors that were chosen, including the emotions attached to the 4 colors, followed by performing a color analysis of competing websites.

  1. Typography

For type, we mainly considered 5 elements:

  • Which personality does each font represent?
  • What moods and feelings does each font bring to the audience? What's the meaning does the font add to the context?
  • What are the fonts used on the competitor's website and how do users feel about them?
  • What inspired the different fonts?
  • Which font matches most closely with the company's branding

Preview the Mock-up

View final output

Last version of our design system

“Color, typography, grids, and logo”

After more than 20 rounds of iterations and constant communication with our client, we determined the color palate, typography, and grids in our design system.

During the logo design process, we also finalized the colour for the type and graphic of our logo through repeated testing. In the middle of it, our client felt that the Chinese logo would be better suited for the company's branding, so we decided to test out 10 iterations of Chinese fonts and finalized on a version. Moving on from the logo and design system, we then worked on the navbar and footer.

Low-fi

Brainstorming

My 2 team members and I begun by collaborating in Figma to create a low fidelity version of the Home page along with the other pages. While working on this, we first ideated on the sections of the home page that were most needed by the users.

Design iterations

Then, using what we learned in our brainstorming exercise, we took away things that did not belong to the Home page, narrowing down only to the essentials and refining our low-fi wireframes.

In the process of creating low-fi wireframes, we made multiple design iterations and adjusted the things that go on the home page several times. The reason for this is to test and find out which of the sections to simplify and which section to prioritize showing. In particular, we touched on Student Success Stories and Service Process.

In the adjustment process that followed, the client proposed ideas that were different from ours. Although our client felt that the section Meet Our Team should be prioritized above the fold, our research found that students—our users—are more concerned about the different kinds of services that the company offers. For this reason, we decided to put Service Process near the top.

For iteration 1, 2, and 3, we designed different landing image structures and added more details to Service Process.

Following our 3 iterations, my team and I met with our client where we agreed to place the Why Us section second and plan for more iterations for  Service Process.

In our 4&5 iterations, we made changes on the navbar based on what we heard in our user interview: Some users thought it'd be a good idea to have a search box to help them find what they want faster.

Through our iterations, we have made major changes to the order and design of Home page sections. In our last iteration, we also added a phone icon to the navbar to make it easier to identify and recognize the Contact button.

We communicated with our client through voice messages on what we needed to modify and what we had worked on and completed. Down below, green shows the goals we achieved, red shows things that need to be edited/removed, and yellow shows items that needed attention (or more iterations on).

Moving to high fidelity

Taking our design to the next level, we revised our design system by applying our colour palette. In our high fi designs, we conducted an additional round of user testing based around real content that our client provided us for Home and About Us, where we observed the users' browsing habits upon landing on the website and found that they had difficulty reading the current layout. We worked on 4 more iterations after that.

In the version that our client finalized on, we decided to use graphics that well complimented and worked with the three colours that we identified in our initial research: Yellow, blue, and teal.

Mock-up

Homepage
About
Client cases

Hand-off

Talking with our engineers, we decided to test out both Figma and Zeplin to find out which one of them was better for the hand-off process. In the end, we opted for Zeplin because it could track changes closer and allows for recovery from backups.

‍

During the handoff process, my team met on Zoom several times to go through the design system, confirming our color choices and typography with our engineers; with help from inspecting in Zeplin. After we nailed down the nitty gritty, we moved on to annotating our design for better understanding. To wrap this up, we skimmed through and checked the real content that our client has given us once more.

Engineers inspected colors and typography directly from Zeplin.

‍

Colors:

Typography:

‍

‍

Reflection

If we had abundant time and creative freedom, I would use that opportunity to conduct more user interviews. In my interviews with students, I noticed that the primary audience of UE Education's website are actually their parents, contrary to my client's initial assumption. Through my inquiry, the majority of parents cared less about the visual appearance of the website such as type and colour. Rather, they were more concerned with finding the answers to their questions, as well as obtaining the company's telephone number, as that was their preferred way of communication. And so, it is my hope to continue interviewing more of the students' parents so I can better uncover their pain points and objectives. Combining this with our understanding of the students themselves, we can get a more complete understanding of our personas.

Project gallery

Lorem ipsum dolor sit amet, consectetur adipiscing elit lobortis arcu enim urna adipiscing praesent velit viverra sit semper lorem eu cursus vel hendrerit elementum.

No items found.

Interested in working together? Get in touch today.

Lorem ipsum dolor sit amet consectetur adipiscing elit nulla arcu porttitor molestie sed mauris sollicitudin id ornare egestas.