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 is an online gallery developed for Dr. Zheng's research in social engagement art in China. Users will be able to learn various social engagement art and changes in society of China by scrolling through "the wall", which simulates a displaying wall in an actual gallery. Interactive functions such as clicking and zooming are included in the site for the users to learn more about various artworks.

As the project is developing into a MOOC (Massive Open Online Course), Dr. Zheng planned to create an interactive platform for students to further engage with the course by creating their very own online galleries using the framework of I was employed to work on the web design and development of the interactive student platform for users to share different socially engaged art.
Jump to Design
01 Discovery is a research project initiated by Dr. Bo Zheng regarding socially engaged art in China. The research project has 2 parts, including setting up an online database introducing socially engaged art and educating people on the matter through MOOC on Futurelearn. My primary focus of the project is to enhance the learning experience using the site. I first met with Dr. Zheng to discuss stakeholders needs and expectations. In the process, I identified the stakeholders involved as following:

1. Students - they are either learning about socially engaged art through MOOC provided by Dr. Zheng or other resources. However simply listening to lectures can be relatively boring, therefore, interactive learning experience will be essential to enhance their learning experience.

2. Professors - they use the site as an tool enhancing their course. They are hoping to maximize students interests in the area, and at the same time discover more materials related to the area.

3. Futurelearn - The MOOC platform wants to ensure the quality of the course. They want it to be compelling and engaging. They also have concerns related to coursework of the course for students to participate in easily. 

With these stakeholders' needs identified, we came up with a design solution to introduce an online learning platform for students to create their own online galleries. This will make the learning experience more interactive and engaging for students, lead to potential new discovery for educators and provides a new form of coursework to support the MOOC.
02 Design
Throughout the project, I met with Dr. Zheng regularly to discuss UI design, development goals, user needs and expectations. As I gained a clear understanding of the development goals and user needs after the meetings, I moved on to the designing the user flows using Axure to create wireframes.
03 Development
After refining the UI design details, I moved on to develop the student platform using Drupal CMS, PHP, HTML and CSS. 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
The platform for creating content is reserved for students only. But you can interact with the the live website of the gallery part with the link below:
View live website of gallery
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.