interaction designer, creative technologist
WeD-website3.jpg

WeDesign Website (UX/UI, Web Design)

 WeDesign Website Design & Iterations

Go to the WEBSITE

WeD-website2.jpg
 

About WeDesign

WeDesign is an art and design education company that provides global access to the world’s finest art and design interactive and experiential education from high school to pre- and post-college, adult learners, and senior executives. The company provides both online and in-person programs, and connects world-class faculty with the students.

When it first started, the main programs it offers are VIP programs that are set to be easily customizable based on the student’s academic goal, level, and interests, and mainly delivered 1:1 through online live video conferencing platform. There are also offline intensive/short-term programs provided now.

 
 
 

PROJECT BRIEF

Project Goal

The main purpose of the WeDesign website project is to create a clean, trendy and straightforward website to portray WeDesign’s goals and objectives, layout the detailed content and descriptions of programs that WeDesign provides.

My Role

In this website development project, I worked as the primary strategic designer reporting back to the CEO; as the project manager and principal user researcher in collaboration with the academic team and marketing manager; and as the principal UX/UI Designer under the supervision of design director.

Category

Marketing, Art and Design Education

Keywords

Strategic Planning, Research, UX/UI Design, Responsive Web Design, Multi-language

Year

December 2017 - November 2018

Tools

Paper, Sketch, Illustrator, Photoshop, Principle, Wix, Wix code(Javascript)

 
 
pages.jpg
 

PROCESS

 

Stages of Development

Research & Planning

  1. Stakeholders interview

  2. Defining User Group / Create Persona

  3. Define Domain, research on the domain, Competitive Analysis

Design

  1. Information Architecture

  2. Wireframe & Prototype Design

  3. User Interface Design

Building

Iterations - Testing, Redesign & Rebuilt Milestone 1

Iterations - Redesign, Testing & Redesign & Rebuilt Milestone 2

 
 
 

01. Research & Planning

1.1 Stakeholders Interview

The company is at a starting position. It’s important to have a website built out quickly to start presenting information to potential clients.

Project Objectives

  • Establish an online portal for people to know about WeDesign, our missions, and content

  • Provide a clear online message and easy navigation

  • Offer information on all the content that WeDesign provided

  • Increase awareness for WeDesign brand, increase visibility and broaden exposure

  • Keep related parties better informed

  • Provide searchable online learning video library

  • Provide contact methods

  • Be flexible and extensible for further development and incorporate more content like online video learning, interactive art experience

Based on the evaluations of the constraints, and the objectives, I separate them into different stages:

The scope of the entire project can be divided into three stages:

Phase 1: Short Term - Building a quick static website to increase brand awareness (Because of time and budget, we choose to use a web development platform - Wix)

Phase 2: Mid - Long term - Expanding more features of the website, creating a dynamic website with more user interactions

Phase 3: Future Development - Connecting different digital system together (Website, online learning platform etc)

 
 
 

1.2 Defining User Group

Our first couple of programs are mainly designed for Pre-College education. The target audiences are people who want to acquire skills, create art and design portfolio to get into art and design university.

Primary User Group: Students 15-19 years old & their parents

The user group will keep expanding as the business grow.

According to the company’s previous market research, there’s a growing need for higher education especially in art and design area in China, so when designing the website, I need to consider the localization for Chinese audiences.

Since we are targeting users from all over the world, online programs will be the main program. So the accessing speed of the website, the level and the accessibility of using the computer and different software is another consideration (This problem has been the primary challenge when we were researching for WeDesign learning management platform.)

 
 
 

1.3 Domain research & Competitive Analysis

Define Domains

Website | Art & Design | Education | Portfolio | Online Learning | E-Learning

For different sets of domains, I did a round of competitive analysis and found some references at the intersection of different domains for the interface design.

1.4 Planning

After Initial meetings and research, I generated a project proposal with the timeline needed resources in each stage for review, and also for future reference.

02. Phase 1 Design

2.1 Information Architecture

Based on the business goal, I outlined several pages that the Phase 1 website should have besides a landing page. We added more features on the later iterations

Programs Page - Displaying all the program content

Video Page - Designed to be extendable, if later on we have more free online art and design educational video, we can put them under this category

About Page - Team and Faculty included

We later separated Faculty into a single page as the academic team grows. Since the online Programs are the core products of the company, most of the students wanted to know their faculty before taking the course.

 
 

First Draft Sitemap

IMG_9226-2.jpg
 
 

Second Iteration - Website Blueprint

sitemap.jpg
 

2.2 Wireframes & Prototype Design

I made a lot of small iterations and changes while designing the key screen visual design, some of the designs were not reflected in the early stage of wireframes. In the initial stage, we only had four main pages- Home, Programs, Faculty and About

 
Screen Shot 2018-11-11 at 06.26.03.png


2.3 User Interface Design

 
Screen Shot 2018-11-11 at 15.13.56.png

I got some inspirations and references from the domain research I did earlier. Based on the color palette, I explored different design possibilities. I tested among the team, the feedback was it’s too dark for education. The website should give a hope, growth feeling.

We eventually landed at this:

Screen Shot 2018-11-11 at 07.04.40.png
 
pages.jpg

03. Building

 

Stage 1 - Building with Wix

The goal of the company at the initial stage was quickly set up one website as a portal to reach to the audiences, so we chose to use Wix.

Stage 2 - Further Development

For further development, we are moving some of the pages to Wordpress. I’m working as the UX/UI designer collaborating with the development team and operations manager. We are implementing online course selection and various payment method(Paypal, Alipay, Wechat payment) into our Wordpress website.

 
 

04. Major Iterations

4.1 Testing & Redesign & Rebuilt - Milestone 1

Reasons for Redesign & Problems Encountered

  • A smooth and direct transition between individual pages across English and Chinese site (Wix Development Challenge)

    Programs display is not attracting enough attention – Index category on the landing page should be expandable (UX Challenge)

  • Poor representation of faculty & teaching assistants (UX Challenge)

  • Branding consistency (Branding Challenge)

  • Student testimonial design (UX Challenge)

  • Footer design (UX Challenge)

  • Sign-up rates for programs are, hard to sort out different programs’ signup. (UX Challenge)

 
 
 

SOME DESIGN SOLUTIONS:

  • I designed two sites that precisely the same, and put the "go to Chinese website" button for each page, links to individual pages

 
 

Assessment

Enhanced Programs Display – as the main products – by increasing the proportion, lower the Screen Complexity

 
 

Assessment

Separate Faculty and Assistant faculty to different categories with better display and full information popup window

 
footer-iterations.jpg
signup.jpg
 

Assessment:

Separate program signup sheets into their individual pages, when user scroll to the bottom, they can sign up without going back to main site

 
 
 

4.2 Redesign, Testing & Redesign & Rebuilt Milestone 2

Reevaluate User Needs, Adding features

  • Added news and events to our page

    • We’ve held a lot of events, to reach out to more audience and keep a record of the events that we owned, we added Events page for people to sign-up to our Design related Events, and News page for social media specialist to write about recent events.

  • To make the process of inputting faculty info easier

    • Created a template and connected Wix database to it. This makes the process quicker and easier for the academic team to import faculty info data

 

End