DSLAB WEBSITE REDESIGN

The MSU DSLab opened February 2018, is a multi-functional space open to students, faculty and the public. For this semester long project we worked in teams of 4-5 and used a variety of research methods to develop a new prototype for the DSLab website. The methods we used are listed below:

Our first step in the redesign process for the DSLab website was a Q/A session with the DS Lab stakeholders. We then used Google Forms to create a questionnaire to interview a mixture of people about their knowledge and use of the DS Lab. Our takeaways from this process were that the current website was not used efficiently. Word of Mouth was the most common way people know of the lab and any of the participants were not aware of all the services the lab provides.

Interview Report

PERSONAS & SCENARIOS

We compiled the data from the Interviews about the DSL users and from here we created profiles of our users and sample situations and pathways users take to solve said situations. We used personas to keep specific types of users in focus during design discussions and we used scenarios to help test the system and build functionality that users actually wanted to use. By creating these personas and scenarios we were able to see obstacles and issues users encountered and help identify if we're meeting needs, goals and expectations.

Personas & Scenarios Report

CARD SORTING

For our card sorting user research we created a hybrid card sorting method using Google Forms and the content already on the DSL site. We chose to use Google Forms because of the data collection and analysis functions available. We asked people within the MSU library to participate, each participant filled out the form individually. With our results we were able to reduce the repetitive language and further develop some of the headings and overall better organize how the DSL site was set up.

Card Sorting Report

HEURISTICS

During our heuristic analysis we used the Nielsen Norman Group: 10 Usability Heuristics for User Interface Design to analyze two tasks available on the DSL site: Reserving a Room and Get a Consultation. We individually ranked each step of these two tasks on a 1-5 scale while taking observational notes and averaged our results. From this data we concluded that the home page navigation was a little unusual, but the overall aesthetic feels flat and un-engaging. Overall control and freedom of the site was ok, but the lack of current location indication in the navigation was disorienting.

Heuristics Report

COMPETITIVE ANALYSIS

For our competitive Analysis we looked at four competitors that shared some similarities with the DS Lab. We looked at the MSU Library, a direct competitor, the MSU Hatch, and Indirect competitor, the Hub MSU, a partial competitor and the DSLab at the University of Richmond, a parallel competitor. For this task we individually rated each site using a scale from 1-5, then averaged our results. Some of our takeaways from this process were we needed to add a map of how to get to the DSL as well as a map of the space itself. The social media for the lab should be more accessible to visitors and the search function needed to be more visible as well as optimized.

WIREFRAMES

We used what we learned from our previous research to sketch a more functional site. Because of our limited time we decided to focus on redesigning three pages, the home page, the "our team" page, and the using the lab page. First we individually sketched each page, then created wireframes. After our individual wireframes were made we were able to compare and contrast the features and organization of the pages, determine the best features of each persons wireframes and produce a list of elements we wanted in the overall design. We then used Figma to create our first iteration of our high fidelity mockup.

Redesign Report

USABILITY TESTING

We conducted individual usability tests of our prototype with users in the library and DSLab. We conducted these tests to identify usability problems, collect qualitative as well as quantitative data and to fix issues before our final build. During the user tests we took screen recordings and had one person as the test moderator to guide the user through the test and another took observational notes.

Usability Test Template

PROTOTYPE

We built our final prototype using the data we collected while using these research methods. After a semesters long work it was incredibly rewarding to see the final product.

Final Prototype