General Overview
Moodle Redesign
College Project
Group (2)
4 Weeks
Research, design and develop a working prototype for a Student Learning and Productivity application.
Contribution
Research: competitive analysis, interview, usability test, user scenarios, behavior patterns.
Design: sitemap, sketches, wireframing, responsive design, prototype interaction.
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.
Problem Definition
How can we improve user’s interaction with the platform?
?
Solution
Locate main tasks in one platform and simplify layout and navigation.
Exams, assignments, upcoming classes prominent on homepage.
Provide responsive design to allow users to access Moodle anytime.
Add changes to existing features to make them more useful.
RESEARCH
Goals
What are the industry design trends?
Who are the users?
What are the users’ needs?
How do users interact with the platform?
Why are the users unhappy with the platform?
Competitor
CCT College Dublin
Strengths: clean layout, efficient user menu.
Weaknesses: unnecessary information in Homepage, distracting content in Modules.
Business Analysis
Griffith College
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.
Survey
Moodle most used features
1. Access grades
2. Submit assignments
3. Access module resources
Features with bad performance
1. Notifications
2. Menus
3. Calendar
Interviews
3 Interaction Digital Media students
15 questions
User’s habit questions + college habits and user’s experience with Moodle.
Similar replies were highlighted to identify behavior patterns.
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.
User’s Pain-points
Homepage has too many unused features
Lack of consistency in module layout
Information is spread out across different menus and links
Unclear help section
Unappealing color palette
Poor functionality of key features
User Persona
User Scenarios
DESIGN
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.
Style Guide
GT America
Large text Bold
34 px
44 px
Medium text Bold
20 px
22 px
Normal text Regular
16 px
20 px
Small text Bold
12 px
15 px
Small text Regular
12 px
15 px
Font Size
Line Height
Colors
#E4222A
#707070
#1F325C
#BDBDBD
#3D619D
#F3F3F3
#000000
#FFFFFF
Sitemap
Refined Sketches
LOFI-Wireframes
HIFI-Wireframes
Responsive Design
Search bar at the top under the burger menu
Burger menu after the top logo in the menu bar
Message and email under user profile menu
Carousel, buttons, and arrows added
Content is set in a column layout
Feedback
After testing the prototype with students, feedback was gathered for final improvements.
Users want easier access to modules, emails and messages on mobile version.
Users want go back to the menu page without the need to open the burger menu.
Insights
New research for mobile interface brought ideas on how to improve the design of features.
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 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.