OVERVIEW
The Project
I worked with a team of three other GT MS-HCI students to conduct exploratory research into the Georgia Tech college students' experiences organizing and managing coursework. My team and I used exploratory research and user testing to design and iterate a high fidelity LMS platform wireframe to streamline digital class and course management for college students in the United States.
The Tools
Figma | Miro | Qualtrics | Python Plotly & Pandas | Adobe XD
PROBLEM
The Problem Space
Georgia Tech higher education students, managing multiple learning mediums and resources across college classes.
The Problem
Digital education tools are increasingly becoming a part of the college classroom. Students now access course resources, manage assignments, manage class meetings, and stay up to date on class materials primarily through digital platforms. However, the widespread use of diverse online educational resources creates an organizational challenge for many college students. At Georgia Tech, there is no standardization in class resources, tools, or communication preferences.
How can we help Georgia Tech higher education students, managing multiple learning mediums and resources across college classes?
PROCESS
Discovery
During the discovery phase, I conducted historical research into existing solutions for students managing coursework cross multiple classes. I conducted exploratory semi-structured interviews with members of the user group using a protocol developed by two of my teammates. I then used preliminary interview findings to develop and deploy a Qualtrics survey to discover more about the student experience managing digital course materials.
Synthesis
The group came together to compile and analyze the data we found during discovery. We used affinity diagramming and personas to draw connections and communicate our findings.
Ideation
During the ideation phase I participated in ideation sessions and contributed design ideas and sketches. My team talked through and created storyboards of our top design ideas. I designed information architecture to support our final design.
Design
During the design phase, the team worked to convert low-fidelity wireframes into high-fidelity designs using Figma. I developed components of the visual language to increase platform accessibility and iterated the information architecture based on usability test findings.
User Testing
During user testing, I developed a semi-structured interview protocol, and employed a task analysis to evaluate the usability of my team's design. I led half of the user testing sessions our team conducted.
DISCOVERY
Academic/Industry Background Research
My team and I conducted academic and industry research to establish a deeper understanding of higher education students, and their needs and goals organizing learning across various platforms, classes, and mediums. With college resources shifting into digital spaces and LMS systems occupying an organizational role for the majority of college students in the US, we knew that our solutions would fall somewhere into the LMS space.
Stakeholders
We brainstormed and mapped out the stakeholders involved in LMS system disbursement, implementation, management, and user process.
Defining the User
The primary "User" group is the Georgia Tech higher education students managing multiple learning mediums and resources across college classes.
Group Differences
While our user group shares many similarities, there are also many inter-group differences. The mind map below, highlights some of the many differences among our user groups to consider moving forward in the design process.
Methodology
Semi-Structured Interviews
Goals
- Determine the tools and methods current GT student uses to organize coursework across classes.
- Understand the strengths and weaknesses of students' current organizational systems.
- Establish possible pain points.
Qualtrics Survey
Goals
- Ask targeted questions about specific organizational tools identified in interviews.
- Better understand student prioritization of needs and pain points.
Key Findings
SYNTHESIS
Affinity Mapping
Using survey and interview data, my team created an affinity map to visualize and organize our data.
.png)
Personas
I used our team affinity diagramming findings to create user personas to highlight the multifaceted interests, needs, and characteristics of possible users.
Design Specifications
The affinity diagram and personas guided the development of design specifications.
Functional Requirements
- The design's information architecture should prioritize content that a student uses more frequently.
- The design should make keeping track of assignments and due dates very easy.
- The design should allow for easy communication between students, teachers, and teaching assistants.
- The design should allow students the flexibility to organize content as per their preferences.
- The system should be consistent across classes.
Non-Functional Requirements
- The design should accommodate users with no prior experience using LMS systems.
- The design should be aesthetically minimal and not make the users feel overwhelmed.
- The design should feel fun to use.
IDEATION
Design Ideas
The group collaborated to come up with design ideas:
Storyboards
We took our two top design ideas: Insta' Twitter, and our Interactive To-Do List and created storyboards to bring our user's actions to life.
DESIGN
The high fidelity prototype of my team's design was created in Figma. The interactive design is accessible at the link below:
Developing a Visual Design Language
Whenever possible, we ensure the default state of our platform is high contrast and color-blind-accessible. Ideally, as many users as possible can interact with our platform without having to take extra steps to ensure accessibility.
We designed our platform using the Bang Wong color palette for all critical elements of our design so that users with a limited range of color perception could still perceive color contrast and thereby benefit from our color-coding features. All color-critical elements of our design feature our accent color palette.
The General Color Palette is the aesthetic palette we used to create a design that includes harmonious action hues that offer the user insight into the system status. The supporting color scheme provides helpful insight into the urgency of a grade or assignment, with red signifying urgent/poor performance, yellow falling in the middle, and green signifying lack of urgency or good performance. The colors rely on user familiarity with the ‘traffic light’ color scheme, so we have ensured that color alone is not the only communicator of urgency or class performance because not all users can see, or will understand the meaning of our supporting color choices.
Background and Text Color
We use black writing on a white and light gray background and vice versa as the most ubiquitous form of text presentation within our interface so that contrast is maximized by default. Our design choice not only benefits users with low vision or photosensitivity, but also reduces eye strain across users.
.png)
Clarity and legibility were our most prominent considerations when deciding upon our fonts for our interface. We immediately ruled out the use of highly stylized fonts. Stylization decreases readability and poses accessibility concerns. We identified Times New Roman and Arial as some of the most commonly encountered non-stylized fonts and decided that our font should be similar to either of those. Our research revealed mixed information about the accessibility and readability of seriffed vs unseriffed fonts. We populated our interface with both, compared, and ultimately decided to use an unseriffed font because of the minimal aesthetic.
.png)
Icons can enhance the user experience – icons can save screen real estate, and allow the user to easily navigate the site without the cognitive load of reading. However, even the most ubiquitous of symbols are not universally understood. We opted to use icons in our sidebar; however, we were careful to include descriptive text to our icons to eliminate confusion. – in doing so, we take up more screen real estate, but we give the user visual and textual information about the sidebar menu options to increase accessibility and decrease cognitive load. When looking at the Dashboard, Calendar, Settings, Communication, and Help icons, the user learns what the icon signifies. The experienced user can glance at the icon without the cognitive load of reading to navigate around the site.
USER TESTING
User Testing
We used a combination of two evaluation techniques: first, a cognitive walkthrough involving one main task, and second, a semi-structured interview to take place after the user has finished their cognitive walkthrough of the prototype.
EVALUATION
Strengths of Design
- Learning Curve:
The design is easy for new users to understand and adapt to - Information Architecture:
The information architecture minimizes the number of steps users need to familiarize themselves with. - System Status:
Users are aware of where they are in the system, where they came from, and where they can go. - Recognition over Recall:
The user can recognize what actions can be performed using the platform, without having to recall complex steps or hidden features.
Need for Improvement
- Customizability:
The system needs more customizability. - Privacy:
Certain features should be able to be toggled on and off for provacy purposes eg. dashboard grade displays.
Implications Beyond Project
While the technology surrounding student education is ever-changing, user needs have stayed fairly consistent throughout history. In our historical research aligns with many of the needs of modern-day users. As technology continues to change, the following findings should continue to be prioritized in order to ensure student's needs are met and pain points acknowledged as technology changes.
- Prioritize students' most important and most common tasks;
- Provide clarity and context to curriculum and important dates;
- Allow choice in communication, scheduling, and organizational tools.
LEARNING
The largest takeaway form this project was the importance of balancing minimalism with informational content. To design too minimally would be to rely on user's recall to navigate the platform, while to design with too much information could reult in informstion fatigue.
