Mei Yi Tan
Project Summary
Roles
- My Role: Guided the aesthetic direction of the project, wireframing, and the presentation deck
- Andrew Vo worked more on research activities, ideation, and assisting with wire framing
Tools
Adobe XD for high fidelity design
Project Type
This volunteer-basis competition hosted by Capital One
Duration
4 weeks (March 2020-April 2020)
Step 1: Empathy
Background
- This design challenge hosted by Capital One was aimed for University of Texas at Dallas students to find ways to make the student experience of their online education resource more efficient for students.
- UTD is home to 27,000 students with the majority who commute, and has a reputation earned from its STEM focus. The school is trying to focus more on how to teach at scale and had recently celebrated its 50th anniversary.
Problem
The previous mobile interface is simply the desktop one but fit to a phone. The goal was to make this (shown below) distance learning application more student-friendly.
Goal
How might we redesign eLearning based on student priorities?
Research Methods
- Andrew sent out a research survey with 15 responses from college students that asked various students about what they looked most at and prioritized in their eLearning app experience
- We conducted 3 user interviews of college students to gain more detailed insights into how students viewed the original eLearning app but also their grievances. If we had more time, we would have looked into competitor applications to see what they did as well
- Our high level research was the foundation for our persona
Step 2: Define
Persona
Our persona is based off our research findings, based on 3 key areas:
- View Assignments
- View Due Dates
- View Grades.
Problem Statement
How might we redesign eLearning based on student priorities?
Step 3: Ideate
Recommendations
I personally chose to map out the home page, course page, and grades at first with drop down menus to condense space on the mobile interface.
The home page features an “at a glance” summary of their progress including the courses they take for that semester, important announcements from classes or the school, and their current grades. Meanwhile the course page and grades pages are massive pages that would need to include and condense lots of information.
Below is my low fidelity concept.
From there, I made my own high fidelity design. This was my initial concept in response to the survey results. I prioritized assignments, due dates, and grades to be the most visible.
Teamwork
Once we both consulted each other upon our individual design ideas we compromised upon what we thought were the most essential elements of our ideas we needed to keep to satisfy the aforementioned user desires.
- I agreed with Andrew that an assignment page would need more detail than a grades page since in our design grades are shown on the home page and beside each assignment summary. It would simply be redundant to repeat that more.
- He agreed that announcements can have a big effect on students, especially those who live on campus, in cases like bomb threats where that information needs to be seen immediately.
Step 4: Prototype
You can view our prototype here which aimed to reflect the main points derived from the research with a focus on grades, assignments, and due dates.
Findings Overview
- Students want a quick view of grades.
- Students want assignment details to be visible and accessible.
- Students need to know the due dates.
Branding
Our final design followed strictly to the University’s brand guidelines as we re-iterated to include university-approved logos, colors, and typography.
We focused our main colors to the primary brand colors of dark green and bright orange with orange as a secondary color for emphasis. As we did not have access to the main fonts of the University due to having no budget to buy them, we opted for the secondary font instead.
Home Page
Each course is assigned to a visual key that would correspond directly to a due date calendar that one would see on the home page. This key would be a different color and different shape to accommodate the visually impaired. This lets the student know when something is due for a certain class.
Assignment and Grade Pages
This is expanded upon in the course page where a student can see the details of their assignment for a certain class as well as grades for past assignments. Course-specific announcements are also added to the course page.
Mobile Accommodations
To make the mobile application truly mobile, we also created a way for students to submit their assignments easily from their phone through multiple methods.
Reflection
One of the most essential parts of this experience was working in close conjunction with my partner as we regularly discussed and considered design alternatives and consistently challenged each other’s designs.
- Had we been given a do-over, I believe we would have profited greatly from conducting the interviews before the survey was given or even only doing the interviews, as it provided so much qualitative data that the survey was superficial in comparison
- We didn’t have access to any server logs or client data. Had we been permitted to, we would have taken those into consideration as well
- Since Andrew was in Wisconsin and I was in Texas, we had to work together through an entirely virtual space which made long discussions a bit more difficult. However, we managed to communicate quickly and actively during the project
- Unfortunately due to time constraints, I had gone with my first idea before moving on to the high-fidelity solution. If I were to redo this, I would have talked with my partner about my ideas during this phase and adjusted accordingly
This project was certainly a learning experience in defending my viewpoints and collaborating in a virtual environment. We learned through our collaboration that it can be difficult to determine what to add to our design, but user research really helps refocus our decisions back to the basic essentials.
Future
As we were designing, COVID-19 spread around the world, and everyone had a stay-at-home order. As we were making a mobile app that reflects the on-the-go aspect of an app, it wouldn’t have been reflective of a real situation if we user-tested from home. Therefore, we created a testing framework instead to outline how we would have done it.
- We would test if students of the University would be able to find what they need while moving or outside of their home
- We would give people our phones with the prototype on it to observe and ask questions as we walked
