YICHEN HE
  • Portfolio
  • Resume
  • About

KeepUp

A mobile app for organizing your schoolwork.
​

Team Structure:  UX Designer on a Solo Personal Project
Project Timeline:  6 months
What I worked on: UX Research | Information Architecture | Wireframes | User Testing | Mockups | Prototyping

Note: This is a sample project I use to explain how to structure personal projects for early-career designers. It is loosely based off of a personal project I did in 2013 for my first portfolio.


Picture
Let's start with the text snippet that inspired this project
​Students in secondary and tertiary education settings face a wide range of ongoing stressors related to academic demands. 

Previous research indicates that academic-related stress can reduce academic achievement, decrease motivation and increase the risk of school dropout.

The longer-term impacts, which include reduced likelihood of sustainable employment, cost Governments billions of dollars each year. 


​- The impact of stress on students in secondary school and higher education 
- International journal of adolescence and youth

Problem Space

Most students in post-secondary education (27 million+ in 2014 alone - NCES Census) take on multiple courses every semester, balancing out their academic workload with extra-curricular, social and personal obligations.

Most courses require some degree of studying outside of class hours to achieve optimal results. To students this means constantly having to keep track of outstanding coursework which adds to the already high levels of stress during this stage of life.

KeepUp aims to fill a niche to automate the studying process to make it foolproof. By digesting large course syllabuses, problem sets, assignment types and reading lists and packaging them into custom daily to-do lists, KeepUp will allow students to spend less time worrying about when and what to study and more time actually studying. ​
Picture

How do students know what to study?

Picture

Conducting Guerilla Research

I created and sent out a survey via social media channels to self-identified post-secondary students (with N=30 statistical approximation - Central Limit Theorem sample size). My hypothesis is that studying and keeping up with schoolwork is likely one of the main stressors in the daily life of a post-secondary student.

Questions such as "What are the three things that cause you the most stress during your post-secondary education?" and "What are your top goals for this semester" were asked. 
Picture
Additionally, I interviewed a program coordinator and professor at two local universities, and looked into productivity hacking research topics such as Work Breakdown Structure for insights on how task organization and planning could help with productivity. 

This leads us to our 3 key findings below...
Picture

Key Research Findings

1.) Students want better grades and less stress. Specifically they worried about: 
  • Being prepared for exams
  • Keeping up with homework
  • Managing their time
​​
2.) Universities want students to succeed
  • School administrators are willing to look into new technologies that integrate into Learning Management Systems (LMS) to promote student success
​
​3.) Separating large tasks into small goals can help with time management
  • Effective task breakdown can make studying more efficient and manageable, therefore increasing free time and reducing stress 
Picture

Understanding our users

Now that I had a general idea of what students and universities want, as well as a hypothesis for how to accomplish it, I wanted to group these different different needs in a more specific context of the people I spoke to.

Combining
  • Continuous discourse with my peers at school
  • My own experiences as a student
  • Feedback I collected from surveys I conducted through social media channels

I created Personas that reflected a variety of different users to help pinpoint goals and frustrations. 
Picture
Picture

Other Personas

Picture
* Note that there are also personas created for the professor side of the experience, but have been omitted from this case study for brevity.

Key Persona Insights

Some things I noted when affinity mapping the insights. All students I spoke to:
​
  • Have a smartphone that can access either Google Play or iOS App Store
  • Use their smartphone for at least an hour each day
  • Use their smartphone to keep track of tasks via a Calendar application
  • Expressed interest in managing their time better when it comes to schoolwork

Next, I wanted to dig a little deeper into how students are currently balancing their school work with personal life.

Mapping out the "journey" of a student

For the MVP of this product, I wanted to focus on the most type of user who is most likely to use this app, the "go getter" Julia.

​Opportunities for this product are surfaced through the creation of an Customer Journey Map that follows Julia through a typical school semester. 
Picture

What are the jobs to be done?

Next, I focused on the list of opportunities gathered as a part of the experience mapping process.

​Key insights were distilled into a series of primary requirements that the first few designs of the product will be informed by.




​
Picture
Key Takeaway

The main "goal" of this product for the MVP

As a Student, I want to
See all the schoolwork I need to complete in one place and know approximately how long it would take for me to complete my tasks

