Redesign
Student learning Platform
4 weeks
Tools
Contribution
User interviews | User scenarios
Competitor audit | Usability test
Interaction design | Responsive design
My Role
Group
UX/UI Designer
Overview
Griffith College’s Student Learning Platform received poor student feedback on features, usability, and design. This project aims to redesign it to improve student experience and engagement.
Challenges
Large amount of menus
1.
Sections without standard format
2.
Colour red conveys errors
3.
Design is not intuitive
4.
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.
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.
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 Regular16 px
20 px
Small Bold
12 px
15 px
Small Regular
12 px
15 px
#BDBDBD
GT America
Size
Line Height
Wireframes
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 last minute cancellations, or IT issues.