Cursive
A desktop remote learning platform for elementary-age students
cursiveHead(1)
cursiveHead1-1
cursiveHead1-1
cursiveHead1-2
cursiveHead1-2
cursiveHead1-2
centralImage2

BACKGROUND

My daughter, like so many students in these times of Covid, is doing her learning remotely.  She’s been struggling though to keep track of her assignments on her school’s learning portal.  This sparked the idea for this project.


ROLE      User Research, Wireframes, Prototypes

TEAM      Solo Project 

TOOLS    Figma, Whimsical, AfterEffects


PROBLEM STATEMENT

Finding their classes, knowing what time class starts, are all puzzles for a 9-year-old.

 

All students from pre-K to graduating high school seniors here in Texas are shoehorned into using the same remote learning platform.  This one-size fits all approach creates learning gaps for each group of students.  The remote learning platform used by elementary-age students isn’t designed with them in mind. 

Finding their classes, knowing what time class starts, knowing where to find their homework are all puzzles for a 9-year-old who might not have their parent hovering over their shoulder to make sure they are doing things right.  This is where Cursive comes in - it provides users with a platform that is specifically designed to address their learning needs.

.

Timeline2

MARKET RESEARCH

Learning platforms are not built with younger users in mind.

 

There are many different options for learning platforms, such as Google Classroom or The Hub, the system that is used in the Houston Independent School District (HISD) which is the largest in Texas and third largest in the country.  These platforms however, focus heavily on functionality for the teacher and less so for the student.  The Hub would be difficult for a 18-yr old high school senior to use.  Now imagine putting this in front of a third-grader.

Hubpage(1)

BRING VALUE TO REMOTE LEARNING

Translating the users' needs and goals from a design perspective

 

I used Bain & Co.'s "Elements of Value Pyramid' to map out how functionality, emotional and motivational goals could be achieved through design.  I focused on increasing efficiency, prompting fun while learning, and encouraging the user to stick with it.

Frame-4

USER PAIN POINTS

Reliance on third-party apps limits current platforms

 

Many of the pain points users pointed out stemmed from having to use third-party apps such as Zoom or Microsoft teams, since current platforms lack a video conferencing function.  Likewise with assignments, many of which use third-party apps because most current platforms are simply not built with native learning functions. 

painpoints5

USER PERSONAS

An amalgamation of my daughter and her friends formed the user persona.

 

The parents of my daughter's friends were nice enough to let me speak to their kids about their troubles with their school platform.  As I was creating the persona, it occurred to me that the parents themselves were important stakeholders that I hadn't really taken into account, and would need to factor in.

SamPersona1

GOALS

Creating use cases helped clarify user and business goals.

 

User Goals 

Design a learning platform that proves a friendly environment for users and gives them the power to submit and keep track of their assignments and grades.

Business Goals

Design Features that enable users to have a smooth and prompt experience that increases user retention.

DESIGN PRINCIPLES

Applying the Hook Model, I outlined how to successfully design for trust and transparency.

 

I had been reading up on the Hook Model, and I wanted to see how I could successfully illustrate how this product could successfully be used to create trust and transparency with the user.  Much of the feedback I had received from testing participants hinged on the fear users had of failing or missing an assignment because they didn't see it or were unsure if it was even submitted. 

needs2

USER FLOWS

Once the features were organized, I used my sitemap to lay out the homepage.


flow1
Stacks_-a-lending-library-1

WIREFRAMES

My initial wireframes focused on navigating to your classroom.

The features of the first version were focused on giving the user one clear reason to use Cursive: to log into your class in a simple and efficient way.  This after all was the main reason for the platform to exist.  And for a young user, the less content they have to navigate through, the better.
 

frameTwo(2)
frameSecnd
framesONe(1)
framesONe(1)
framesONe(1)

TESTING

One of the key takeaways from testing was that young users lack a sense of time.

 

I created a script to walk testers through setup and other user stories I had come up with.  Then I turned to my trusty cohort of neighborhood kids to user test my wireframes.  Their tasks were to find their classes, find their grades, and turn in assignments, which they all passed successfully.

takeaway

TESTING

Users were oversaturated by content, so out went list-views and in came cards.

 

Remind user about their upcoming classes

Two testers mentioned that although they knew their classes were upcoming, they didn’t actually know when they were.  I updated the notification to include a countdown timer to the user’s next class


changeA

Eliminating list-views


Based on the feedback, I displayed the content as cards instead of lists.  An ongoing issue young users have is having too much information to process on the screen.  By having self-contained content cards, that information is “chunked”  for them, allowing them access to bite-size bits that can be more easily digested.

changeCards

DESIGN

Using the practice of atomic design, I started by making small components first.

As I was putting the screens together, I made sure to pay attention to references to other websites built for kids on Mobbin.design, which turned out to be a great resource to seeing how others tackled common patterns and helped me to put all my components together in a way that made them into a cohesive whole.

components
Frame-18-1

ADJUSTMENTS

A remote experience can be tough for kids, so I made further adjustments to add more of a communal feeling.

In a second round of testing, some users were confused by the progress bar in the class cards and they expected to be able to interact with the word indicating the day of the week.   This was probably related to my earlier abandoned design of having the user be able to access their previous day’s assignment right from the home screen.


moodChoices(1)

This got the wheels turning with trying to figure out how I could more effectively allow students to feel ownership over the platform.  I decided that including a daily check-in with a fixed list of the six basic emotions would be help increase student buy-in.  Similarly, I modified the learning page to allow students to present a selection of badges to a fellow student as a way to build more a communal experience.

I modified the classroom view by adding a scrollable side-panel allow students to access their homework without having to scroll away from the virtual screen that might give vital instruction to clarify concepts.

changeScreen
Justifications1

Final Welcome Sequence

signSequence

Here's my clickable prototype



MY TAKEAWAYS

What I would do differently

Due to this being a sprint, I missed out on opportunities to integrate a parent-view in the app.  Allowing parents accessibility for both keeping track of their kids’ progress but also for security purposes would be something I would explore more.


Also, for the navigation icons, I had to use some that were very kindly provided by the artist, .  In the future, I would want to create my own.


Reflection

Designing for younger users was more of a challenge than I initially anticipated.  It was rewarding though because I had to think deeply through each step of the design process to create a product that really addressed users needs.


Selected Works

CommonLitUsability Case Study

Anki RedesignUpdating flashcard creation on the memorization app

OneSource RedesignImproving navigation on a school district's HR website