Research & Data Collection - Virtual Learning Environment

Education at the institutional level has maintained the same operating standards for generations. The 'Dublin Institute of Design' College wanted to change that so we set forth to transition the design school from a exclusively in-person learning environment to a virtual learning environment (VLE).


The amount of information that needed to be displayed in the WebApp was terrific and required a structured researched phase and in-site interviews with up to 10 users each time.

What: Concept, Research, Wireframes, Visual Design, Prototype, User Test
How: Axure, Sketch, Illustrator, Photoshop
When: 2015

Research

Because the client was also my employer, I was able to completely immerse myself in the campus environment and I had the chance of closely studying the users and their needs.

User stories (Google Docs)

Personas and scenarios

Thanks to the user stories we were able to define the primary personas: students and lecturers

and secondary persona: the college

  Personas and scenarios  (Adobe Illustrator)

Personas and scenarios (Adobe Illustrator)

  User Flows for a student  - Part Time or Full Time enrollment (Axure)

User Flows for a student - Part Time or Full Time enrollment (Axure)

The personas were crucial to recognize the need to allow students and lecturers to transition to the VLE on multiple platforms, which dictated that this should be a web app over a native mobile application. 

User flows & Requirements

The key user requirements are:

  Structure Map  (Axure)

Structure Map (Axure)

  • Students need to access on line documentation, upload their work, check their progression, talk with the lecturer, organize their meetings and deadline in a calendar.
     
  • Lecturers need to combine their availability with the online meetings, access and evaluate the students’ works, upload materials for the new classes and check on the students and classes progression
     
  • The college wants to reach more potential students, check the progression of its courses and keep an eye on the number of the students.

The combination of the different Users Flows allowed the definition of the Site Map.
Our user personas dictated that the platform would have a narrower set of potential users compared to the ones currently at the college. As we refined the product, it was clear in our user flows and site map that the display of data should be our central focus.

Competition Analysis & Sketches

Competition in the VLE marketplace is huge and we decided to study market-leading platforms with the intent of focusing on the needs of current stakeholders at the college. We analysed the interfaces of a variety of platforms before focusing our attention on design-oriented products like BLOC.com and GeneralAssemb.ly.

The competition analysis was essential for the data display.
Among the other key-elements highlighted:

  • big data
  • color coding
  • data visualization
  • structured hierarchy
  Information flows  and  Visualization of data  were the two main focus of the project.

Information flows and Visualization of data were the two main focus of the project.

Also, a deep research on dashboard design lead to a collection of UI elements that were tested by lecturers and students in order to define an effective visual design for our web app.

Wireframes

  Double data visualization : the management team preferred to read the numbers, while lecturers and students liked the visuals more.

Double data visualization: the management team preferred to read the numbers, while lecturers and students liked the visuals more.

First the hand sketches and latter the Axure wireframes helped the definition of HF screens, based on:

  • simple and effective use
  • clear data organization
  • intuitive interaction

Wireframe dictated the content organization and skimmed the amount of data we initially wanted to display.

  Visual Design Experimentations : data required clarity and a an intuitive color coding

Visual Design Experimentations: data required clarity and a an intuitive color coding

Visual Design experimentations

User Tests highlighted the familiarity of the users with circle charts. We had to test different visuals before defining the finals, parameters we tested were:

  • clarity of data
  • content and hierarchy of the information displayed

To avoid confusions and to keep things simple, we eventually decided for a big % number at the center and the use of only two colors:

  • green for the main data 
  • grey in different hues to differentiate the classes

Working Prototype & Usability Test

Usability tests ran on wireframes and HF screens stressed the need of a double visualization of information:

  • visual for students and lecturers
  • textual for the management and accountant team

Eventually, a working prototype made in InVision has been tested internally with students and lecturers with data gathered and ready for implementation as soon as the college will decide to further invest on that.

InVision prototype link

What I Learned

For the design of this Web App I was working in a very familiar environment. I knew my client well, the lecturers were my friends and colleagues and the students shared with me several times their desire of a virtual learning platform. 
That familiarity with the environment helped me in defining the MVP and also in conducting testing during the initial and the prototype phases.
On the cons side, that confidence put me in the condition of being to literal in the definition of personas, which originally matched with the ones currently in the college.
Thankfully, oral interviews and informal chats with the final users narrowed down the primary personas.