Brew Bonds Mobile Application
Helping undergraduate students who are curious about networking but unsure where to start​​​​​​​
Four mid-fidelity prototype screens are shown for the tasks and community tabs. Moreover, the prepare agenda and develop email invitation screens, within the tasks tab, are shown.
Overview
My team and I collaborated with the Innovation Hub at the University of Toronto (UofT) for a graduate course, The Fundamentals of UX. We specifically focused on the domain of future-ready students in relation to career services. Moreover, keeping in mind to design for students, we decided a mobile application would be the best platform to achieve optimal engagement and access in terms of portability.
Problem
Undergraduate students are overwhelmed with the transition from the classroom to the workforce. Without the means of industry connections, they cannot receive mentorship or guidance to compete with established professionals in their fields and to meet employers' expectations, thus resulting in an anxiety-inducing limbo. ​​​​​​​We chose to target this problem because students are uninformed of the potential pathways available to them as well as the skills and knowledge they need to successfully prepare for their future careers.
Solution
Our mobile application, Brew Bonds, aids undergraduate students to take their first step towards networking with industry professionals through coffee chats (informational interviews). ​​​​​​​​​​​​​​We provide an opportunity for students to learn how to plan personalized agendas, develop memorable elevator pitches, and craft thoughtful email initiations to support building their professional identities. Also, students are able to interact and learn from each other within the ‘Brew Bonds’ community.
My Role
•  Research Analysis Lead
•  Developed questions for the interview protocol & survey
•  Conducted an interview
•  Created, grouped & defined codes for the affinity map
•  Helped create the as-is scenario, empathy map & persona
•  Ideated some big ideas
•  Conducted a lean evaluation
•  Sketched, wireframed, and prototyped
•  Conducted a summative evaluation
Team of UX Design Students
Andrea Gonzalez
Hannah Lee
Jyoti Singh
Mingli Wang
Tools Used
Figma, Miro, Qualtrics Survey, Google Workspace, Zoom
Process
My process has five steps such as user research, research analysis, ideation, prototype and evaluation.
User Research
Target Users
Upper-year undergraduate students at UofT
Students in year three or higher at the St. George campus
Experience with career services at UofT
Searched for and/or accessed career services or support at UofT
Why did we choose them?
Amplified feelings and thoughts as graduation approached
Wanted to capture the organic feelings and thoughts of students on how well or not they were prepared to transition into the workforce
Actively prepared for their career
Wanted students who used career services at UofT to ensure they actively tried to improve on preparing for their careers instead of students who solely focused on academia
Adequately used career services at UofT
Upper-year undergraduates would have sufficient time to experiment and utilize career services or supports at UofT to know what worked and didn’t work for them compared to lower-year undergraduate students
Acknowledge trending services or supports
Wanted to recognize if upper-year undergraduate students utilized particular services or support that were similar or different from each other
Research Methods
We utilized two research methods, a survey and interviews, to understand the experience of students concerning career services at UofT. Combining quantitive and qualitative research methods, helped to identify and verify any patterns that emerged from both methodologies. The research provided gaps in what students wanted the most in those services but did not receive.
22 Survey Respondents
We received 22 survey responses through Qualtrics on various platforms such as Facebook, Instagram, WhatsApp, Discord and LinkedIn. The objective of the survey was to understand the goals, expectations, overall satisfaction and suggestions for improvement of the career services.
5 Semi-Structured Interviews
We conducted 5 semi-structured interviews, one of which I conducted. The objective of the interviews was to dive deeper into students' experiences and access to career services at UofT.
Quotes
Three quotes of students saying they want networking events and career-related opportunities, as well as indicating that contacts on LinkedIn don’t respond back to them.
Research Analysis
Taking the initiative to be the research analysis lead, my main priority was making sure everyone contributed and brought value to the project. Since many of the tasks overlapped with one another or needed to finish before starting others, creating a delegation table ensured each member knew what they were doing and was familiar with what other members were completing. As the lead, I facilitated and collaborated with members in their tasks to work more effectively throughout the analysis process.
Affinity Diagram
I converted data from the survey and interviews into short summaries (codes) then gathered and defined themes for the affinity diagram with another member. This allowed us to see the connection between the data and the user, giving us a holistic view of what students wanted to support and grow their careers. We discovered six major themes and several sub-themes.
Main Insights and Findings from the Research
Emotional support as a bonus in career support relationships
Students wanted to build relationships through career services to gain emotional support such as motivation and encouragement in addition to career support
Personalization related to program/field-specific support
Students struggled with generalized guidance and wanted more personalized support according to their program and field of study
Opportunities for networking
Students wanted advice on networking to improve their confidence and opportunities for networking with alumni and industry professionals
Real-life work experience in their employment of choice
Students wanted to have first-hand understanding of working in their employment of choice, in particular, daily routines, social norms and workplace culture
The affinity diagram has six major themes such as sources that lead to career services, career supports that helped students in the past or present, disliked factors within career services, individual attitudes towards career services, desires for soft skills improvement from career services or supports and lastly, career focused desires from career services or supports.
Moving forward, the research had an immense impact in terms of guiding us with the direction of our project. We went from generally understanding the students’ experience with career services at UofT to focusing on providing students with networking support related to their program and field of study so they can build relationships to prepare for their desired employment.
Persona
We designed our persona, Nadia, to help us synthesize the experiences of upper-year undergraduate students who are new to networking. Moreover, the persona allowed us to construct design decisions that would support personalized networking, coffee chats, for students.
Our persona, Nadia the novice networker, indicates five sections such as about, goals, needs, obstacles, and desires.
Ideation
To bridge the gap between research and design, we generated ideas on how to provide personalized networking for students. We developed 19 big ideas focusing on three categories: 7 ideas to support pre-chat preparation, 6 ideas to build connections and 6 ideas to get industry insights. Next, voting on our ideas based on feasibility and impact, we decided to design a mobile application to help students network through coffee chats, Brew Bonds. Afterwards, we formulated design requirements by converting these ideas into features of Brew Bonds such as chat finder, email crafter, and community.
Major Features
These three features are necessary to solve the problems we found in our research. The Chat Finder provides a way for students to obtain personalized agendas with discussion questions based on their goals and whom they want to speak with (professionals in the same or different field as them) for coffee chats. The Email Crafter provides a way for students to develop email invitations with instructions to create a compelling elevator pitch. These two ideas address the issue of students not receiving program/field-specific personalization. Lastly, students can access a community of UofT students to ask questions in the forums and get support along the way. This idea addresses the issues of students not receiving emotional support and first-hand understanding of their employment. All three address the issue of students not having networking opportunities.
The major features of Brew Bonds are chat finder, email crafter, and community.

