DESIGN SPRINT - LMS REDESIGN

PROJECT

BRIEF

This project was the result of a four day design sprint I completed with three other classmates during my time at BrainStation. The challenge was to redesign Brainstation’s Learning Management System (BrainStation Portal) to better help students take advantage of course material and resources provided in class. Our final solution made the LMS easier to navigate, have all the resources in its own dedicated section, and added the ability for students to upload and receive feedback on assignments directly from the portal.

Software Used: Sketch, Photoshop, InVision

hero-imagehero-image

The first day of the design sprint consisted of introducing ourselves to our teammates and learning each other’s strengths and weaknesses, conducting secondary research on learning management systems, setting project goals, creating a user journey map, conducting user interviews, come up with How Might We questions, and prioritizing those questions through dot voting. By the end of the first day, our group had defined our target user and moment: full-time BrainStation students logging into the portal to access course material, resources, and class UI challenges.

Secondary Research:

Our usability analysis of the current BrainStation LMS revealed a number of issues that affects the navigation of content. Accessing the portal itself was difficult for first time users as the portal had to be accessed through the user’s account drop down. Once inside the portal, course content is hard to locate since they are hidden within 2 to 3 levels of drop downs. A full annotation of issues found during the usability test is shown below.

annotation-v2annotation-v2

User Journey Map:

When creating the user journey map, we focused on a returning student logging into the portal to view course material, download resources, upload course work, and receive feedback from instructors. After conducting user interviews and coming up with How Might We questions, we voted on the best HMW questions and pinned them to their corresponding phase of the user journey in order to ensure we are designing solutions for the right moments in the journey.

user-journeyuser-journey

User Interviews:

When conducting user interviews, our main goal was to discover what the user wanted to accomplish when they logged into the portal, what they liked about the existing portal, what they hated about it, and what they would want added to the portal. The results showed us that most users only accessed the portal to download class slides of the day, most found navigating the portal to find what they wanted difficult, and many people wanted dedicated sections for resources and class challenges.

discovery-interviewdiscovery-interview

How Might We Questions:

During the second day of the design sprint, we started sketching out rough wireframes for possible design solutions. After everyone submitted their wireframe sketches, we posted them on the wall and spent time viewing, speed critiquing and posting stickers on areas of the wireframe that we found interesting. By the end of the day, we reiterated our wireframe sketches based on feedback received during the pin up.

Sketching Out Possible Solutions:

My team tried out various layouts for the home, course, resources, and challenges screen. We felt that a dashboard design made the most sense for the LMS as it is easily customizable, a large amount of information can be presented in one screen, and the navigation would be intuitive to users. 

 

wireframe-sketcheswireframe-sketches

Art Museum / Heat Map / Speed Critique:

After sketching out multiple wireframes, we pinned them around the studio in an art museum style as fellow classmates gave critiques on the wireframes. Heat maps were created as people stuck stickers on sections that they found interesting.

art-museum-process-2art-museum-process-2
art-museum-processart-museum-process

During the third day of the design sprint, we took our iterated wireframes and digitized them on the computer using Sketch. We then implemented BrainStation’s visual identity by referencing their style guide in order to maintain the familiar feeling of the portal to our users. Once the high fidelity wireframes were completed, we imported them to InVision to create a clickable prototype in order to test our design with users.

Digital Wireframes:

hi-fi-wireframeshi-fi-wireframes

The fourth day was a full day of user testing. We conducted a short introductory interview in order to get some background information before diving into the prototype. Once we completed 5 rounds of user testing, we took all the feedback notes and created a session output document in order to organize our validations, improvements and other comments received from the user tests.

User Testing:

While most users answered that they would like a chat feature within the portal, many commented that once they saw the chat box in the browser, they realized they might not use it as they are primarily in the portal to access class slides and resources. We also received a lot of comments on how the portal would communicate to the user the status of their assignment submissions. We received positive comments on our course page and resources page as many users thought the design was well organized and the navigation was clear.

user-testing-context-interviewuser-testing-context-interview
user-testing-prototypeuser-testing-prototype