SPRING OS

An Operating System designed for children to promote education and growth while delivering a fun interactive experience.

BACK
Overview
Research
Ideation
Design
Reflection

SPRING OS

An OS designed for children

Scroll Down

OVERVIEW

SpringOS is an operating system designed to meet the educational and entertainment needs of children aged 4-10 and promises remote parental supervision to create a safe yet inviting environment.

My Role

User Experience Designer
  • Responsible for developing lo-fi interfaces
  • Integrated feedback based on design sprints
  • Created high fidelity mockups of digital interfaces
Interaction Design Researcher
  • Generated a set of gesture guidelines for the OS
  • Researched the learning curve of children and technology to inform design choices
Team Members
Eshin Ang
Miranda Lin
‍P
Stefani Sanchez
Duration
9 weeks

Background

Currently, 42% of children aged 8 and younger now have their own tablet devices, a steep increase from 7% in 2013 and less than 1% in 2011. To facilitate positive growth of these young minds we need to cautiously design technology for these children so that they can maximize its benefit.

The Outcome

Spring OS is an operating system created for kids aged 4-10. We developed a set of native OS applications re mastered for the usability and needs for our user group.

The Process

Research

• Understanding the problem
• Gathering insights
• Goals and Requirements

Ideation

• Conceptualizing solutions
• White-boarding ideas
• Narrowing scope

Usability Testing

• Gaining user perspective
• Re-evaluating solution based on feedback

Design & Prototype

• Building a design system
• Creating interactive prototypes

RESEARCH

Due to this project being part of a course from the Information School, the focus was on User Interface Design. Hence, we were only allotted one week to conduct research. As our user group was from 4-10 years old we wanted to understand their skill level in relation to technology as well as conduct a surface level comparative analysis.
Visual Inspiration ‍
We created a mood board to better understand the direction that we wanted to go in. This would also serve as a visual reference to extract design guidelines and inform our style guide.
‍
Takeaways
Colorful
Applications contained a lot of vibrant colors
Animated Characters
Almost every application contained some fictional characters
Gestures‍
We looked as various gestures as a way to promote interactivity between our user group and the OS. We conducted specific research on this topic and found out that gestures such as tapping, swiping and dragging are mastered by children between the ages of 3-5 and hence we wanted our OS to reply heavily on these types of gestures.
‍
Actions
Tap
Selecting an application to navigate         
Drag
Dragging and dropping items when playing mobile app games
Pinch
Zooming in on a picture                                    
Swipe
Swiping down a notification center
Interactions: Signifiers‍
These are used to clearly state which elements can be interacted with. They provide feedback when an element has been engaged with. These include different button states as shown below where the button style changes based on the various states.
‍
Motion: Transitions‍
Transitions should be smooth to let users understand how they're moving from element to another. Motion Design also makes every small and boring interaction more exciting and "cool".
‍

Design Principals

Extending our research further we developed design principals to base our operating system on. These values would be reflected in all the applications we build and lay a strong foundation for the voice of the OS.
Theme and Characterization ‍
To create a constant engaging experience we learned that the use of an overarching theme and characterization would be helpful to keep the children more engaged with the OS. This would help in terms of familiarity. The choice to have their own avatar represent them in the digital world would also add a touch of personalization to the OS.
‍
Comprehensive Parental Controls ‍
Due to the age group of our target user group being 4-10, we felt that their parents should have an easy access to view their child's usage of our OS. To be able to monitor the content their kids are viewing and control screen time would facilitate a safer utilization of our operating system.
‍
Education via Entertainment ‍
Perhaps the most important design principal, providing an exciting experience that promotes education can be quite a challenging task. To create an environment where children can learn by having fun that would in turn motivate them to further their growth.
Interactive Feedback ‍
The feedback loop is an essential aspect to consider especially when designing for children. From our research we learned that children always want feedback when they do something because they tend to act first and then see the consequences themselves. Hence, the Action -> Reaction -> Decision model is beneficial to keep in mind when designing for children so that they are more aware of what is going on in the OS.
‍
Communication and Connection
Another aspect we wanted to focus on was the connectivity children would gain to the outside world. The focus here was to make sure we would design a safe space that parents could trust and be willing to make their children use this system.

Style Guide

Based on our research and design requirements we came up with a style guide that we would follow to create our OS. Considering there were 5 designers working on this project we felt it was essential to understand the style guide so there all our designs would have a sense of uniformity.

Color Palette
Our color palate was an amalgamation of vibrant and bright colors. Our research indicated that children are more entertained by a greater amount of color choices. Additionally we also paired various colors creating beautiful gradients.
‍
Typography Guidelines
We decided to use Circular due to the softness of this San-serif font. It also helps to decrease the harshness when reading text and lessening the strain on our users eyes. Due to the simplistic nature of the font it worked well for both headings and body text.

Readability Practices
Line Length: Line length of body text should be between 60 and 75 characters per line and should not exceed 100 characters per line for best results.
Line Height: Line height should be between 140 % - 180%
Letter Spacing: Letter spacing should increase with smaller font sizes like caption and decrease with larger font sizes like heading‍

Iconography
Font

Aa

Circular
Book
Medium
Bold
Black
Colors
#FF0000
#FFF600
#00FF00
#00D8FF
#9013FE
#FF0000
#FFC500
#F95C81
#FFFF45
#0FD64F
#F8EF42
#0072FF
#00F2FE
#B721FF
#21D4FD

IDEATION

Wireframing

We created a set of Interface layouts and templates to help us better conceptualize our designs.  Although these aren't the layouts we used in the final version, below are the detailed annotated wireframes.

User Flow

We developed a user flow to understand the interactions with our OS. The user starts at home, find their favorite game and launches the app. While playing they get notified that they have 10 minutes left of screen time so they decide to call their parents.

VISUAL DESIGN

To create our final designs we had to firstly develop a visual system to bring consistency to our work. After creating our first version we presented our stills to our peers and iterated based on their critique.

Design Language

We created Spark our design language. We wanted to visually represent our research and design requirements. We believed that it would help focus us and bring uniformity to all our designs.
‍

First Iteration

We started developing various applications that would be part of the native Spring OS system. Every 2 weeks from here on we ideated, conceptualized and designed the main screen(s) of 5 new applications. During this time our project took an interesting pivot in terms of our visual design.
‍
Initially our design was heavily rooted in android as the Amazon Kindle Fire (Kids Edition) was the most popular kids tablet on the market. It felt overcrowded along with instances of us not utilizing screen real estate properly. This caused an inconsistency in the overall feel of the product. We hence went back to the drawing board to rethink our design strategy.
‍

Takeaways
Overcrowded
Home screen, Books, Videos and other high level functions looked over crowded
Under-Utilizing screen real estate
Application such as Dialer, contacts, phone, calculator, clock seemed vacant and empty

Gestures

We developed a series of additional gestures based on feedback. We created a floating vertical nav bar that could launch 'smaller' application or utilities in separate windows due to limited functionality of those apps.
Launching the Navigation Bar
Launching a utility application
from the Nav Bar
Dragging the app to be its
separate window
Launching a secondary application
from the Nav Bar
Exiting a launched application
Pulling out the secondary addition
to the Nav Bar

Modifications

After developing the system our users would now use to interact with the device, we started segregating application into Small screen and Full screen application. Settings, Phone, Contacts, Clock, Stopwatch and Calculator would now be a part of these small screen application. We also re designed the home screen as well as created the high fidelity navigation bar.

Home Page

Feedback
The page seemed clustered and repetitive. The floating nav bar on top of the apps didn't work. The icons on the home screen were much larger making the page seem overpacked with information.


‍Design Recommendation
Replaced the top Nav Bar with a swipe in Navigation from the Left
Changed Icon spacing and grid structure
Older User Interface
New User Interface
Updated User Interactions
User swipes from Left side of screen to reveal navigation
User Swipes down from the top of the screen to Search

Small Screen Apps

Feedback
Certain applications that we had built seemed to take up too much screen space. The application felt empty as there wasn't a lot of information being present on them.
‍Design Recommendation
Redesigned these applications to be "small Screen" Application that can be launched from the nav bar and interacted with using our new gestures.
Contacts
Older User Interface
New User Interface
Add New Contact
Older User Interface
New User Interface
Dialer
Older User Interface
New User Interface
Calling
Older User Interface
New User Interface
Calculator
Older User Interface
New User Interface

Final Designs

We made our final designs for the operating system. Personally I worked on the Home Page, Navigation Bar, Search, External Parental Controls app, Settings and the Phone app.
‍

REFLECTION

Working on this project was enlightening as I learned more about collaborating and talking to other designers. It was exciting to see how communicating with different people in the same field of work was so challenging yet satisfying. Another important skill in visual design is thatIi learned by critique. I was able to better my designs by leaning on my professors knowledge and expertise. Finally as we had to present our designs for a critique each week, I definitely feel more confident in presenting in front of a room of designers and better articulating my designs in the given time limit.
View Other Projects
LinkNow
SaferZone