Be patient, good things take time :)
A website designed for a more engaging learning experience
00 Introduction
CollateralLive website

TeamDr. Bo Zheng (Project manager), Sara Huang (Content Writer)

My RoleCompetitive Analysis, Interview, Ideation, Web & UX Design, Front-end web development

ToolsAdobe Illustrator/Photoshop, Axure, HTML, CSS, JS, Drupal
City University of Hong Kong was invited to produce a MOOC (Massive online open Course) regarding socially engaged artwork in China. Unfortunately there were not enough online resources regarding these artworks, making the online course more challenging to teach as students do not have access to these material. The professor who led the course decided to introduce a supporting web database that can provide details of these artworks as course material and enrich the learning experience for students enrolled in the class.
I designed and developed responsive educational web learning platform that contains an artwork database to provide content to support learning. 

An interactive element was also introduced for students to create projects and share different artworks to enrich the database.
Jump to Design
01 Discovery & Define
When I was employed to join the team, the professor briefly mentioned to me about the challenges in teaching this specific online course. The major challenge involves teaching socially engaged art in China, a relatively new topic. Because of that there are a lot of good documentation and resources available online, and it will be difficult for students enrolled in the class to find content to help support their learning. Therefore, he planned to create a website to help augment the course.

In order to understand what can I really design to help augment the course, I started interviewing with the professor leading this course and 5 students who expressed interest in enrolling in the course for the following reasons:

1. Professor - Understand stakeholder's focus, priorities and concerns about leading the course

2. Students - Understand the characteristics and needs of the users (i.e. students interested in the course) to identify opportunities.

Once the research was completed, I began to synthesize my findings to identify opportunities by forming personas and identifying main users' needs. I created 2 different personas based on 2 different learning styles discovered in the research phase:
Users' needs
Finding content to support learning
Since the students are studying a relatively new topic, they need enough content to support their learning. Unfortunately there is not enough resource available at the moment
Interactive learning
Learning is best when it is interactive. With the nature of MOOC the interaction between professors and students are limited. An alternative is needed to ensure a more interactive learning experience
Learn with other students
Students learn best when they have support from other peers. Yet taking a MOOC often means viewing lecture video by yourself. There is a need to promote a collective learning environment
Support of various behaviors/habits
Since students have various learning behaviors with some learning on the go, the design must support multiple devices to make sure students with different learning behaviors both get a great learning experience
02 Design
As I gained a clear understanding of the user needs after research, I began to ideate the possible solutions to solve the problem. Ultimately after discussion with the professor, the team has decided to create a website serving as the online database of the artworks (aka course material that will be covered in the MOOC). At the same time, I recommended the design to incorporate an interactive element for students to help contribute to the database and create projects that can be viewed in a standardized format. Not only do students get a more engaging learning experience, it also helps to crowdsource the database by inviting students to add and share other art projects they know.

Once the team has agreed on pursuing the idea, I moved on to the designing the user flows using Axure to create wireframes.
03 Development
After refining the wireframes, I moved on to design and develop the student platform using Drupal CMS, PHP, HTML and CSS as the designer/developer of the team. During the design and development process, I ensured that I followed the following design rules to provide a pleasing user experience:

1. Match between system & real world - the wall display design simulates an art gallery settings well. All the phrases/keywords used in the design are familiar to the users

2. User control & freedom - user can leave an unwanted state at all time easily, an exit/discard option is always provided for user to return to previous page

3. Aesthetic & minimalist design - the design is kept in minimalist black/white/grey tone so that users can focus on creating their own content for the online galleries

4. Consistency & Standards - The pages for creating content are consistent in terms of visual design and use of phrases, so users can create new content with little cognitive load

Here are some of the screenshots showing the actual build.
Personal login page
Personal project dashboard
Adding projects to personal dashboard
Organizing project content
Editing existing photo content of project
Adding new video content to project
Viewing project in gallery form
Viewing artifact of project in detail
Below is a video demonstrating how does one project being displayed on the site. You can also interact with the live website directly with the link below as well.
Go to live website
04 Takeaways
I have learnt a lot from the project. Here are some important takeaways

1. Think of various stakeholders' needs

It was quite challenging for me to identify all the stakeholders involved as well as their concerns at the first place. However the meetings helped me to learn more about the stakeholders, and guided me to keep a big picture of the stakeholders in mind when I was designing.

2. Wireframes are important

It was my first time creating wireframes before I jump into UI design. Yet I find this extremely valuable, as I gained feedbacks quickly and was able to move fast on iterations afterwards before I spend a significant amount of time designing the UI.

3. Understanding front-end web development

Prior to working on this project my skills in web development are only limited to HTML/CSS/JS. However working on the project as the only designer/developer of the team forced me to pick up Drupal, php and even Amazon Web Services to implement what I have designed. There were a lot of worrying hours spent on google, youtube tutorials and stackoverflow wondering if I could actually make it work. But I felt extremely accomplished after implementing my design, and became more confident as a UX designer as I now understand the pain points for developers better.