Jin Xiong
ux challenge: Redesign uw Bothell's online assignment system
Online Application- 2021
OVERVIEW
A responsive online assignment system that helps students in accessing resources to complete homework with the least amount of stress
My central focus during the design process was to develop components, wireframe and prototype the online assignment application
ROLE
ROLE
UI Designer
UX Researcher
TOOLS
Figma
Miro
Canva
Google Docs
Adobe Photoshop CS6
TIMEFRAME
3 Months
April - June 2021
PROBLEM STATEMENT
Jim gets frustrated trying to complete some homework for an online class since he cannot find the links that would show him how to complete it. Jim needs clear and easy access to his assignment, with clear files and due dates. He also wants to know exactly what percentage of his grade each assignment is worth. Our solution should provide the student easy access to the resources he needs to complete the homework according to the given guideline
DESIGN QUESTION
How might we help students in accessing resources to complete homework with the least amount of stress?
USER PERSONA
Jim is a potential user who would like to receive relevant and comprehensive information in order to make timely decisions.
CONCEPTUALIZATION
USER FLOW
These two user stories were merged to create the user flows. Where my prototype includes a redesigned dashboard, resources, prompt and grading students can look at with ease.
IDEATION
We used a design process called "HOW-NOW-WHAT" ranking chart, as well as a funnel process to generate alternate design process. This process involves brainwriting and affinity diagramming.
USER STORIES
-
As a user, I want to have the ease of access without taking too much time to understand the UI
-
As a user, I want to be able to find the resources without having the website unresponsive
-
As a user, I want to be able to view my homework assignment online without adding any additional stress
-
As a user, I want to be able to view date of my homework assignment and what percentage of my grade is worth without wrestling with the website's unresponsive design.
ANALYSIS
USER TASKS
-
Most User's task are completed in less than five clicks; they still go through a general sequence as we identified before the exploration
-
The task of submitting an assignment varies in process between courses; some assignments may require a specific files while others are more flexible.
-
Most of the time users are taken to a home page from where they can navigate to their specific assignments that a user is looking for
USER ATTRIBUTES
From our analysis of multiple users we've interviewed, majority of users are either students or professors, most are frequent users of technologies and have a preference with either a smartphone or compouters.
UNDERSTANDING OF USER PAIN POINTS
From our explorations of user's pain points that users sometimes have to use other websites or programs to complete assignments for multiple classes, which was a pain point that we learned of; it means that they need to leave the online course or open a new tab/window to accommodate the external website or program.
Another pain point that we learned is having some assignments show up in a calendar and others not.
WIREFRAMES
LOW-FIDELITY
The low-fidelity wireframes were then created and later digitalized on Figma for the mid-fidelity prototype with placeholder text, images, and icons.
DESIGN
MOOD BOARD
I approached my iteration of high-fidelity prototypes by making a mood board with a few icons and images of relevant, small-scale, and relevant information.
This mood board was later incorporated into the style guide, with includes logos, typography, images, icons, UI elements, and so on.
HIGH-FIDELITY WIREFRAMES
CONCLUSION
Through the process, this project was intriguing that for our user base, majority of them has no significant in academic performances between younger and older student. It is imperative that we consider how well our product design can adapt to user with color blindness since color-coding for classes is essential to the functionality.
In the future, we may also need to consider prototyping the teacher's message help system since relying only on email may lead to confusion between teacher and student if it was used as a personal communication.
THANK YOU FOR TAKING THE TIME TO VIEW MY CASE STUDY!!
If you're interested, you can view some of my other work here:
