user's avatar
[ux] a microsite

The project brief was a 2020 RFP from the National Gallery Singapore for the design of the #GalleryKids microsite. With a focus on children and their educators, this microsite hosts Gallery content, provides teaching tools and acts as a touch point for the kid's club's members.

The brief
The microsite's requirements include:
1.  Being a touchpoint between the Gallery and users, with "the objective of bringing [an] art museum education and experience to all visitors online",
2.  Personalisation, where "users have the option to register as a member to create their personal profiles and earn points and badges", and
3.  A wide range of digital activities and games for children "14 years old and below... as well as schools (teachers and students)".
User research
To empathise with users, we spoke to 4 children who are Primary and Secondary school students in Singapore, a parent with a 7-year old daughter, a Secondary school teacher as well as a tuition teacher to students between 7 and 12 years old. Some examples of questions asked:
-  What websites do you enjoy visiting the most, and why do you like them?
-  What websites do you dislike, and why aren't they enjoyable to use?
-  Have you browsed a gallery's website in the past? If yes, how was your experience?
-  What would interest you to visit a gallery microsite? Choose all applicable.
-  Do you think websites are a good educational tool for children? Why / why not?

From these survey responses, we translated our findings into empathy maps for each group. These maps helped us discover commonalities between users about their online preferences / habits (blue), pain points when surfing the Internet (purple) and their relationship with gallery websites (red).
We found that:
-  Children are generally excited about interacting with their peers online, hence enjoying social media and gaming sites.
-  Children go online to view, comment and share content with their friends.
-  Children enjoy online content that is easy to digest, interactive and diverse. ​​​​​​​
-  Parents find that their children are highly interested in going online.
-  Parents notice their children enjoying interactive online content.
-  Parents are happy to indulge in their child's interest, and glad that online tools are available for exploration.
-  Educators appreciate tools that are simple and easy to pick up.
-  Educators appreciate tools that allow for some degree of control - for example, setting clear learning objectives and timelines for students.
-  Educators are hopeful that more user-friendly tools will emerge in the future.
-  Educators are currently frustrated by the trial-and-error process it takes to find good teaching tools online.
We synthesised our findings into several point-of-view statements:
-  The National Gallery can engage children, educators and families by allowing interactivity and customizability within the microsite.
-  Children need curated content because existing museum websites tend not to be of interest.
-  Teachers need a way to engage students online, given how their attention spans are often short when tasked to use online learning tools.

This was the basis for brainstorming potential solutions, which we did by questioning 'how might we?' and 'what if?'.
In order to translate these ideas into concrete steps, we studied existing user journeys for pain points and areas of improvement.
Through these exercises, we pinpointed the main foci of our microsite. Content interactivity can be in the form of multiplayer elements, and awards can be made into a type of social currency. Educators can use similarly attractive content, rewards and customisable lessons to better engage their students.
The wireframe
The general flow of the site is organised by the brief itself: a 360 degree gallery tour, 4 modules of content (namely Create, Ask, Share and Kid's News), an activity feed and a calendar of events all accessible from the main page. From here, I embedded a gamification and teaching element within the 360 degree tour. I also placed the educator functions on a dedicated page, #GalleryKids for Educators. View the Miro flowchart here.

Lo-fi prototypes
After ascertaining the general flow of the microsite, I identified key branches to test and iterate. Here are the key findings.​​​​​​​
Main page​​​​​​​
-  Children like seeing the 4 modules brought down from the navigation bar to be featured on the page itself, finding it the clearest of the 3.
-  Clarity cannot be conferred when one element dominates the page.
-  Clarity cannot be conferred by having elements of relatively comparable / equal size.
-  Children do not like scrolling to discover individual elements on a page, or browsing to uncover assets in the navigation bar.
= Thus, the clearest layouts are ones that allow all features of the microsite to be seen at one glance
=  Rather than immersing themselves in a single element at a time, children prefer getting an overall understanding of the range of content.
=  While interactivity is desired, it does not have to be the central focus of the main page. Children find clarity more important than excitement.

4 modules (Create, Ask, Share and Kid's News)
-  When browsing an index of assets, children prefer grids over list views. 
-  Preview thumbnails are preferred over textual descriptions introducing the content.
-  For each asset's individual page, children enjoy layouts that feature recommendations of related content prominently.
=  Therefore, a visual representation of information is key to children.

Educators' page
-  Educators prefer when summaries about the current lesson are easily accessible, especially during live classes.
-  Educators like it when buttons are large and represented visually, rather than labelled textually.
Rather than being concerned with the logical organisation of lesson-building functions, responses were more focused on whether ideas could be easily understood through better presentation.
=  Thus, focus on providing visual overviews and presenting information for comprehension on first glance.

Through affinity mapping I found similarities in the testers’ responses: both found information more accessible when presented as visuals than text. Additionally, both preferred a big picture overview for immediate comprehension, rather than exploring to uncover more. The latter is especially important to children, who clearly like a flat hierarchy of information. Interactivity was not a main point of discussion for testers, but the educator responded positively to it.
Hi-fi prototype
From the lo-fi tests, I refined the microsite to arrive at a high-fidelity prototype. View the Figma prototype here.
In review
Going back to the user responses, we have identified visual access, comprehension and hierarchy of information as focal points. As seen previously, my focus has transitioned away from having dominant elements on the main page, with a particularly emphasis on how interactive said element is. Instead, the hi-fi is now showcasing the diverse elements equally, and threading interactivity throughout them. Additionally, while I was looking at the logical flow of functions previously, I am now designing for comprehension, better visualisation as well as summarisation in the hi-fi.
This project was done as part of the Professional Certificate in Design Thinking and User Experience awarded by the National University of Singapore. It was jointly-researched alongside three teammates - many thanks to Akie Yoshida, Chow Huiru and Madeline Chay for being the best co-conspirators - while the latter stages of prototyping and testing were completed individually. A big thank you to our lecturer, Lionel Chok, for tireless guidance and support.

Website content by National Gallery Singapore.
Avatar graphics by Habbo
Vector graphics by stories, pch.vector, freepik and pikisuperstar via Freepik.

[ux] a microsite

[ux] a microsite


Creative Fields