1951 Coffee Mobile App — A Case Study
Overview
1951 Coffee is a non-profit coffee organization that provides job training and employment to refugees, asylees, and special immigrant visa holders in the Bay Area. Due to the lack of resources and language barriers, newly resettled refugees struggle to attain living-wage jobs; these are the challenges that 1951 Coffee hopes to address through its barista training program. Through Blueprint, Technology for Non-Profits, I worked with a team of student developers to design and build a communication mobile app for this non-profit!
Understanding the problem
1951 Coffee runs two-week long training programs that teach students the essential skills to be successful in barista roles. After completing the training program, graduates can apply their skills in local barista jobs. The problem is that 1951 Coffee does not have a central or scalable method for administrators to communicate with the refugee students and graduates. Currently, texting makes up 80–90% of communications.
Administrators regularly text current students information and reminders that are relevant to the training session. For example, administrators might text and remind students to wear closed toed shoes to class. Additionally, administrators reach out to past students to share job opportunities and invite them to various events. Although texting is a familiar mode of communication for most refugees, it can be really time consuming for the administrators. As the non-profit continues to expand and more students participate in the program, texting as the primary mode of communication becomes even more inefficient.
This brought us to the problem statement:
How might we streamline and strengthen communication between 1951 administrators, current students, and graduates?
Understanding the users
1951 Coffee has a store location that is only two blocks from our campus. As a result, we were able to carry out in-person conversations to learn more about the non-profit, the administrators who run the training program, and the students. Although the non-profit came with a pretty clear idea of what they wanted in a mobile app, it was important for us to make sure that we were truly understanding the problem and coming up with the right solutions.
The administrators
In my initial conversations with the administrators, they emphasized how inefficient and time consuming it is to individually text announcements to over 200 students and graduates. Each administrator also has pain points that are more specific to her work flow. I took some time to learn about each administrator’s day to day work so I could uncover more opportunities to improve their work flows with the platform that we build.
In addition to wanting a more efficient communication system, administrators hope that students find a strong community through 1951. Although the training program itself is only two weeks long, administrators hope to stay connected with students months and years down the road.
1951 students and graduates
After talking with the administrators, I had the opportunity to speak with some students and understand what is important to them and how we could further empower them through what we are building. 1951 students are refugees from all over the world. Most students are new to the English language and many of them have limited experience with technology. These were especially important points to keep in mind when moving forward with my designs.
Through those conversations, I learned that students hope to have more access to resources and career guidance that will help them in their future careers. Even though the training program itself is only two weeks long, students develop strong relationships with other students and want to stay connected with this community of people who share similar experiences. When I attended the training sessions, I noticed immediately that, despite their language barriers, the students were all very supportive of one another.
Defining key features
I worked with my project leader to define key features that would add value to both the students and the administrators. These features are intended to strengthen communication, make resources more accessible, and foster a greater sense of community. At this stage, we addressed limitations and discussed what we could feasibly build within 3 months for our MVP product.
Administrators will curate the content shown in the app by inputting them into an Airtable workspace. Students will access and interface with the content through the mobile app.
- Message: Communication is the core feature of the app and messages sent by administrators will be shared with groups or subgroups of students.
- Job postings: The second feature centers around a list of barista job openings curated by the employment specialist. Whereas previously the employment specialist could only reach out to a few students about an open job, she hopes to make job postings more accessible to all students.
- Upcoming classes: We learned that the majority of 1951 students find out about the program through their friends. Current students and graduates can view and share upcoming class schedules with friends and refer them to the recruitment specialist.
- Resources: The final feature contains resources for students such as the barista training guide, tutorials, interview prep materials, and other career-related resources.
Iterating, user testing, more iterating…
Next came the step in the design process that I personally enjoy the most: translating insights into tangible designs, asking for feedback, and iterating upon the feedback. I took the features we had defined and translated them into simple wireframes that focused on simplicity and consistency.
While working on higher-fidelity mock ups, I struggled to apply 1951’s brand colors in a meaningful, consistent way. At one point, I experimented with using darker color patterns to help users better distinguish between the different screens. Although dark mode did provide more contrast, I found that the increased usage of colors was a little bit distracting and eventually chose to revert back to a lighter color scheme for my final iteration.
Once I had some mid-fidelity screens prototyped, I attended one of 1951’s Once I had some mid-fidelity screens prototyped, I attended one of 1951’s training sessions to conduct some live user testing with two students. A challenging part about user testing was the communication barrier as the students often had a difficult time understanding my questions. I focused on keeping my questions short and concise, and carefully observed how students were navigating the features.
Through testing, we noted some areas of confusion:
- Unclear abbreviations: Abbreviations and patterns that I often took for granted were confusing for students who were new to the English language. For example, I realized that the abbreviation of“MWF” for “Monday, Wednesday, Friday” was not understood by all students.
- What is clickable?: Students seemed to get confused as to which buttons were clickable. Visually, buttons needed to stand out more.
- Applying for jobs flow: The previous process of applying to a job required that the student message the recruiting specialist about their interest in the job. This process is very unintuitive and students were unsure as to how to proceed.
User testing was extremely informative and guided my final iteration of designs.
Final designs
This final iteration of designs has been implemented and are live in the app store!
Announcements
I created distinct card layouts for two types of messages: general announcements and upcoming events. Students are sorted into cohorts so administrators have control over the messages that each student can see. Therefore, students will only receive messages that are relevant to them. If students have questions, they can reply to the individual message and contact the administrator who posted it.
Job postings
The employment specialist will post new barista jobs periodically. Students can apply to a job by clicking the “I’m Interested” button and the recruitment specialist will reach out to the student with next steps; they no longer have to message the employment specialist to express interest in a job. Students can also reach out to the employment specialist for general career guidance and interview practice.
Upcoming classes
Graduates can view and share upcoming class schedules with their friends and put them in contact with the recruitment specialist. Graduates are encouraged to support new students by attending events such as open houses and graduation.
Resources
The resources screen provides barista guides, worksheets, and tutorials that will help students prepare for interviews and assist them throughout their barista work. Extra care was put into making sure that all the resources and videos are accessible on different devices.
Check out this interactive prototype (Figma community) if you are curious to see how these screens flow together!
Launching the MVP
We launched our MVP at the beginning of Spring 2020 in the hopes that we would have more time to observe how students were using the app. By doing so, we were able to refine existing features while we implemented the remaining scoped features. After launching the MVP, our team attended a training session to onboard students and observe how they interacted with the mobile app. We were able to gather valuable insights and add them to the list of action items to tackle during the second semester. Two discoveries that we implemented solutions for were:
- Address links: Addresses are listed throughout the app but we realized that students would have to copy the addresses into an external map app to get more context. Clickable address links that open up in Apple Maps or Google Maps would be extremely helpful; this was a feature I had overlooked the first time around.
- SMS pre-filled subject: To provide administrators more context as to who was replying to their posts, we pre-filled subject text in their SMS messages that displayed the student’s name and class cohort. However, we noticed that students would get confused and delete the subject text that we had provided. To make the existing subject text look more intentional, we added an extra space between the header and where the student can start typing his or her response.
Some final thoughts
1951 is a coffee shop that I frequently visit (for americanos and mochi donuts). I am incredibly grateful for this opportunity to work with a local organization that is making such a positive impact on the refugee community. Designing for a unique user group has been a tremendous learning experience and the 1951 administrators have been delightful to work with as they were always open to new ideas.
I really enjoyed working closely with a wonderful team of talented, passionate developers who code and debug with great enthusiasm. Through this process, I learned how to communicate design changes frequently and efficiently to developers. Collaborating so closely with engineers from the start allowed us to align our goals early on and discuss potential constraints. Due to COVID-19, the second half of this project was conducted remotely. As a team, we learned how to navigate the challenges of collaborating remotely.
Additionally, I was able to receive honest, constructive feedback from the other five Blueprint designers during weekly design critique sessions. Together we discussed our decision-making process, refined our prototypes, and explored the powers of Figma!
This project has taught me so much about the role that design has in empowering different communities. I hope that what we have built will make a lasting impact on 1951 Coffee, as this project has surely left a lasting impact on my career as a designer!
