talita costa logo

Talita O. Costa

Brief: Research, design and develop a detailed design document and a working prototype of a Student Learning application.

moodle front page

Student Learning Application

COLLEGE PROJECT - INTERACTION DESIGN

COLLEGE PROJECT
INTERACTION DESIGN

Project Context

  • Group (2)
  • Goal-Directed Design
  • Duration 4 weeks

Deliverables

  • Design Document
  • Interactive Prototype

Contribution

  • Competitive Analysis
  • Interview
  • Usability test
  • Low fidelity wireframe
  • Prototype Animation
  • Responsive Design

Brief: Research, design and develop a detailed design document and a working prototype of a Student Learning application.

moodle front page

Research

The Goal of the research is to understand who our users are, their needs, and the context in which they would use the proposed platform, to understand what works and what is missing from Griffith College’s existing offering and to understand design standards and conventions in the industry.

competitor page with notes

For the Competitive Analysis, we looked at two student platforms from competitors. CCT College was one of them. Some of their key strengths is the platform’s homepage which is well-organised with modules named in a way that are easy to identify and locate. It has a clean layout with clear access to useful features such as the library or grades. Live message is hidden under user profile scroll down menu bar.

Griffith’s Moodle page: Poor visual design with a lack of distinction between sections of the page which slow down the user in achieving their tasks. Too much content, and lack with hierarchy.

The strengths and weaknesses identified in the evaluation of the existing platform and competitive analysis provided a basis for what to focus on in the user survey, interviews and usability tests.

griffith page with notes

The Survey was developed on Google Forms and was sent to students currently enrolled in Griffith College’s PGDip in Interactive Digital Media course. We received 8 responses in total.

  • 80% of the participants used laptops to access but the website
  • Top 3 tasks that Moodle was used for were:
    1. Accessing Grades (100%)
    2. Submitting assignments (100%)
    3. Accessing module resources (88%)
  • Main features that did not work well:
    1. Notifications (63%)
    2. Menus (63%)
  • 63% scored efficiency 2 out of 5
  • 80% of respondents scored navigation, functionality and efficiency a 2 out of 5 for and intuitiveness a score of 3 out 5.
behavior patterns screenshot

We recruited three participants for one-to-one interviews: a student from the Interactive Digital Media course at Griffith College and two other students from different colleges (Hibernia, and CCT).
The answers were placed in an excel sheet and similar replies were highlighted to identify Behaviour Patterns and common issues mentioned by users.

Two Usability Tests were conducted with the external students who had no previous experience with Griffith’s Moodle or other online platforms and thus could provide insight into the learnability and intuitiveness of the current design. These tests were conducted one-on-one and in person and took approximately 30 minutes. After their initial interview, the participants were given a series of tasks to complete on Griffith’s Moodle page.

The User's pain points:

  • Poorly organised: the homepage is cluttered with features, many of which are not used, and there is no consistency in specific module layout.
  • Difficult to navigate information is spread out across different menus and websites that make it harder for users to know where to find specific information.
  • Not intuitive: requires a steep learning curve, and here is no clear help section.
  • Poor design: lacks visual hierarchy and has an unappealing colour palette.
  • Poor functionality of key features: such as submitting assignments, accessing the calendar and chat functions.

Framework

From the research, we created a user persona to help focus the design process. We felt that one was sufficient to represent the user groups that we encountered as they had similar needs and goals.

User Persona

The user scenarios were developed to visualise the steps the user would take to complete a task in the platform. As seen in research, users aim for a faster and clearer process to be able to execute the tasks and achieve their goals.

User experience map

Refinement

Analysing the research, it was noticed that there were a number of contents misplaced, redundant, or irrelevant that were added as separate pages. Considering that, the number of pages were reduced.

We sketched out a few rough designs of the homepage, module, and assignment pages as they were the focus of the research.

First sketches

mobile screenshot of the life pagemobile screenshot of the life pagemobile screenshot of the life page

Refined sketches

mobile screenshot of the life pagemobile screenshot of the life pagemobile screenshot of the life page

Wireframes with comments

Moodle wireframe with comments

For the responsive design, the sections would be different. The search bar was located as the first option under the hamburger menu. The hamburger menu was placed after the logo in the menu bar. Message and email sections are placed under the user profile dropdown menu. Content is set in a column layout. Carousels are added to display various sections of the website. Arrows indicate continuation of content, and buttons would assist the user when clicking on links.

Final mobile version

mobile screenshot of the life pagemobile screenshot of the life pagemobile screenshot of the life page

In the final tests of the mobile version, it was identified that changes had to be made. Users wanted modules more accessible and an option to go back to the menu page without having to open the hamburger menu all the time. They found that email and message box also needed to be more visible. A in deep research was then made for mobile user interface which brought the need to change the colour of the menu bar also as the red one was too distracting for mobile. A second menu bar was added in the down part of the page so more links could be displayed in the first page and a new design was created and the hamburger menu was moved to the left top corner of the page so users could click on it easier without selecting other links by mistake.

Final mobile version

mobile screenshot of the life pagemobile screenshot of the life pagemobile screenshot of the life page

Solution

To address these issues, it is recommended that a new system be developed to consolidate all offerings, including grades, resources, and the library, into one platform.

In our redesign the main concerns of the users we surveyed and interviewed have been addressed by simplifying the layout and navigation and consolidating all the main tasks (accessing grades, resources, and assignments) into one website.

We also made key events such as exams, assignments, upcoming classes clearer and more prominent on the homepage so that they cannot be missed by the user. We have provided both mobile and desktop designs to allow users to access information at all times.

We kept some of the existing features of the original Moodle design but made alterations to make them more useful. For example, we added in the ‘latest news’ feature so that students could keep up to date with announcements relating to the college and department, but made this separate from notifications which would involve more urgent information such as class cancellations, assignment updates, IT issues, etc.

Reflections

The team brought the finds together for the research and the designing process was shared so the project could be finished in time.

It was challenging trying to address all the issues that were raised in the research in the timeframe that we had which meant that we had to prioritise the features we showed would be crucial to improving the user experience.