Overview
Orbits is my Solo Capstone Project for BrainStation's UX Design program.
Brief: To identify, plan, research, and design a digital mobile interaction that addresses a problem space of my choosing
Product: Orbits is a social network mobile app designed to help individuals to find local communities and foster genuine connections
Product: Orbits is a social network mobile app designed to help individuals to find local communities and foster genuine connections
Role: Product Designer
Skills: UX Research, Product Design, Branding
Timeline: 12 Weeks
Problem Space
Known for its beautiful outdoors and multiculturalism, there's no question as to why Vancouver draws people from all across the globe eager to call it home.
Unfortunately, even with Vancouver's large population, many struggle to make meaningful connections.
This is especially true for newcomers and marginalized individuals, as they are almost twice as likely to report feelings of isolation and loneliness.
With social isolation being a known health risk, I embarked upon furthering my exploration of the problem space.
With social isolation being a known health risk, I embarked upon furthering my exploration of the problem space.
Read more: Secondary Research articles
(Click to enlarge) Source: Connect & Engage Minor Reports - A Survey of Metro Vancouver 2017
Constraints
In this research, I am assuming the following:
• Newcomers have agency in moving to and staying in Vancouver.
• Newcomers are interested in making friendships and connections to help increase their feelings of belongingness, connectedness, and community support.
• Newcomers are open to being friends with locals and non-locals, and have tried to get involved in the community for the purpose of socializing.
User Research
Method: I conducted 1 on 1 interviews on Zoom with 4 people to learn more about the experiences of those who moved to or recently returned to Vancouver. This provided me with insights regarding the existing roadblocks newcomers face when trying to form new connections.
Objectives: To understand people's pain points, motivations and behavior in regards to staying and socializing in Vancouver. Additionally, I sought to explore the possibilities of addressing socialization using digital technology
User Criteria:
• Is between 18 - 30 years old
• Is a “newcomer” as defined by one of the following:
- Has migrated to Vancouver in the last decade from a different province or country, and stayed for at least 2 years
- Has left Vancouver for at least 4 years and have recently returned
Key Findings
After conducting interviews, I found out that newcomers experience the following:
• a lack of sense of belonging and friendliness
• a strong interest in niche communities aligned to their passions, identities and cultures
• a lack of information and platform discovering these communities
• a tendency to be introverted
How Might We
To summarize the themes and insight statements derived from the findings, I created this HMW statement:
"How might we better assist newcomers in integrating within appropriate local communities in order for them to feel more belongingness and make genuine and long-lasting connections?"
User Persona
I created a User Persona to represent all users from the interviews, as well as their frustrations, reservations and experiences. This helped keep my focus towards creating a product specifically addressing the interview findings, and later helped me pinpoint opportunities for a design intervention.
User Persona: Carlo Garcia is a proud Filipino-Canadian and a self-proclaimed foodie. Having recently relocated due to a new job opportunity, Carlo is finally fulfilling his dream of living on the west coast. His goal is to find a sense of belonging and eventually settle in Vancouver permanently.
Current Experience: Despite his optimism and initiative, Carlo has been having a hard time making friends or finding a community to be a part of. Carlo has been frustrated about the lack of information available regarding the communities he wants to get involved in, such as the Foodie community in Vancouver. Having attended a few unfruitful events, Carlo has never felt more anxious, exhausted or isolated.
(Click to enlarge) User Persona Chart
(Click to enlarge) Current Experience Map
Design Intervention
Task Selection & Sketching
As per the Experience Map, Carlo's experience starts to go downhill from Researching to Keeping in Touch. I decided to focus on these points for my design intervention.
After authoring user stories, I identified the core epic and decided on the primary task/ product function: connecting people and communities of similar interests and passions.
I developed a Task Flow Analysis that visualizes the proposed sequence of steps that Carlo would encounter when trying to join an event and interacting with a fellow attendee.
Read more: User Stories
(Click to enlarge) Task Flow Analysis Map
I then created a UI inspiration board to investigate and evaluate a range of solutions that currently exist for social network apps. Based on the users' responses of enjoying visual and tactile apps, I specifically looked for highly interactive features such as social maps, sliding lists, and horizontal overflows.
Looking at the social maps, I was especially drawn to the idea and theme of circles. Defined as a "group of people with shared professions, interests, or acquaintances", it has benefit in being incorporated in everyday vernacular.
Looking at the social maps, I was especially drawn to the idea and theme of circles. Defined as a "group of people with shared professions, interests, or acquaintances", it has benefit in being incorporated in everyday vernacular.
I included these in my concept sketches for my task flow.
See more: UI Inspiration Board
(Click to enlarge) UI Inspiration Board
(Click to enlarge) Concept Sketching
Wireframing & Prototyping
Low Fidelity Prototypes
I translated my concept sketches into grayscale wireframes and interactive prototypes. I created a total of 3 iterations of my LoFi Prototype, with the first 2 being subjected to 5 Usability Testing sessions each and appropriate alterations depending on user task completion.
See more: Final LoFi Prototype
Notably, I found 4 widely-experienced errors in my initial prototypes and resolved them accordingly:
• changed Home page to Map View page for easier identification
• replaced numbers on rings with orbit icons for simplicity
• changed navigation bar icons for better recognition
• changed Attendees List gesture for successful task progression
Read more: Usability Test Plan and Sessions Output
(Click to enlarge) Usability Testing & Sub Task Findings
(Click to enlarge) Map View Page Revisions
(Click to enlarge) Foodie Page Revisions
(Click to enlarge) Attendee List Page Revisions
Brand Development
For brand development, I began with a list of adjectives that convey the brand values such as welcome, carefree, casual, inclusive and encouraging.
Keeping the theme of circles in mind, I began ideating the brand names, with the result being Orbits: a galaxy-themed brand that embodies a positive outlook towards inclusivity and community involvement. Having a galaxy theme can remind people that a vast, new space such as a new city does not entail loneliness. Rather, a reminder of the presence of other beings in close proximity who are similarly attracted into the city.
I went through the process of curating mood boards , sketching my wordmark and icons, before eventually settling on brand colours.
See more: Mood Board
(Click to enlarge) Mood Board, Word Mark, and Brand Colours
High Fidelity Prototype
At this stage, I implemented the colour palette and imagery reflective of my carefully curated brand identity. This included elements such as vibrant gradients, and representative & casual profile icons.
I added subtle animations, transitions and utilized colour to better distinguish active and inactive states.
Task Flow
Remember that Carlo is feeling anxious about the prospects of making friends in Vancouver.
•He opens up his Orbits app and thinks, maybe, today will be different.
•The Map View loads, and he scrolls around to see his current connections such as Ben & Kate, and hovering friend suggestions such as Ian.
•He heads to the Browse page to see his current orbits. Always hungry, Carlo checks out his Foodie orbit. Carlo notices that Kate just posted a meet up!
•Carlo views the Event, excitedly joins, and checks out Ian's Profile
•With 2 orbits in common, Carlo confidently sends a Friend request and a Message
•Ian accepts his request, and asks if Carlo would be interested to join a DnD campaign.
• Ecstatic about the turn of events, Carlo quickly checks his Map View, to find Ian as a new connection.Carlo feels hopeful and excited about his future in Vancouver.
(Click to enlarge) High Fidelity Prototype Screens
Alternative Platform
I chose an Apple Smart Watch as an alternative platform for my app because of accessibility and portability. Although not as widely used yet, a smart watch companion app can benefit users with a more seamless exchange of social network information.
With this platform, Carlo G. can easily display his QR code and add friends on the spot. In scenarios such as Carlo meeting someone at an in-person event, this alleviates the need to pull out his phone to manually add a new friend or verbally spell out his name/username.
See more: Apple Watch Prototype
(Click to enlarge) Apple Watch companion app
Conclusion
Design Impact
Orbits provides individuals a curated digital platform that helps them find their people and their sense of community in a big city. The product resonated with most of the users involved in the user interviews usability tests. They stated that it would be something that they would enjoy using especially with the tough nature of making friends in Vancouver. Users especially enjoyed the tactile interactivity of the map, and were eager to increase their connections.
Similar to its product brand values, Orbits' UI is playful, yet clean and modern. Regardless, the design successfully balances aesthetic with accessibility, as it passes Level: AA standards (Distinguishable) for colour contrast and font sizing.
Key Takeaways
This was my first time independently designing an app from start to finish. Because of the competitive social platform space, I had challenges distinguishing Orbits from its competitors. I needed to differentiate my app through delightful map interactivity and distinct branding; colour became central to my design, but never at the expense of usability or accessibility.
Through this process, I also learned the importance of organization in creating an inventory of my app's assets, and used this reference library to consistently adapt my designs for the marketing website.
I'll be continuing to conduct user tests for my high fidelity prototype in order to further develop the Orbits app, along with my marketing assets. I also plan to research more about NFC feature logistics to make adding friends as easy as a contactless tap of each others' devices.