Klasconnect

A learning tool that makes interaction between students & teachers easier for a better learning experience

Read Case Study

Overview

The Klasconnect team wanted to build a mobile app for an existing web version of the learning tool, this made sense because more young people (students) own and are active on smartphones than desktop computers. I made sure to outline essential features already existing and during the design process, ensured the experience on the mobile platform was consistent with the web version.

ROLE IN PROJECT

User Experience Designer

(User Research & Interface Design)

DURATION

1 Month

The Problem

The goal of the Klasconnect learning tool is to make interaction between students and lecturers easier ultimately making learning a better experience. The team built a web application to achieve this but statistics estimates that there are over 172 million mobile subscribers in Nigeria and smartphone adoption has increased significantly. Students have the lion share of the 172 million mobile subscribers, this means that most students access the internet using their mobile devices, hence for this learning tool to achieve its objective it must cater to this large number of users (students).

The design process

I started out by identifying all stakeholders. Since this was a freelance project, I had to come up with an estimate of the time it would take to research, design wireframes, test and convert to high fidelity. Also, since a web version of the application already existed, I outlined possible screens based on features currently available. See steps I took in designing the mobile apps below;

1. Research

2. Design userflow

3. Design wireframes

4. Define UI elements & style guide

5. Convert wireframes to High fidelity

6. Test with users

Challenges

1. Two mobile applications were planned to be designed in a short time, one for students and another for lecturers. I had to work on designing for both user types simultaneously.

2. Since a web platfrom already existed, the design for the mobile app needed to be consistent with that of the web platform. This is to ensure that users of the existing web platform could easily be onboarded to the mobile app.

Research

I spoke with stakeholders to better understand the goal of the Klasconnect learning tool. This helped me to better understand the features on the web app and why those features existed.

Next, I interviewed some students who use learning tools to know if they found such tools useful, what features they interact with frequently and what features they would like to see. I also explored other similar applications to understand how they work and to ascertain how best to visually represent features on the mobile app. This was helped me grasp the current experience, draft personas and provided direction for the userflow.

At the end of this stage in the design process, I had a clear understanding of features that exists on the web version and based off user interviews I prioritized what features are most important to users.

User Flow

I designed a typical flow for a user on the Student's app from the insights I got from interviewing users on features they interact with frequently.

kc-userflow

Wireframes

Based on interviews and the user flow, I designed wireframes. Designing low-fidelity screens allowed me to quickly define the layout of most of the major screens.

kc-wireframes

Look & Feel

I adapted the primary colour from the existing web platform in the design for the Student App to ensure a consistent experience across both platforms. The primary colour (blue) is a good choice for the design because it symbolizes wisdom, intelligence, and truth. Additionally, I defined greys, accent and other secondary colours.

#2196F3
#637381
#5D536B
#41B883
#ED6347

Roboto was the selected typeface because of its legibility and because it is the default android typeface. Also, because the typeface on the existing platform is Raleway (a sans-serif font) which is a similar font from the sans-serif family - Roboto was chosen to ensure consistenty across mobile and web.

Roboto
Aa Bb Cc

Testing with users

Time to test!!! I collaborated with some students undergoing undergraduate studies to recruit students to test the prototype created in Figma. We were able to get seven (7) students to test, we had a mix of students - some have at some point used a learning tool like Klasconnect while others had never interacted with such tool. From the test session, I noted parts of the app users had issues interacting with and also got direct feedback on some features.

One feature users had issues interacting with was the task manager on the homescreen which had a full calendar view of upcoming and past tasks, I noticed users were overwhelmed by this view so I decided to iterate on the design only showing a week view of upcoming events and took off past events from the view to keep it clean and ensure users focus on upcoming tasks.

After all these changes were made, another test session was scheduled, feedback from these sessions were key to iterating the interface design into the final solution.

Final Design

Valuable insights from the test sesions were key to iterating the interface design. Eventually a final version was agreed upon and I handed off design specifications to the developer.

Students App

Conclusion

Simplicity was key to the design of the apps because they had quite a number of features, so based on insights from research I ensured that the most used features were placed in a bottom navigation menu and so users can easily navigate to these features.

Other features were placed in an hamburger menu and each had a descriptive icon so it's easy for a user identify a feature by merely looking at the icons.

I really enjoyed working on the project but because this was a freelance project, I couldn't follow through the whole development cycle of the application.

back to top

Have a project you want me to work on?

Shoot a mail to

[email protected]