Moodle Redesign

College Project

Group (2)

Overview

4 Weeks

Research, design and develop a working prototype for a Student Learning and Productivity application.

Contribution

Research: competitive analysis, 121 interviews, usability test, user scenarios, behavior patterns.

Design: sitemap, sketches, wireframing, responsive design, prototype interaction.

Market Research

Competitor Analysis

Strengths: clean layout, efficient user menu.

Weaknesses: unnecessary information in Homepage, distracting content in Modules.

Business Analysis

Strengths: easy access to “Assignments”, filters help to find courses quickly.

Weaknesses: low distinction between sections, repeated content on the same area, lack of hierarchy in the text.

User Research

Surveys

Interviews

Pain-points

  • Unwanted features

  • No consistency in layout

  • Spread out information across different menus and links

  • Unclear help section

  • Unappealing color palette

  • Key features have low functionality.

User Persona

User Scenarios

Problem

Griffith College’s students are unhappy with the existing learning platform. Griffith College requires a software of easy use that help students to achieve their academic goals.

How can we improve user’s interaction with the platform?

?

Solution

  • Add main tasks in one platform simplifying layout and navigation.

    Make exams, assignments, upcoming classes prominent on homepage.

  • Provide responsive design to allow users to access Moodle anytime.

Usability Tests

  • In person one-on-one tests with external students.

  • Approximately 30 minutes.

  • Tasks were given to users who had no experience with Moodle.

  • The goal was to test the platform’s learnability and intuitiveness.

Redesign Insights

  • Select colors according to brand guidelines that are visual appealing.

  • Remove any redundant, or irrelevant content.

  • Make screens intuitive and place content according to subject.

Sitemap

Low-fidelity Wireframes

Mid-fidelity Wireframes

High-fidelity Wireframes

Style Guide

Typography

GT America

Large Bold

34 px

44 px

Medium Bold

20 px

22 px

Normal Regular

16 px

20 px

Small Bold

12 px

15 px

Small Regular

12 px

15 px

Colors

#E4222A

#1F325C

#707070

#3D619D

#000000

#BDBDBD

Size

Line Height

#F3F3F3

#FFFFFF

Responsive Design

  • Search bar at the top inside the burger menu

  • Burger menu after the top logo

  • Message and email under user profile menu

  • Carousel, buttons, and arrows added

  • Content is set in a column layout

Feedback

  • Feedback from user testing was considered for improvements.

  • Users want easier access to modules, emails and messages on mobile version.

  • Users would prefer going back to the menu page without the need to open the burger menu.

Insights

  • Change top menu bar color to improve contrast with background.

  • Add 2nd menu down the screen, so essential features are always visible.

  • Move burger menu to the left top corner so users can easily open it.

Reflection

  • The main challenge was to address all the issues raised in the research in the time frame we had. We prioritized the features showed in research would be crucial to improving the user experience.