Enhance Your Language Skills With An Enhanced User Experience
Using UX Design practices to create an app for a language-learning social club in Washington, DC
First and foremost, this design project was so much fun to work on. Not only was the topic, language-learning, a personal passion of mine, but it was such a privilege to work with my talented teammates. Each person was responsible for leading one aspect of the design process, delegating tasks to be executed upon equally and as needed. With that being said, it would be my pleasure to walk you through our design process…
Scope
Team (Name, Role):
- Myself, Product Manager
- A. N., Research Lead
- Angela Ru, Service Lead
- Jonathan Lutton, Design Lead
Time: ~2 weeks
Client: Conversational DC
Deliverables: Market Research, User Interviews, Ethnographic Research, Wireflows, Usability Test Results, High Fidelity Prototype, Client Presentation
Tools: Google Drive (Docs, Sheets, Slides), Miro, Trello, Figma
Introduction
Conversational DC is a social club based in Washington, DC that hosts immersive events in social settings where you can chat in another language over a drink. The club was founded by Ben Green and Lauren Aitken, two language-lovers who wanted to replicate the immersive experience that one might encounter while studying abroad to hone their speaking skills. For that reason, attendees at each event exclusively speak in the featured language, but speakers of all skill levels are welcome! What started as a place to practice speaking in a foreign language for a small group of friends very quickly turned into a community for speakers of Spanish, French, German, Arabic, Portuguese, and Japanese in our nation’s capital.
Let’s Get Started
Objectives
To kick things off, we scheduled a call with Ben to understand the current business model, business case for the app, and key functionalities or goals. Based on that conversation, we determined the following four objectives for our mobile app design:
It’s important to note that during this call, Ben advised us to deprioritize the language-learning functionality, but to keep it on the list for future considerations.
What Does The Business Model Look Like Now?
After that call, we conducted an audit of Conversational DC’s website, Eventbrite page, and Facebook group. As a result, we discerned the following foundational facts about Conversational DC’s current business model:
- Languages: Spanish*, French*, Portuguese, Arabic, Japanese, German
- Types of Events: (a) Free happy hour events (where patrons can purchase drinks) and (b) paid classes / experiences (e.g., wine tastings and dance classes)
- Types of Attendees: Facilitators (hosts), Speakers (fluent), and Learners / Listeners (novice)
- Event Attendance: varies, on average 40 people
- Marketing: Facebook, Eventbrite, word of mouth
- Brand: friendly, welcoming, fun, not professional
- App: Convo — going into this project, Ben had already started to drum up interest in a mobile app that we would now build out
Cue An, Resident Research Lead
Market Research
The first step in any UX design process is of course to conduct research. With our four key objectives in mind, conducted market research on 26 different apps to understand best practices in three key arenas related to our projected app’s functionality:
- Language Learning Apps —Even though we were not building a language-learning app, we performed research in this field to understand what other language-focused communities looked like and how they gamified education.
- Event Management — As a social club that offers events, Conversational DC’s mobile app must be designed with the ability to view, register for, and share events natively.
- Role Models — Generally, we studied any app that could facilitate a sense of connection with fellow users and/or focused on language in some way for its features and functionalities.
Finally, while they weren’t apps, we did take a look at a few community-building platforms to round out our market research. This was a critical step in understanding how Conversational DC might bring people together during and outside of any given event. For this piece of the research, we evaluated organizations like Design & Donuts, District Creatives, Green Drinks DC, and the Korean Language Exchange here in Washington, DC.
Ethnographic Research (aka Observation)
An and Angela, our Service Design Lead, were invited to attend a French-speaking event as “Listeners” to observe and capture user behaviors and emotions. The main takeaway here was that there were two categories of people at the event: facilitators (or hosts) and attendees, of which three subcategories emerged based on behaviors (see Personas below).
User Interviews
The best way to understand what users would actually find valuable is to talk to them, so that’s exactly what An and Angela did next! They came prepared with a list of questions that sought to understand how a digital product might enhance the attendees’ experiences at Conversational DC events.
Time For Service Design To Shine With Angela
Personas
As any good UX Designer knows, you must have empathy for the user! To ensure that the user’s needs were factored into every step of the design process, Angela spearheaded the service design of our app. Service design is primarily concerned with the entire experience from start to finish. In this case, that may start with event discovery and registration to mingling at the event to any post-event activity (meeting up with a new friend, posting photos, etc). To keep us mindful, Angela put together four personas that she identified during the Ethnographic Research stage. Each one differs primarily by their role and key attributes.
Customer Journey Maps
To supplement the personas, Angela also built out customer journey maps for both the Facilitator as well as the three attendees: Listeners, Shadowers, and Minglers. Understanding all the steps in the process, including the technology touch points and user behaviors, were essential in determining which features to prioritize over others.
And Now Over To Jon With The Design
Pulling UI Components from Market Research
Hold on, we’re not quite done with research yet. While it’s important to conduct market research for features and functionalities, it’s equally as important to note how they accomplished that through UI. If you recall, we took a look at language learning apps for gamification, event management apps for content layout and organization, and social platforms for community-building features.
Wireflows
After we pulled out the key features from our research for the MVP (minimum viable product), it seemed like we had a pretty good understanding of what each page would look like. However, we soon learned that each one of us had a completely different vision.
At this stage, we decided to pause, go home, and individually sketch our wireflows. When we came together the next day, we could collectively review our sketches, and pull our favorite functionalities and layouts from each one. This proved an especially effective collaboration method not only for the sake of our productivity, but our sanity. Here’s what we ended up with:
Style Guide
Before you drive the car, you’ve got to understand the rules of the road. In a similar fashion, Jon laid out our style guide for us before we built the prototype. Each letter and shade corresponded to Conversational DC’s existing color palette and font style so as to remain consistent with the brand and enable a smooth hand-off to the client.
Designing in Figma
As our Design Lead, Jon delegated out specific design tasks to the rest of the team and ensured that our design elements were consistent not only from from frame to frame but also with the overall brand. This was a significant undertaking on Jon’s part. Not only was he building his own pages of the app, but he was also checking and tweaking ours as well. Figma was our tool of choice for this prototype due to its collaborative nature (see gif below).
What Do The Users Think Though?
Usability Testing — Round 1
Early on, we knew we wanted to do at least two rounds of usability testing. The first round of usability tests was conducted at the Portuguese event on February 13th. The goal here was to validate product features and observe general user reception. It was especially valuable to get this group’s feedback, as they would be the key target audience. Upon synthesis, we identified a handful of high priority items that would either enhance the experience or correct a technical problem.
Usability Testing — Round 2
After taking a day to iterate on the feedback items from Round 1, we then chose to test with users who would NOT be target users for some unbiased insight. Similar to the previous round, there were a number of feedback items that we chose to prioritize based on how much more delightful, smooth, and comfortable the experience would be.
One-Page Example
Let’s Check In
Remember Those Four Objectives?
Before we move forward, let’s see how well we executed on each of the four objectives from the beginning of this whole process:
Future State
Similar to the customer journey maps before we designed the app, Angela also created a map to outline the entire experience from end to end for all users with the app.
BEHOLD! A High-Fidelity Prototype
Future Considerations
Additional Features
During the research stage, we identified multiple features that would have been excellent additions to our prototype. For one reason or another (most likely time or bandwidth constraints), we chose not to build it in our prototype, but kept it on a list of things to consider for the future. Ideally, Ben and his team might incorporate these features in a later-stage app with more time and technical savvy.
For example, our digital facilitator would also come with games that the Facilitator would manage and push to each attendee’s app (i.e. pair up with someone wearing the same color shirt as you and talk about what you’re doing this weekend)!
Monetization
While the goal of this project was to design the app, Ben also asked us to think about ways that they could monetize. At the very beginning, Ben had mentioned they were toying with the idea of merchandise and partnerships. But through our research, we found inspiration from one of our role model apps: iTalki. iTalki facilitates language learning by connecting users with tutors in a peer-to-peer economy model. Students can book time with tutors, and iTalki gets a cut of the tutor’s profits. Even if tutoring is not something that Conversational DC is interested in pursuing, the model might serve as an interesting jumping-off point for other paid offerings.
Reflection Time
It was an absolute honor to work with this team of talented designers. Each Lead performed to the best of his or her abilities, but knew when to delegate in order to get the job done. And for that reason, I am so proud of the work we did as a team. Personally, I really enjoyed the role of PM. Outlining the timeline of tasks and keeping the team on track jived well with my commitment to accountability and punctuality. The hardest part of this job for me was keeping my finger on the pulse of the team’s wellbeing, pushing when the time was right to meet deadlines and taking our foot off the gas when burnout was on the horizon. As for the client, we certainly appreciated the creative flexibility that Ben entrusted with us, as well as his passion for the product. We hope that we will one day register for an event with the Convo app in cities around the world.
