This was created as a term project by a team of 4, for the Digital Design and Development program at BCIT. The objective was to conceptualize, design, and develop a mobile application to solve an issue in the local community in Vancouver, BC.
We collaborated throughout the product life cycle, from market research to product design, app development, user testing, and MVP stage pitch.
Problem Research, Conception, UX Research, UI Design, Prototyping & Testing, Pitching
Project Management, Resource Management
Using React Native, GitHub, Xcode, and Storybook
PROJECT TIME
Overall: 12 weeks
Discovery & Research: 3 weeks
Design & Development: 9 weeks
Substance users are not criminals - they are individuals with the illness of addiction who need treatment. Not all traditional treatments work for everyone, nor are they available to everyone. Resilient provides necessary resources for treatments outside of traditional rehab.
While focusing on the local community of Vancouver, BC, I also conducted interviews and surveys with the users from around the world.
These are findings from the interviews, surveys and research around substance user communities in North America, Europe, Southeast Asia and South Africa. Our interviewees include current substance users, past substance users, and families of the users.
Most rehabs have reviews on their own website, which the users feel are subjective and biased reviews, or advertisements.
For people who are not ready to enroll in the rehab yet, there isn't a safe place to exchange knowledge and support each other.
Many users opt out of recovery because their needs and/or budget aren't aligned with the orthodox route. Plus, they have difficulty finding resources about alternative routes online.
Individuals who live alone do not receive the emergency assistance they need when they overdose at home.
After the project kickoff, we defined our research strategy and objectives. Understanding the target audience and their challenges were our priority. First, we built an online survey and shared it in various relevant communities. Next, we conducted user interviews to build new personas and to inform the design.
Together with the team, we prepared an interview script with 30 open-ended questions, focusing on our target audiences’ values, motivations, and goals. In just a few days, we recruited 5 remote interviewees and received 13 submissions. Based on these, we identified 4 common pain points, which lead us to the next step.
Using the quantitative and qualitative data from interviews and survey results, we defined the two target group profiles as Chuck (Cook, 23) and Anne (Teacher, 48) to better empathize with my main user groups and prioritize goals according to their needs.
In order to visualize and explore the decisions, pain points, and opportunities that arise while the user interacts with the app, I created a corresponding user journey map for the primary persona.
From the problem findings and scenario keypoints, we identified the main functions for the product as:
— The app provides a detailed database for a wide variety of harm reduction facilities. Users can check the availability, prices, locations, and reviews from other anonymous users. The app allows users to search for facilities nearby using their GPS. This includes safe injection sites, detox centres, inpatient facilities, and outpatient rehabs across British Columbia.
— Helps connect anonymous users to form a supportive network. The forum is in a post and comment format, where users have the space to share their personal stories and knowledge about different ways to get clean. This serves as a community not only for the addicts, but friends and families of those struggling as well.
— In-app SOS button that is always present on all screens. From the emergency contact page, users are able to send a pre-written text, share their current location, and call their emergency contact with a pre-recorded voice message — all with one click.
We began drafting rapid prototyping on paper using the Crazy 8 method, and selected the best ones to further create the wireframes and mid-fidelity prototypes. Initially, the app's main focus was on Facility Search with custom filters and the Community Forum. The SOS button function was added later on after feedback from the stakeholder and the usability testing.
After some revisions on the wireframes and mid-fidelity prototypes, we created the high-fidelity clickable prototypes on Figma. We were able to detect minor pain points in the structure of the user interface via the usability testings, which some iterations and adjustments were made according to the users' feedback.
Swipe left-right to navigate through facility's photos, overview, details, and reviews without leaving the page. Less distraction for the users, easier to browse through each facility.
Enlarged font and button sizes, more accessible in case of an overdose where the phone isn't being held close to the face.
Users can navigate through posts by upvote system, trending, or date format.
From week 7-12, we began developing using React Native and setting up GitHub, Storybook, Xcode phone simulator for front-end, and PostgreSQL for the database. I assisted the lead developer (Deriq Danois) in creating and fixing the front-end components (HTML+CSS). We conducted the second phase of usability testings among our classmates to determine any issues in the functionality of the code. We kept regressing and debugging until the product was ready for the final pitch.
The app was successfully developed and received positive feedback from the final pitch presentation, which we presented to our faculty and a panel of industry judges from tech companies in Vancouver. Along the journey, we faced several challenges and learned many valuable lessons. These are the major challenges we faced:
📝 The initial problem I addressed on my first pitch was opioid addiction and overdose mortality in Vancouver. However, we realized the problem was far too broad and complex to solve with just one app. At the same time, we were also juggling 7 other courses as we're developing the app, so we decided to narrow the scope to functioning substance users and their families instead.
💤 An SOS button isn't practical in the case of an opiate overdose because people become unconscious they can use it. Most of the time, they don't know when they will fall asleep and never wake up, but our stakeholder insisted that we include the SOS button as the primary function. Our solution was to expand the scope of the drug users, to not be limited to opiates but all substances instead.
🐣 None of us had prior knowledge about React Native, how to install dependencies on Terminal, or how to debug the simulator. At the time, we were learning about creating each component and making a database as we were figuring out if any function in our app was unattainable. Later on, we realized the Agile Development would have been more time efficient than the Waterfall we used, but we didn't learn that until the next semester.
🗺 Without guidance from the program in terms of proper UX research, conducting interviews, surveys, as well as good UI practice (including learning Figma or building a design system), I had to self-teach as I led the team and managed the project. This was the most challenging aspect for me, but it taught me the most valuable lessons.