So that
I can be aware of my workload and plan my life around it

What do we need to design?

With the key takeaway and list of requirements in mind, ​what kind of solution will we build?

The initial idea is to start with a mobile app, as all the students we interviewed use a smartphone on a regular basis, and expressed interest in a solution that would be easy to access on the go. Additionally, it should either replace or integrate with popular calendar apps that all the students already use.

If we are making an app, what wireframes will we need? First we brainstorm the pages we would need to accomplish these tasks and plot them into a simple flow that will inform what screens we want to design for the MVP.
Picture
Picture

Sketching it out

Having identified a rough structure for our product, a series of rough sketches were created and then refined into low fidelity wireframes to be used in user testing exercises. Here I show a few examples of the wireframes.
Picture

Ideating design concepts

Let's take a deeper look into the initial design process on one of the most important pages I highlighted above, the Daily Task Checklist - Detail View.

This view addresses one of our first tasks to be done that was identified in the earlier research. How can a student easily identify what coursework they should tackle next?
Picture

Testing designs with students

The initial sets of wireframes are informed by our list of tasks to be done. We use those goals to guide what information we display, and the flow of screens that could best facilitate the process we have identified.

Next we let a group of students click through our wireframe prototype to see if they could deduce the answer to simple questions such as "How much time do you need to spend on homework next Tuesday?"

In addition to determining if users can successfully answer our questions, we also collected qualitative feedback that was consolidated and informed some changes in the design.

After a few rounds of iterations with the wireframes, we were ready to start jazzing up the visual design!


Picture

Establishing Visual Identity

The app is designed to be energizing, organized and encouraging. The colour palette and typefaces are the key elements that carry those feelings throughout the platform.

​Bright gradients add visual intrigue while contemporary typefaces and ample whitespace allow for a clean and straightforward interface.
Picture
Picture

More Testing

After applying some colourful visual styling to the structure defined by the wireframes, we were ready to do some more usability testing.

I had volunteers run through a prototype on a iPhone 6S, and asked them to set up a profile and answer some questions regarding how they think the apps work. I also re-used some of the questions I asked in the wireframe testing stage. 
Picture
This feedback was used to inform the next round of changes. 
Picture
Picture

Final Design Sample

One of the most important components of this product is the  Daily Task Checklist page . This is a master list that consolidates all the outstanding tasks across all classes the user is enrolled in, split up into daily to-do lists. The organization algorithm takes into account every due date as well as user-collected data on reading speed, historical task completion times and the amount of time the user wishes to spend on school work. 
Picture
By carefully organizing all the tasks into a simple checklist, a user will have a better understanding of how much time they need to set aside daily for schoolwork so they can better plan their extra-curriculars and social life.

By using this app, they will not have to waste time and effort worrying about what they should be studying and can jump straight into the tasks. By following the recommended work pace, they can effectively manage their workload and can feel confident when exam season rolls around and spend less time cramming.

Retrospective

​It is very fun to work on hypothetical products as you are not bound by technical or resource constraints so you can really dive into creating a solution purely for the benefit of the potential users. It was exciting to hear some really positive feedback amongst all the more functional issues I encountered.
Picture
There were many decisions I made in the beginning that could have been more informed by general "best practices" in mobile app design. A good example is the size of the checkboxes to align with recommended touchpoint sizes. I also had to actively stop myself from making too assumptions as I also saw myself as a potential user for this product. It was difficult to reflect and consider which choices are being informed by my experiences and which ones are actually being informed by the research I was conducting.
Designer's Note: As part of this process, there are also designs for a web-based portal for professors to upload or create course outlines. This UI and functionality has been omitted from this case study so I can focus on the design process for a specific persona and set of use cases.
What's Next? Because this product was never developed, I was not able to experience the continuation of the design cycle as it starts integrating into a development cycle. Additionally, there is no extended follow-throw with post-release feedback and research to inform further improvements.

This is a sample project

I wanted to create an example of a personal project that has a low barrier when it comes to resources. For this project, you do not need a team or external direction, and the users that were consulted in usability testing were all found via social media and personal connections (as a student in school). 

For more resources on UX for entry/junior designers, see my FAQ.
YICHEN HE 2023
  • Portfolio
  • Resume
  • About