Context:
Senior UX design course project.
CirQle pitch video edited by me.
CirQle
My Role:
User research, information architecture, prototyping, video production.
Duration:
Jun. to Jul. 2019 - 6 weeks
Team:
Dominique Suraya, Lexi Feng, and Yuna Cho.
Context:
Senior Interface Design course project.
CirQle is a safety app designed to provide safety networks, emergency protection, and consultation services for LGBTQ+ youth. It is the final project for a senior year interface design course at SIAT, SFU.
Initial Research
In our initial research for possible design domains and opportunities, we found the LGBTQ+ community is still facing severe discrimination and hostility even in Canada today. Among all, financially dependent young individuals, who have limited freedom or abilities to explore their identity, are more vulnerable facing the hostility.
"Due to the lack of knowledge and financial ability to protect themselves, within the LGBTQ+ community, the younger generation comparing to their heterosexual counterparts are more likely to be discriminated, bullied in schools, or rejected by their families, thus have a larger chance of becoming homeless or committing suicide." - CBC News, 2017.
From the initial research, we realized it is very crucial to provide more approachable methods and accesses for the LGBTQ+ youths to reach out for help and keep safe, so we decided to follow into this domain.
We started to conduct the initial user research by interviewing 6 individuals
inside or outside of Canada to learn about their goals and needs as members in the LGBTQ+ Youth community.
Their most common goals are:
+ Gain knowledge to better understand themselves
+ Spread knowledge about LGBTQ+
+ Keep safe from bullying from school
+ Keep safe from potential domestic violence
+ Make more LGBTQ+ friends
+ Avoid cyberbullying
According to the findings above, we found 3 design opportunities:
The 3 initial design opportunities. Part of our project proposal slides, designed by Dominique.
We decided to carry on with the Safety Protection idea, based on our research for similar products in the market, and feedback from the teaching staff. Since there are already a great deal of social networking apps made for LGBTQ+ users, and it’s the same for the Q&A platform idea, also the internet grows more and more powerful, the people might not really need a Q&A platform to gather information about LGBTQ+.
Key Concepts
Base on the user goals in our user research and further market research on the topic, we realized that both counseling and personal safety app exists in the market, but none of the existing products are targeting specifically LGBTQ+ youth which matches their need the most. So we created our features trying to integrate them.
Key features of CirQle.
Creating Prototypes
To help guide later designs of the app and quickly communicate and iterates, I started to sketch out the detailed workflow of the app on paper.
Some of the initial workflow sketches.
​
Based on the workflow, the team came up with some low fidelity sketches, I turned them into a mid-fidelity prototype to present the basic flow to get feedback, to continue further iterating.
The mid-fidelity prototype consists of the layout of most pages and a semi-completed workflow.
​
As soon as the prototype was created, we got feedback from the teaching team about the problems in the layout. Because 'finding LGBTQ+ safe places' was placed under the counseling page because its goal aligns with 'hotline' and 'live chat' which is to seek professional help.
However, the page is too crowded with different functions crowded on one page, while related functions such as ‘Finding Counseling locations’ and ‘Finding Circle Members' are separated on two pages, which makes it harder for to locate functions quickly.
The ‘Finding Circle Members' map in the People page (Left) and ‘Finding Counselling Locations’ map in the Counseling page(Right).
So in the final design, I combined ‘Finding Circle Members' and ‘Finding Counselling Locations’ together on the same page using tab sections. Now, by choosing different tabs on the Map page, the users would be able to switch quickly between the two functions.
On the Map page, People tap section (left) and Place tap section (right).
After solving the obvious problems, we then transformed our prototype into High Fidelity interactive mockup to fully showcases the app with detailed and prographic design.
​
User Testings
We conducted 3 in-person usability tests, many significant feedback showed in the test results had pointed out potential problems, it helped us further reiterate and polish the prototype.
It’s not useful to just have the names for the Hotline, but it should show more details about the Hotline, like what is it for? What topic is each hotline related to? Maybe a profile page for the Hotline?
Most functions in the app are clear, but not sure how the location sharing functions? And who are the counsellors in the Live Chat? Maybe add some Onboarding pages to help people understand the functions.
There should be more private settings for people who don't want to share their location information. Also the anonymous setting for Counsellings?
Also there should be more settings or in initial profile setups specifically tailored for the LGBTQ+ users to show the thoughtfulness for the community.
Help Alert button is not obvious enough on the Map page. It is clear on the Circle page. Don’t think the sidebar is needed, though it should be replaced by some more convenient, and it should easily be trigger with just one click.
Some of the Most insightful and useful feedbacks from our user testings.
Final Features
1. Onboarding
Goal:
+ Help users to understand the core value and main features.
Many testers told us since there is no introduction to the app, sometimes they are confused about some features, and don't know where to start. So I created the onboarding slides since it'll be the first step to help the user understand the app when they begin interacting with the app.
The interactive mockup for Onboarding.
Optimized Illustrations from undraw.co.
2. Map
Goal:
+ Help users to locate LGBTQ+ safe space quickly.
+ Connected with their circle members to keep each other safe.
The map page is the most essential features, used as the home page with
access to almost all the major functions in the app.
​
Under the People tab, users can locate their connected circle members in
real-time, and check their emotional status through Mood; while the Place
tab helps the user to find LGBTQ+ Safe places such as counselling institutions.
The interactive mockup for the Map page.
3. Circles
Goal:
+ Help users to build private safety networks with trusted ones.
+ Quick alert to all circle members when the user is in danger.
+ Keep an eye on their close ones’ emotional states.
In the first version, I design the Circle page to contains fewer functions and an Add button are placed in the main menu for quick access for creating Safety Circles. However, we got feedbacks that, the add button takes too much space while the function that it provides is not so necessary when the users pass the beginner phase, so I move the add button to only appearing in the Circle page where it's easiest to locate.
The older version (left) and the latest version (right) of the Circle Page and the Add button.
So when building the higher fidelity prototype, I integrated the functions in the Add button to the circle page. Most of the functions on this page can be found on the Map page, but compared to the Map page, users can flow through the functions easily in a more intuitive way. The functions include circle creating functions, Help Alert button, Circle Member Mood posts and Circle member group chats.
The interactive mockup for the Circle page.
4. Counseling
Goal:
+ Provides fast and professional distant counseling advice.
As described before, the page was too crowded with different information so we reduce it to have only 2 major functions: Hotline and Live Chat. The former provides emergency hotlines for LGBTQ+ related issues, while the latter provides similar services but in the form of real-time online Chats with the counselors.
The interactive mockup for the Counseling page.
Reflection
Overall, being able to work on this project has equipped me with the ability to research, test and iterate for interface designs, to create a smooth and integrated user experience through utilizing my skills in user researching, prototyping, graphic design, and video creating, both independently and collectively with my team.
​
Among all the design processes, I found the User Testings is the most significant part, as our design iterations get more and more complete as we got feedback from the users and other design professionals. We were able to fix many holes in the workflow and the interface design, though many problems remain unsolved due to time constraints. Like private settings for location sharing, and customizable user profile and privacy settings for users and make sure their identities are not exposed to others during, etc.