Screen Shot 2017-01-04 at 3.50.24 PM.png
 
 

awallproject

a website designed for a more engaging learning experience

Collateral:

Website


Role:

Web Designer, Web Developer, UX Designer


Involvement:

Ideation, Wireframing, Web design, Front-end web development, Usability Testing


Tools:

Axure, HTML/CSS, Javascript, Drupal, PHP, Adobe CC

Overview

awallproject.net 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 awallproject.net. I was employed to work on the web design and development of the interactive student platform for users to share different socially engaged art.


1. Discovery

awallproject.net 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.


2. 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.

Wireframes indicating the process of creating projects on students' side

Wireframes showing how the project is going to be displayed in awallproject's layout


3. 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

Adding projects to personal dashboard

Personal dashboard for managing projects

Organizing project content

Adding new content - video to the project

Editing existing content - image in the project

Viewing project in gallery displayed form

Viewing details of an item of the project

The slideshow below shows the user flow. Hover on the image for the description, and click on the arrows on left or right to learn more about the flow.

 

4. Takeaways

Think of the big picture

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.


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.


Learning new tools empowers you

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. 


 

Other Selected Work

A mobile app transforming home automation experience Jan - Apr 2017 

A mobile app transforming home automation experience

Jan - Apr 2017 

SMART HOME

UX Design & Research

A service design project reimagining shopping at Walmart Jan-Apr 2017

A service design project reimagining shopping at Walmart

Jan-Apr 2017

WALMART INSIGHT

Service Design & Research

A wearable app that helps you to recycle better Sep - Dec 2016

A wearable app that helps you to recycle better

Sep - Dec 2016

RECO

UX Design & Research

A website designed for more engaging learning experience Jul-Sep 2015

A website designed for more engaging learning experience

Jul-Sep 2015

AWALLPROJECT

UX Design & Research

Tangible UI design empowering users to play music in a fun and easy way Dec 2014 - Jan 2015 

Tangible UI design empowering users to play music in a fun and easy way

Dec 2014 - Jan 2015 

MUSIC BOX

UX Design & Research

 

Introducing an under-appreciated architecture in mixed reality Feb-Apr 2015

Introducing an under-appreciated architecture in mixed reality

Feb-Apr 2015

THEATRE OF MADNESS

Mixed Reality Design