Responsibilities
UX Design: Wireframing, Prototyping
UI Design + Iterations
Pushing the team on! 💪
Project Context
Initially a submission in #HACK 2020 - a faith-based hackathon
Team project with strategists and a graphic designer
Dedicated to mental health awareness in a Singaporean church context
More context
Addressing mental health awareness
Mental health issues have been on the rise each year, soaring in cases during the COVID-19 pandemic. Although its gravity resulted in more resources available online, misconceptions and stigma on mental health were still widespread, including within Christian circles.
Initially tasked to tackle mental health in a church context (hackathon challenge), our team sought to tackle mental health awareness, without further saturating the plethora of available resources.
Product Preview
An interactive solution through gamification.
Sidewalk presents a text adventure game. Through the game, the player journeys with a church friend with clinical depression, while being presented with knowledge, tips and resources.
Act 1: The Hackathon
The team forms. storms. norms. performs.
The team was formed from 5 of us who mostly do not know each other prior, but with a shared passion for addressing mental health matters. After much contemplation, the team settled on this mission statement:
The execution
With this initial idea, the team splits to work on content and design. I crafted quick mockups and came up with a high-(enough-)fidelity mockup for submission.
Lo-fi wireframes
Hi-fi mockups which were submitted for the hackathon
ACT 2: One Step Back, Two Steps Forward
Persona + User Journey
The team was keen to build on this project after #HACK, and thus I had more time to research and ideate. While the strategists came up with learning content, the design team (me included) took this time to come up with personas. Through discussing, we settled on possible formats to portray such content.
Learning content by strategy team
Persona by design team
‘User Journey’ after deliberation by the whole team
Act 3: Ideating + Prototyping
Sketching for iteration & presentation
After a framework was drafted, I revisited our previous wireframes and mockups, placing them into the respective phases and ideating for other possible formats to drive the message across. This time round, wireframes were done on quick sketches.
Summary sketches of each phase
Exploring a possible app walkthrough
Act 4: The furthest we went
Final Prototype with added revisions
From the judges’ critiques to team deliberations, I created the final prototype, giving a gist of mental health awareness through a game.
Encore
Style Guide
Note: The colour scheme and typography was brought in discussion with the design team, after which I incorporated these elements, as well as the ‘hands’ graphic, when creating the final UI kit.
Conclusion
Reflections + What I would do differently
Ideate, but never assume: It is often mentioned that UX designers are not the end users, and what more is advocating for mental health issues as someone who is not suffering from a clinically-diagnosed mental condition.
Get professionals’ opinion: While this has been the intent all along, the project had to end before we got to that stage. Thus, the most-final prototype is most likely not viable as an MVP without the advice of experts in the field.
Overall, this was the first time I have worked in a team and in the capacity of a UX Designer, giving in my share of empathy, design and technical skills, and marrying my UX skills with my passion for blessing the community! 💪💪