Coffee PNGs and Sugar Vectors by Vecteezy

Prototype
After curating our three best ideas to form Brew Bonds, we sketched design concepts to display in a low-fidelity prototype.
Lean Evaluation / Guerilla Usability Test
We conducted a 5-second test, think-aloud for 3 task flows, and post-task interview with five users to understand the overall impressions of the low-fidelity prototype and its flow. The evaluation enlighted us with issues that our users experienced, aiding us to iterate our design in the mid-fidelity prototype.
Iterating our Design
Ambiguous Homepage
Finding
4 out of 5 users had difficulty understanding the purpose of Brew Bonds, many of them thinking that our app was made to order coffee
Iteration
We included an optional tutorial for users to understand what coffee chats are and how the app works in the onboarding
Changes from before and after to improve conveying the purpose of brew bonds are shown by a low-fidelity prototype, home screen, and mid-fidelity prototype, onboarding screens.
Ambiguous Labelling of Services
Finding
Users perceived Chat Finder as a matching tool and second-language speakers did not understand the term 'craft'
Iteration
Chat Finder was renamed to Prepare Agenda. Also, we changed the verb ‘craft’ to ‘develop’ email invites.
Changes from before and after to improve labelling are shown by a low-fidelity prototype, home screen, and mid-fidelity prototype, home screen.
Unexpected sections in 'Email Crafter'
Finding
Users thought greetings and introduction should not be separated. Found the presence of agenda inconsistent.
Iteration
We combined introduction and greetings. Also, we eliminated agenda from email invites.
Changes from before and after to improve consistency throughout the app are shown by a low-fidelity prototype, email crafter screens, and mid-fidelity prototype, email crafter screen.
Overview of Adjusted Major Features
Overall, we adjusted the major features based on improving clarity for the user. Specifically, we wanted to ensure users understood the purpose of Brew Bonds, which is to prepare students for coffee chats. Also, we refined terms used on our app that caused confusion or misunderstanding. Lastly, we reorganized sections of the app so, it is intuitive to use and expected by users. These changes are important because when users comprehend the app in general, they can easily navigate, discover and learn, allowing them to use the app thoughtfully.
The adjusted major features of Brew Bonds are prepare agenda, develop email invitation, and community.

