The Challenge
Our client Mark, Chair of Sustainable Business Leadership from School of Business of British Columbia Institute of Technology (BCIT), wanted to create a platform to provide community members with opportunities to learn and share their skills with each other.
Mark decided to pilot this idea among BCIT students as this is a small community he is very familiar with and saw a good fit.
Mark already had a website called WeLearn built (was still a preliminary version). However, Mark thought a mobile app would be desired as the BCIT students are on their mobile devices all the time.
Our team was tasked with building a WeLearn mobile app to support community learning and teaching, with BCIT students as the early adopter.
The Team
Our RED Academy design team consists of three UX design students–Aaron, Michael, and Ying(myself); and two UI design students–Wendy and Khoa. We three UX designers focused on the flow and function of the design, while our two peer UI designers worked on the look and feel of the design.
The Discovery
Client’s Vision
Not only did Mark want WeLearn to support community learning and teaching, but he also envisioned it as a safe space for BCIT students to develop professional skills and business acumen. For example, in WeLearn, tutors decide how much they want to charge. They could teach for free if they would like to–e.g., to gain teaching experience. Curriculum subjects may be a big focus for the BCIT community, yet extracurricular subjects and informal learning (e.g., lunch and learn) are welcome too.
User Interviews
We interviewed both the BCIT community (7 participants) and the long-term user groups of the general community (another 13 participants). The interview questions probed into participants’ learning and sharing behavior and preference, as well as their lifestyles and values.
Key Themes
- BCIT students live a very intense student life due to the demanding course load. Spending time at school in a cohort is a huge part of their life.
- Friends, family, and word of mouth are the common starting points for looking for learning resources besides Google search.
- Participants like to learn in a fun, casual, and calming environment.
- When picking a teacher, participants not only look for qualifications, personality and value alignment matter too.
Opportunities and Direction
Based on the key insights from user interviews, we identified the design opportunities & direction of WeLearn.
How could we:
make learning resources users need more accessible to them and support their busy lifestyle?
support users in finding a teacher/course that is the best fit (regarding schedule, teaching style, and value alignment)?
encourage community learning and sharing?
Mapping the Customer Journey of WeLearn Website
To inform our design, we also mapped the customer journey of the existing WeLearn website. As the website was still in a preliminary draft status, some problems were more functional than design problems (e.g., filter/search not working). Still, this exercise highlighted some pain points of the WeLearn web users that we felt significant to address for a positive user experience, which include:
- Support sorting/refining search results
- Asking for minimum information when users sign up. Asking for too much information at this stage could annoy users and make them leave.
- Sufficient, quality course information to support users’ decision making.
Domain & Competitor Research
The goal and user group of WeLearn were unique– supporting in-person learning & sharing of a small, local community. We explored and reviewed the landscape of indirect competitors, i.e., apps that have similar purposes or user groups, to inform and inspire our design.
A few good examples we found included Meetup, Airbnb, Reco (a book recommendation app), and SkillShare (an online learning platform where you can take classes with teachers all over the world). We identified some useful features in these apps and wanted to leverage them in WeLearn:
- Personalized recommendations (all of them) based users’ interests and locations, as well as what is popular/free nearby. This feature could make learning resources more accessible to WeLearn users.
- Thoughtful onboarding design, be helpful, not annoying (such as Reco and SkillShare). Users are asked to specify their interests so that they can be provided with better-personalized recommendations. Users have the option to skip it too.
- Social context. For example, In the Meetup app, if any of the user’s social media (e.g., Facebook) friends are going to a meetup, they are highlighted for the user on the RVSP list. We thought such social context is a smart way to enable WeLearn users to leverage their social connections for decision making.
- Clean design. All of these apps are relatively mature, widely used apps. Their UI design served as good examples.
The Users
Based on our user research, we developed two personas: a primary persona Stuart Dent for the early-adopter user group of BCIT students, and a secondary persona named Sally Linn for the general community user group.
Scenario: Stuart Dent with WeLearn App
We created storyboards for our primary persona Stuart. This helped us visualize how WeLearn could make Stuart’s life easier by helping him quickly find a quality tutor that suits his needs.
MVP Features
It was time to dive into features. We brainstormed key features of WeLearn guided by our research findings and design direction. We then prioritized the features using the Four Quadrant Matrix method (see left). We categorized the features into four quadrants based on their impact and effort. From there we arrived at our Minimum Viable Product (MVP) feature list, including the following key features.
Key Features
- Personalized course suggestions based on users’ interests, location, and social network. Users will be asked to specify their location and interests during the onboarding process (which they can also skip and come back later).
- Social context, such as friends’ activities on WeLearn (e.g., if they are going to the same class), as well as friends’ reviews for teachers (showing friends’ reviews first). Such social context could be achieved through social login.
- Viewing and writing reviews for teachers (users can only rate teachers they have taken classes with).
The Pathway
We then designed the user flow and mapped the MVP features into screens. Through this exercise, we were able to identify the screens involved in the flow and have a more clear idea of the size of work. We decided to focus on the learner’s flow due to the time constraints.
Iterative Design
We started the design from sketching screens on paper, and moved forward the design through iterative testing and making changes.
Sketching
We conducted design studio in the sketching phase. We sketched the screens individually first. Then we compared notes, picked the best parts from each, and merged the design.
From lo-fi to hi-fi
Testing and Iterations
Some interesting findings from our iterative testing are discussed below.
Tab Bar Icons
During the early design phase, we had a hard time reaching consensus on the design (function or form) of two tabs on the tab bar. The usability testing feedback helped us move forward and make an informed decision.
The first one was the “create/edit” tab (the third one from left). Its meaning was context-dependent in the early design: It could mean “create a course”, “write a review”, or “suggest a class” depending on the context. It was evident in usability testing that our participants preferred the tab to be context-independent, meaning the same thing throughout the app. We decided the dedicate this button to “creating a course”.
The other one was the “My Classes” tab icon (the fourth one from left), where users can view their upcoming class schedule, as well as classes they have taken. We initially had a “list” icon. However, most participants didn’t get it. We changed it to a calendar icon and tested it again. It was well received.
Teacher Review Icon
We decided WeLearn users can provide teacher feedback by writing reviews, NOT star rating (we thought star-rating could be vague and arbitrary). In the early design, the teacher review link had a star-rating icon. Our participants assumed they could star rate the teacher by clicking the icon. They were confused when they found out it didn’t work. We removed the star rating icon as a result.
NOTE: Later in our design process we experimented with gamification to make the user experience more fun. One idea was to reward users with badges based on their involvement and reviews they got (see above right).
“Bookmarked” Feedback
Our participants commented they wanted to see feedback when they click the Bookmark button to save a course. We added a Bookmarked state, with the bookmark button colour changed to orange (see below).
The Prototype
Experience the Invision prototype below. It shows how Stuart would use WeLearn to find a tutor for his ECON2200 course.
Recap
Below is a summary of how we designed the WeLearn app to achieve our design goals.
Future Considerations
We suggest the following as future considerations:
- Further explore gamification to engage users.
- Design the flow for the teacher role.
- Support in-app chat to foster communication and community building.
Thanks for reading! You are more than welcome to leave a comment and share your thoughts. :)
