Moodle Redesign

College Project

Duration

Aug 2023 (4 weeks)

Tools

Adobe InDesign

Adobe Photoshop

Adobe XD

Contribution

User interviews

User scenarios

Ideation

Wireframes

Interaction design

My Role

UX/UI Designer

Usability test

Competitor audit

Sitemap

Responsive design

Overview

Griffith College’s Moodle platform received poor student feedback on features, usability, and design. This project aims to redesign it to improve student experience and engagement.

Challenges

Amount of menus in the platform

1.

Sections are not in a standard format

2.

Red in colour palette conveys errors

3.

Design is not intuitive

4.

User research

Surveys

  • Top 3 features used in Moodle:

Access Grades

1.

Submit assignments

2.

Access module resources

3.

  • Top 3 features that did not work as expected:

Notifications

1.

Submit assignments

2.

Access module resources

3.

Interviews

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

  • Approximately 30 minutes.

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

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

Usability tests

  • 3 Interaction Digital Media students.

  • 15 questions.

  • User’s habits questions + college habits and user’s experience with Moodle.

User’s pain-points

  • Unwanted features

  • Inconsistent layout

  • Information scattered across menus and links

  • Unclear help section

  • Poor functionality of key features

Meet the user

Persona

User scenarios were created to map task steps, focusing on faster and clearer processes based on research insights.

Scenarios

We created one user persona from the research to guide the design, as user groups shared similar needs and goals.

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 might we improve user’s interaction with the platform?

?

Problem

Solution

  • Consolidate main tasks into one platform with simplified layout and navigation.

  • Highlight exams, assignments, and upcoming classes on the homepage.

  • Provide a responsive design for access anytime, anywhere.

Competitor audit

  • 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.

Redesign insights

  • Select brand guidelines colours that are visual appealing.

  • Remove any redundant, or irrelevant content.

  • Make screens intuitive and place content according to subject.

Style guide

Colours

Primary colours

Neutral colours

#1F325C

#F3F3F3

#E4222A

#707070

Secondary colour

#000000

#3D619D

#FFFFFF

Typography

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

#BDBDBD

GT America

Size

Line Height

Wireframes & Prototype

  • We sketched rough designs of main pages for desktop and mobile, based on research showing students use both to access Moodle.

  • On mobile, as space is more limited the search bar is located as the first option under the hamburger menu.

  • Messages and emails are in the user profile dropdown.

  • Content uses a column layout with carousels for different sections.

  • Arrows show more content, and buttons help users navigate links.

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

  • 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.

Takeaways

  • We simplified layout and navigation based on user feedback, consolidating key tasks into one site.

  • Important events like exams and assignments were made clearer on the homepage.

  • Designed for both mobile and desktop to support users anytime, anywhere.

  • Added a ‘latest news’ section for announcements, separate from urgent notifications like class cancellations or IT issues.