App design | Moodle Mobile

 

Role: UX Designer and CSS developer

Team: Myself and a developer

Time: 2 months

Tools: Photoshop, Moodle Open Source Platfrom, HTML and CSS

Skills: User Research, Data Analysis, Personas, Competitor Analysis, Wireframing, Usability Testing, UI, Development

 


 

The brief

As part of the eLearning team at Croydon College, we have identified new opportunities to make the learning platform mobile compatible. The main aim was to provide our users with a wider experience that could fit their needs while using mobile devices.

 


 

The challenge

As part of the Product Team, the biggest challenge was to influence the Senior Management Team to invest money and time in building a mobile app or a mobile version of the current online learning platform.

Therefore, we collected data from our current platform to show the business where the usage was coming from; we also collected data from the Corydon borough that analysed mobile usage in the area and we gathered white papers from eLearning agencies which were validating the case of mobile learning.

This was enough to get our project going (although with very little money and time) and start building a mobile experience for our users.

 


 

Research methodology

 

 

Business Requirements

  • Meeting, note taking and a lot of post-it notes

I met with business stakeholders including Head of Schools, Teachers and School Officers to gather business requirements. When I had enough post-it on my desk, I started to group needs together as much as possible.

User Research

  • Collaborating with the IT Help Desk Team
  • Analysing website usage data

When you have a little budget, it’s very difficult to conduct thorough users’ needs analysis. We weren’t able to carry out interviews with students or to spend time on building a survey and initially it felt like a challenge for us. However, it was a great learning curve and it allowed me to explore alternative resources and still be able to gather insightful data to make informed design decisions. We collaborated with the IT Help Desk Team to analyse their calls to understand where students needed the most help. We were also able to get stats from the learning platform which gave us an indication of what students used the most.

Competitor Analysis

  • Agencies white papers
  • Mobile usage data research

We also conducted some wide research to understand the current trend in the eLearning world as well as in the mobile industry. An interesting fact that we found about Croydon, it was the extent Blackberry owners between our user range. This clearly showed us that it was pointless to design an iOS or Android native experience as it would probably leave out a large part of our target.

 


The findings

We came to the conclusion that users (being students) only looked for a fast-track solution to get the school work done. However, the business was focussing on different solutions to provide students with a more compelling provision that went beyond school materials and tried to engage students on different levels.

Therefore we jotted down guidelines for our ideation and design phase:

  • A mobile version of the current website (Native mobile app idea was discarded)
  • Access to the messaging system (Brand new school messaging system)
  • Progress Tracker
  • Access to materials
  • College information
  • Library resources

 


 

Definition

Personas

Name: Zara
Course: Business Studies Level 2
Age: 18 years old
Digital Knowledge: Very tech-savvy
Phone: Blackberry

Zara loves coming to college but she is not too interested in her studies. She prefers having out with other students and taking part in the college social activities. However, she is not doing badly on her course but could definitely get higher marks with more hard work.

She is constantly on her mobile phone to access emails, text friends and update her social media. She uses her phone to keep in contact with her schoolmates.

She currently accesses the online learning platform form the library computers and occasionally from her phone while travelling to schools or over the weekend to ensure she has everything needed for her classes.

School materials, assignment briefs and further resources are available in the online learning space.

 


 

Design

Wireframes

 

User flow

 


 

Testing

Again, with little money, we didn’t have the opportunity to do a lot of iterations and the business, pushed us to quickly launch a mobile version of the online learning platform. However, we managed to work alongside with the IT Help Desk Team which helped us with the UAT to make sure that the product didn’t have any bugs. I was also able to coordinate a small pilot with students through the Help Desk Team which allowed us to make the right adjustment before the launch date.

 

 


 

Development

Having a great developer as a manager, I had the opportunity and the support to look after at the UI as well as to do some coding with CSS.

 


 

Visual Design