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;
2. Design userflow
3. Design wireframes
4. Define UI elements & style guide
5. Convert wireframes to High fidelity
6. Test with users
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.
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
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.
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.
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.
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
Additionally, I defined greys, accent and other secondary colours.
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
sans-serif family - Roboto was chosen to ensure consistenty across mobile and web.
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.
Valuable insights from the test sesions were key to iterating the interface design. Eventually a
was agreed upon and I handed off design specifications to the developer.
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.