Out there in the real world, there are countless different activities we all engage in according to personal preferences. Some people like to take cooking lessons, others like to go hiking, and some others choose to spend their free time learning useful career skills or socializing. But many of these things can only be experienced physically, by being there… or can they?

A major design challenge in any industry is to translate offline, in-person experiences into attractive digital alternatives. I personally discovered the challenges this carries, when my team partner and I were tasked during our UX Design bootcamp at Ironhack Berlin, with designing an online platform for Fun People, a company offering in-person courses for adults, on topics such as yoga, cooking, languages and music. The company’s problem statement was to offer an engaging online alternative for people who don’t have the time or resources to attend an in-person workshop.

My partner, Valquíria Noya and I decided to follow a user-centered design process to address this task. In order to design an engaging online alternative, we first needed to understand what makes a workshop engaging. Is it having a charismatic teacher? Doing a variety of dynamic activities? Learning through games and having your abilities tested? Or could it be the connection with other people taking part in the course?

User research

By getting to know our interviewees, we got a clearer picture of who the user of workshops is, and what the competitive advantages and challenges of an online workshop are. Some users took part in courses to further their technical skills, while others took it as a leisure activity; most perceived a greater variety and accessibility of online courses in comparison to in-person ones, and they had all levels of previous knowledge in the topic they studied. Interestingly, several users said they could get the necessary motivation just by studying something of their choosing, but they agreed that an engaging teacher could really make a course more fun. However, they were generally skeptical about gamification elements, tests and schedules. They also said they preferred a simple platform, but that it was important to have the necessary support.

user

User Persona

Once we had a better idea of who our target user was and what was important to them, we proceeded to make a survey, in order to quantitatively validate or refute our results from the interviews. The results validated what we learned from the interviews: the majority of respondents would consider taking online courses to pursue a hobby, they preferred flexibility instead of having a schedule, they were ambivalent about gamification elements and tests, they didn’t find it very valuable to have live lessons as opposed to pre-recorded ones, they preferred to use their computer for the course, the majority thought it was important to have an engaging teacher, and claimed they would feel confident taking an online course for something they have no experience in.

Product concept

  • Simple
  • Mentored
  • Affordable
  • Have support for different types of media

Once we had these guiding principles, we started brainstorming ideas, but to keep a structure and save us from falling ill of featuritis, we did a feature prioritization matrix following the MoSCoW (must have, should have, could have, won’t have) framework.

moscow

Feature prioritization

Our idea is to offer personal support in the form of a tutor with whom the students can schedule meetings to discuss their progress; a learning platform divided in lessons and activities, where the students can upload their assignments, if they have any, and check back for the feedback; and an events section where students can interact through a chat, and where in-person events are posted.

Wireframing and prototyping

wireframe

Mid-fi wireframe of the learning platform

Inside the lesson page we also implemented feedback from usability testing, by fixing the header and the footer, and putting a link to the corresponding activity at the end of the lesson, to help direct the users. We also used underlining to show whether the lesson or the activity is selected.

wireframe2

Mif-fi wireframe of the lesson screen

Once we implemented the feedback in our wireframes, we put them together to create a mid-fi prototype, showcasing how a user would go to their current course, take a lesson, and upload their activity assignment.

Conclusion

Another learning from this project is the importance of the UI as a part of the overall user experience. Usability testing highlighted some flaws in our initial wireframes, which we corrected in the next iterations before we wasted time and effort prototyping a flawed product. This really goes to show how usability testing and user research can help a team save time, effort and money.