WeDesign Website Design & Iterations
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.
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.
primary strategic designer - implementing new features to match business/branding needs, reporting back to CEO
User researcher - in collaboration with the academic team and project manager
principal UX/UI Designer
Marketing, Art and Design Education
Strategic Planning, Research, UX/UI Design, Responsive Web Design, Multi-language
December 2017 - Present
Stages of Development
Research & Planning
Defining User Group / Create Persona
Define Domain, research on the domain, Competitive Analysis
Wireframe & Prototype Design
User Interface Design
Iterations - Testing, Redesign & Rebuilt
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.
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
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.
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.
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
Second Iteration - Website Blueprint
2.2 Wireframes & Prototype
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
2.3 User Interface Design
I got some inspirations and references from the domain research I did earlier. Based on the color palette, I explored different design possibilities.
Final Interface Design from the 1st stage -
Final Interface Design from the Second Iteration
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.
4.1 Testing & Redesign & Rebuilt
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 iterations made based on user research and user testing results
During our task analysis interview, we find out on the landing page, users easily scroll down and didn’t pay much attention to the main product we are offering.
To highlight our main product, enhance the programs display
We increased the proportion of this area in the whole landing page
Removed the mouseover effect to know what each picture is about, lower the screen complexity, reduced the interaction steps
According to our google analytics Behavior Flow, we found out the majority of our users choose to view our prestigious faculty page after the landing page.
During our in-person interview with our target users, they find it’s confusing when there’s only faculty pictures. They want to know the areas that this faculty is good at, the school this faculty is originally from.
To highlight each faculty and their speciality and schools,
we listed their short information underneath each faculty, removed the mouseover effect
I also designed a card view so if the user wants to know a bit more background of certain faculty, they can click to know
In order to make the process of inputting faculty information quicker, and manage faculty data easier for our academic team
I also created a template and connected Wix database. This makes the process quicker and easier for the academic team to import faculty info data
To increase signup rate, and know which program the viewer is interested in
I designed a general signup on the landing page, and separated program signup sheets into individual pages,
so when user scroll to the bottom in each program page, they can sign up without going back to landing page.
4.2 New Features
News and Events Page
To increase brand awareness
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.
Livestream Channel Coming Up…
From user research perspective
Understanding customers cultural background, preferences, demography matters a lot, it helps to understand users pain points.
From product design perspective
Understanding the KPIs, analyzing data and statistics to inform design and decision making is crucial to attract and attain users.
From ui design perspective
Building a branded system can make design across platform consistent, easier and simpler.
Take responsibility and ownership for the product I’m building
It can help me to make better decisions and find better solutions by actively engaging different stakeholders in the early stage; collaboratively working with multidisciplinary team to hear their perspective, listen to their needs; and understanding why behind every idea.