Case study
This case study was a project for the NUS module NM4210 UX Design in collaboration with the NUS Baba House.
Our platform aims to help younger Tanjong Pagar residents build personal connections with the neighbourhood through community building and ongoing learning about the heritage sites in their area
Oct 2021 - Nov 2021
(2 months)
We were a team of 5, where my primary role was UX Designer (I was responsible for the design of the prototype).
We wanted younger residents to engage with their cultural identity and heritage in the Tanjong Pagar vicinity.
In an earlier UX research project that explored solutions for civic engagement, we had found that the major factors in strengthening civic engagement and connection to heritage are active participation, relationship building, and establishing personal connections.
1. What driving factors are behind young people’s interest in culture and heritage?
2. What else interests them in their daily lives and experiences? How can we connect it to their cultural identity?
3. What platforms and interactions are the most relevant to young residents?
A challenge we faced was the recruitment of participants for our user research during the COVID-19 pandemic. It would not have been feasible to approach strangers in the Tanjong Pagar area to participate in our research — hence our research participants were not limited to Tanjong Pagar residents, depending on who we were able to recruit through snowball sampling. Any research done with non-Tanjong Pagar residents would focus on uncovering broader shared insights across all residents in Singapore.
We conducted two semi-structured user interviews and received four responses for the cultural probes.
Our earlier research on civic engagement and cultural heritage was further supported — younger residents also feel more compelled by opportunities for play and active participation to engage with their local heritage and culture. They are also more strongly led by their relationships and community to engage in such efforts.
Personal connection motivates young residents to engage with heritage and culture. Nostalgia was strongly present as participants recounted places of significance while describing their interest in heritage: personal connection with a place is stronger when they have associated memories with them. Personal interest was also highlighted by the other participant as key to their participation in heritage activities.
Younger residents currently engage rather passively with heritage and are not aware of the latest initiatives, however, they are likely to willingly engage if a clear opportunity is presented.
Our participants suggested the use of social media to actively increase awareness and outreach of any heritage related information or efforts. There was an emphasis on efforts to involve active participation to ensure the youth feel engaged and want to contribute.
From our brainstorming session, we came up with 4 key concepts to incorporate: (1) sense of belonging, (2) sharing stories, (3) community, and (4) nostalgia.
Our FigJam space in Figma where I led and facilitated the brainstorming session for our team
We designed a solution that aims to combine active participation, social interactions, and evoking nostalgia through exploration of sites to help newer residents build a deeper sense of connection to their place.
We wanted to give residents agency over their surroundings to create a sense of belonging, allow users to share stories about places with each other and facilitate engagement in community events, helping our users establish strong personal connections with the places and people!
In Pixel Towns, users explore a virtual version of their neighbourhood, and share their opinions and stories about the areas.
By leaving stories in the virtual space, users can make their own connections and memories with the place tangible. By reading stories from other residents, users also see the space from different perspectives, developing stronger personal connection and sentiment with the area.
The app also alerts users to community events they can sign up for, and a forum for residents to discuss topics of interest in the neighbourhood and network with fellow residents.
We wanted users to forge a sense of belonging to the space they are living in by engaging with the community and having a say in the co-creation of the space itself!
Our persona, John, is a representation of key insights from younger residents based on a synthesis of the data we gathered to help us during our ideation process.
To showcase our proposed solution, we charted the experience of John as he navigates our proposed solution to explore his neighbourhood and connect with the community. Storyboard illustrated by my teammate Chrystabelle
I first used lo-fi sketches to draft the rough layout of the application, before incorporating it into a low fidelity prototype.
We carried out some initial concept validation with our users:
Overall feedback for how our design strengthens personal connection was strongly positive! Users felt that the social functions of the app helped them form a community and addressed the current lack of a platform for such opportunities.
We faced some challenge in evoking nostalgia for users through our virtual neighbourhood design. What someone finds nostalgic may not be the same for someone else, unless the stories told in the virtual space were about a shared memory.
In our research, a strong driving factor of nostalgia was the loss of places that held sentimental value for residents, e.g. playgrounds being demolished to make way for new developments.
Thus, we introduced a feature called “Time Capsule” to the virtual space that captures changes to the space throughout the years and immortalises what is no longer around. Users who enter these areas can view the place's history during their virtual field trip.
For users to feel a personal connection, we needed users to understand and relate to the stories they read. Additionally, users were a bit confused about what the stories should consist of. Without guidance, users might share potentially irrelevant or disengaging stories.
Prompts to guide users' stories clarify the expected type of content, and ensure that they will be relevant and engaging. We also encourage users to add multimedia like images or videos to make their stories more engaging and personal.
Users were given a list of tasks to complete and were encouraged to think aloud as they were doing so, followed by post-test interviews after.
3 participants for each session were recruited for the 2nd & 3rd iteration of user testing.
Mostly conducted over Zoom except 1 in-person; recorded with permission, at least 2 team members to facilitate and take notes.
In the first iteration, we combined forum posts, events, and polls into one Community section as users had been confused when distinguishing between the separate Events and Forum tabs. However, some confusion and ambiguity still persisted.
We ended up going back to the initial layout of forum and events. This time, we added more information to the preview card of each Event post to better allow users to understand the content of these posts and distinguish them from the Forum.
Changes made to the Community section (Forum and Events) over multiple iterations
Much of the virtual neighbourhood was redesigned after the 3 rounds of user testing so that users could better navigate the spaces:
There was confusion about where the stories would be added. Initially, when adding stories, there was ambiguity about which landmark in the virtual space it will get added to.
We redid the information architecture of the virtual space:
1. The Add Story button is now clearly attached to a specific place. Users will also be able to choose which landmark to place the story before submitting it.
2. The View Stories button of a place will only contain stories specific to that landmark. There will be a separate button for viewing all the stories in the entire virtual space.
Changes made to the layout of the virtual space over multiple iterations
In the 2nd round of user testing, users had difficulty locating the Time Capsule in the expandable bottom menu. All 3 participants failed to open the menu without prompts from facilitators.
So we made the bottom menu more prominent, giving it more screen real estate. We also added an icon as an affordance that indicates that the menu is expandable.
Changes made to the bottom sheet to increase visibility to users
Entering the map and virtual space was jarring for some. Users felt that the map was too distinct from the rest of the application, especially as the navigation is different from the rest of the application.
This had initially been a purposeful design decision. We had intended for the map feature to feel different from the rest of the application as an intended design friction — we wanted the exploration of the virtual spaces and the stories in it to be reflective endeavours that foster personal connection.
To better brace users for this seeming inconsistency, we distinguished the map icon in the bottom navigation to make the map stand out as different and as a core feature.
Redesigned bottom navigation bar with distinguished Map (right)
Some users had concerns over their privacy and felt uncomfortable sharing personal stories on a public platform. Because this might discourage the authentic sharing of stories, we decided to include the option of staying anonymous when posting stories so more users would feel comfortable sharing their experiences.
✅ All participants were able to complete the tasks without much difficulty!
Majority of the feedback this time validated the changes we made from the previous iteration.
✅ Users liked the interactivity when viewing other people’s events and stories, and felt that sharing stories was a great way to target nostalgia.
Some users added that allowing users to add multimedia helped to express one’s nostalgia in multi-faceted ways.
✅ They were also able to easily find and use the ‘Explore More’ menu within the virtual space — something that users had struggled with in the previous evaluation.
.png){kind=tracking}
Using play through exploration, the core map feature of Pixel Towns allows users to explore a digital map of their neighbourhood and enter a virtual space representative of the actual physical location, where users can interact with the place with their avatars.
.png){kind=tracking}
Users are also able to enter a Time Capsule mode, which changes the virtual world to reflect its evolution over the years. For example, if a playground was upgraded recently, users can still see a 2D version of the old playground in the virtual world by turning back time in the time capsule.
.png){kind=tracking}
Adding a story to a virtual space
Users write about the places they care about, and see those spaces through the eyes of others. Long-term residents can upload stories of places that are meaningful to them. Eventually, newer residents will develop their own stories and share them as well.
.png){kind=tracking}
Our forum allows for users to share their experiences, discuss new ideas for the neighbourhood, pool resources or crowdsource for community initiatives. Users can be updated about changes and initiatives in their community and be involved in neighbourhood projects.
.png){kind=tracking}
Signing up for an event
Instead of posting events on the physical bulletins at residences, Pixel Towns allows users to post their events so that other users may easily browse and sign up for them. In initiating or joining community events in their neighbourhood, users can build their shared heritage together.
I made use of Atomic Design principles when prototyping in Figma. To ensure consistency of design across the app, I created reusable UI components ranging from the atomic, like buttons and labels, to the more complex, like forum and event cards and menus.
Abiding by Nielson's error prevention heuristic, I wanted to minimize chances for errors and allow users to gracefully recover from their mistakes — hence the use of error messages, disabled button states, and confirmation dialog for important actions.
Clear feedback for users is also provided using toast notifications when a user completes a significant task, updating the user on the success of their actions and the system state.
Being the UX designer of the team led me to hone my Figma skills and gain a lot of useful skills for better prototyping! In addition to building a small component library, I practiced Figma tools like autolayout and explored even more prototype interactions and animations.
If we had more time, I would have liked to work more on the Time Capsule design to make it a more immersive and engaging experience for users.
Another limitation our app has is the design of the graphics in the virtual space. Due to time constraints, we were not able to design the graphics, which play a key role in users' immersion in the virtual spaces. Our project would also have benefited from beta testing to see how well the app does in a real context!