Coffee PNGs and Sugar Vectors by Vecteezy

Final Mid-Fidelity Prototype
Evaluation
Summative Evaluation
We conducted a 5-second test, observation and think-aloud for 3 task flows as well as a post-task interview with five users. Using the DECIDE framework helped us understand the usability, clarity, efficacy and satisfaction of the mid-fidelity prototype and its flow. The summative evaluation informed us with the issues that our users experienced, aiding us to think of future iterations for our design.
Future Iteration for our Design
Issues with the Functionality of Features
Finding
4 out of 5 users expressed concern about losing their progress and the lack of a ‘save agenda’ button in the Prepare Agenda tab.
Future Iteration
We will autosave and add a ‘save agenda’ button so users know their progress is saved and can return to it at a later time.
Overload of Information
Finding
All 5 users indicated that the app overall had a large amount of text.
Future Iteration
We will reduce text by replacing some of the text with quick examples to demonstrate what to write.
Inability to Personalize Agenda​​​​​​​
Finding
All 5 users indicated that this feature did not support enough customization for personal use. Moreover, they indicated the 'discussion questions' felt too rigid and were something they could find on Google. ​​​​​​​
Future Iteration
We want to increase the amount of flexibility by giving users options to add, edit, and remove questions. Also renaming ‘discussion questions’ to ‘suggested questions’ indicates to users that these are not clear-cut questions they need to ask.
Inconsistencies in Design​​​​​​​
Finding
4 out of 5 users indicated that similar design elements did not interact in the same way in which it involved different types of user input.
Future Iteration
We will eliminate this confusion by making interactions with elements consistent throughout our app by providing context cues.
Next Steps
Dictate Text Feature
I want to provide an alternative way for students, especially those with visual and/or mobility impairments, to access Brew Bonds by being able to convert speech to text instead of needing to type.​​​​​​​
Colour Contrast
I want to enhance Brew Bonds visually while keeping in mind colour contrast ratios for text sizes on varying mobile screen sizes, outside use and visual impairments.
Simple Language
I want to avoid using jargon and complex language throughout the app and increase images or icons to convey topics so second-language speakers of English, many of them being users with auditory impairments, can use Brew Bonds without any language barriers.
Professional Perspective
I want to expand Brew Bonds to aid students in finding professionals to network with, in addition to preparing them for coffee chats. Specifically, targeting professionals, potentially alumni of UofT, who want to network and build leadership skills could also benefit from developing their professional identity with Brew Bonds.
Lessons Learned
Lesson #1: Design is a non-linear process
This project truly helped me understand the concept of ‘design thinking’. Especially during the beginning stages of our project, we had to change and adapt our project to have the research guide us. In particular, we had to step back from focusing on career-related mentorship to general career support at UofT because we soon discovered students only knew of and took part in education-related mentorship. I now understand the importance of testing a pilot survey before administering the actual survey and conducting interviews to assess if the team is heading in the right direction.
Lesson #2: Communication is crucial
At first, figuring out the dynamics of the group was challenging since we came from different academic backgrounds and had different levels of expertise in UX design. In particular, we had differing opinions when finalizing each other’s work. However, I learned that it is crucial to encourage discussion within the group by emphasizing to provide feedback for one another. This ensured everyone felt heard and had their work validated.
Thank you for visiting my portfolio!
↑Back to Top