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
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.
Personas and scenarios
Thanks to the user stories we were able to define the primary personas: students and lecturers
and secondary persona: the college
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:
- 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
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.
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
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.
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.