case study
Twinkel

Twinkel is a responsive platform that connects families with local, after-school programs.

It puts content first and provides a suite of features: attendance tracking, messaging, profiles, reporting, and data analytics for program and participant performance.

The Problem

Agencies need a tool to aid in recruitment, retention, and engagement of their programs because they want to maximize their time to enhance their agency-specific mission.

View Prototype
How can Twinkel aid educators in boosting academic performance?

Effective after-school programs, also known as OST (out-of-school-time) programs, have a wide range of benefits for young adults, their families, and the community at large. Not only do after school programs boost academic performance, but they also promote social skills and physical health, all while providing students with a safe, structured environment.

We identified the opportunity to design a responsive app to appeal to program administrators on the move. The app will be capable of managing a database of programs and participants and supply detailed data.

Business Goals

To offer free and low-cost programming for young adults across a wide-ranging socioeconomic spectrum by generating revenue through advertising and premium partners that pay to have their programs on the platform.

Product Goals

To build a responsive platform connecting students with after-school programs; which in turn will help community programs maximize their participant reach.

Outcomes

We discovered that education apps have many benefits but needs a streamlined interface to aid educators and program managers with
administrative tasks while making scaling easier. Offering a responsive platform allows users to work remotely, share reports & documents easily, and can facilitate collaboration more often.

Methodology
We conducted a series of analysis, evaluations, and interviews with users in established education-adjacent fields, with a targeted audience specifically geared towards those who have experience with after-school program administration, or program management. Ideal participants included individuals familiar with desktop, tablet, mobile, and responsive web applications.
What We Set Out to Achieve
  1. Streamline core functionality for administrators & staff
  2. Promote easy data visualization and data transfer
  3. Connect parents & children to their program leaders
What We Set Out to Learn
  1. How do user interface elements affect the usability and knowledge transfer of our selected user group?
  2. How can such trends be implemented to refine our designs and make a better digital product?
What We Will Analyze
  1. Analyze a mix of quantitative and qualitative data to discern clear trends among our users
  2. Evaluate the effectiveness of our design iterations, based on previous user feedback
  3. Evaluate the effectiveness of our designs when transferred to a responsive web mobile format
Who we interviewed

We interviewed eleven users who are Subject Matter Experts (SMEs) in education, non-profit organizations, and medical industries. Their job titles ranged from coordinator, administrator, to program and educational managers.

Subject Matter Experts
what we tested

Divergent designs from five designers including Style Tiles, High Fidelity screens, and Prototypes for both tablet and mobile devices.

How We tested

We aligned a business goal to each task scenario for users to complete, and analyzed the product's usability through users' behavior, feedback, and preferences.

key takeaways

Regardless of user demographics, all users prioritized a clean design aesthetic, over one that fits their level of engagement with their students.

Looking at the Education Tech Space
The following competitors helped to identify industry and business trends, find potential opportunities for differentiation, and to gain design inspiration and ideas.
Strengths
  1. Large degrees of customization
  2. Solid customer support teams
  3. Feature-rich applications
WEaknesses
  1. Poor visuals, poor text legibility, and cramped screens
  2. Lack of data visualization, and an overuse of lists
  3. Difficult learning curve
Opportunities
  1. Mobile-first design approach for responsive web
  2. Clear data visualization, spaced efficiently
  3. Leverage better text legibility and accessibility initiatives
Direct competitors
A majority of the direct competitors focused on streamlined workflows, structured data sets, customization, and a playful color palette. Most are mobile friendly yet lack messaging capabilities.
indirect competitors
While indirect competitors succeeded in customer and tech support, they had poor data visualization and lack a consistent design language making simple tasks unnecessarily complex.
The Design Goal
After evaluating the competitive landscape, we identified the opportunity to design a responsive app to appeal to program administrators on the move. The app will be capable of managing a database of programs and participants and supply detailed data.
the new and emerging industry trends
  1. Mobile-first approach in education tech for admin purposes: attendance, milestones, etc.
  2. Robust customer support for onboarding and training
  3. Virtual Reality experiences for students to explore difficult or impossible locations
current lead competitors
  1. Brightwheel has leveraged the mobile-first approach to its software, which has helped propel it to the #1 most highly reviewed by customers on the market
  2. Kinderlime/Procare has hardware that sets it apart from its competitors: secure door controllers, fingerprint check-in, payment with a card swipe, and all in one computer check-in
approaching competitors and trends
  1. Homeroom, an all-encompassing after school enrichment platform that allows school organizers, parents, and vendors to organize, book and manage classes
  2. Mobile-first/Digital-first learning is the way Gen Z is accustomed to thinking
  3. Cloud-based content increases flexibility for instructors
Design Goal + Human Values = Human Design Goal
With Ethical Design Thinking, our goal is to think of ethics intentionally in our work and to reframe our design goal to be more reflective of human values. This represents our findings which also helped define our design principles and our improved design goal:

"To respect the time of administrators and other stakeholders, and to help them create and curate an engaging environment where they can both manage and gain further insight into what’s working, and what’s not, in their after-school programs."
Personal Values
1
Trustworthiness
  1. Achieved by: Lack of control between student-parent-teacher dynamic; Financial incentives for program partners; Product bugs
  2. Difficulties: Lack of control between student-parent-teacher dynamic; Financial incentives for program partners; Product bugs
2
Kindness
  1. Achieved by: Respectful and direct language; Account for user mistakes
  2. Difficulties: User flow; Minimize where users can make errors; User allowed to fix data easily
3
Patience
  1. Achieved by: Respecting the user's time; Providing only relevant info; Solid onboarding and contextualized tool tips
  2. Difficulties: A wealth of information displayed; Poorly worded messaging; Confusing navigation and labeling
Product Values
1
Safety
  1. Easier in: a classroom setting, religious space, home
  2. Things in common: Close relationships; A setting where one can be themselves
2
Trust
  1. Easier in: school, work, home, etc.
  2. Things in common: Authority figures and a set of rules that are followed
3
Transparency
  1. Easier in: home, banks, grocery stores, rescues, hospitals, math class
  2. Things in common: Understanding where and what your personal information and an outside source's info is used for
4
Autonomy
  1. Easier in: work, school, movies, bookstore, restaurants
  2. Things in common: Areas that empower their customers and employees to make their own decisions
Design Principles

As a team, we brainstormed, iterated and finalized a variety of impactful design principles to guide our project that are supported by our research findings. These guidelines helped establish alignment across design decisions and held us accountable throughout the project.

Modular
Iterative

We believe that practice makes perfect, and achieving perfection requires trying, and then trying again and again until you get there.

Modular
Modular

We are creating a culture of customization. We choose to create things out of independent parts with standard interfaces. This allows our designs to be customized, upgraded, repaired and for parts to be reused, just like LEGOs.

Universal
Universal

We know accessible design is good design. Everything we build should be as inclusive, legible and readable as possible for both educators and students. If we have to sacrifice elegance — so be it. We’re building for needs, not audiences.

Test Scenarios

To better inform our design to fit user needs, we conducted surveys and interviews which placed users in scenarios and offered tasks.

Pre & Post Questions
Pre & Post Questions

Initial questions will focus on desirability testing, measuring the users’ first impressions, emotional response, and brand perception. Asking questions such as, “What do our users expect and what do they value?”, will allow us to tailor our high-fidelity designs to a relevant, real audience. 

User Scenarios
User Scenarios

Our story focused on an after-school program admin's typical work day to accomplish one of the following tasks: notifications, messaging, enrollment, attendance, reporting, etc.

Quantifying UX
Quantifying UX

Good design work is informed by both —the quantitative and the qualitative way of answering questions. So, we also asked our users to rate their how easy or hard each task and how clear or unclear navigation and labels were.

Exploring Visual Designs
Mood Boards & Style Tiles

The concepts presented to our users helped us determine potential concerns and pain points such as color and type, but more importantly perception and usability.

Concept C received the most votes and positive feedback during user interviews due to its eye-catching iconography which is also its weakness since it skews to a younger demographic.

Concept A

This concept sparks curiosity, positivity, energy, clarity and intellect. Plus, it includes a visual representation of mundane tasks. The bright colors represent the types/levels of alert systems and the neutral brown hues represent grounding, foundations, stability, warmth, and honesty.

Concerns & Pain Points:
  • How do I organize features in an accordion?
  • Brown as the main color - Is it pleasing to the eye?
  • How can I use neon colors as accent colors? Will it be distracting or evoke panic?
Concept B

This concept conveys strength, authority, power, energy, and passion. Gives analytical insights into programs, attendance, classes, etc. with filter options to improve their productivity and the bottom line.

Concerns & Pain Points:
  • How much or little black should I use?
  • Is red viewed too intense and negatively for an after-school program app?
  • Or can this scheme be the dark mode/backend mode? A lighter gray and pink can be used for the user-facing app?
Concept C

This concept is light-hearted, kind, nurturing, calm and euphoric with cute and colorful graphics with happy faces to set an encouraging, positive tone for educators and an at-a-glance view with lots of imagery.

Concerns & Pain Points:
  • Will educators/admins/users take this app seriously or is the color scheme and characters too juvenile?
  • Will the use of pastel colors make readability/accessibility an issue?
  • Will updates from the educators be nonsensical when sharing an emoji or something cute?

From Wireframes to Prototype

Dashboard

  1. Removed the heading and increased the primary navigation's legibility with icons and larger button text. Pushed up the secondary nav which changes based on the selection in the tertiary nav.
  2. Created a drop-down menu for Import/Export so buttons are consistent with the rest. Added New Report feature since our SMEs mentioned reporting as a hurdle but needed to be generated most often.
  3. Totals Cards represent different metric views and needed to account for differentiation and representation.

Student Profile

  1. Removed breadcrumbs to avoid confusion and are unnecessary with flat hierarchies that are only 1 or 2 levels deep.
  2. Secondary navigation is aligned with the primary navigation for better hierarchy structure
  3. Rearranged New Report and Import/Export drop-down menus to align with Settings, List, Filter and Chart Icons for better usability.

Prototype 01: Key Points & Qualitative Results

Trends from Affinity Diagram

  1. Colors should be vibrant enough to distinguish from background (contrast). Users disliked too bright or clashing and dull colors.
  2. Legibility is important. Users liked the type because it was legible and spaced out well.
  3. Ease of use and non distracting elements are important with clear navigation and easy to comprehend data visualization.
User Scenario:
Success Rate:
Ease of Use (avg):
Clarity (avg):
1. Notification
97%
4.83
4.83
2. View Notification
83%
4.17
3.83
3. Student's Note Entry
90%
4.50
4.67
4. Checking Attendance
93%
4.67
4.33
5. Export Document
97%
4.83
4.83
Overall Engagement
4.33/5.0
4.5/5.0
Overall Aesthetic:

Qualitative Results

After examining the success rates of the user scenario, we re-evaluated how the tasks and scenarios were phrased, along with the UI interactions and elements mentioned by the user.

When asking about Ease of Use, we asked the users to rate the scenario/task from one to five, with one being the easiest and five, difficult. The users had difficulty viewing notifications and adding an entry in the student profile.

When asking about Clarity, we asked the users to rate how well they understood the scenario/task from one to five, with one being the easiest and five, difficult. Once again viewing notifications proved most difficult and checking attendance.

Visuals + Organization

Users described the design's aesthetic as simple and clean with a pleasing color palette that pops but needs complementary colors, especially when distinguishing data visualization. The icons also skew towards a younger demographic (ex. elementary school) which can be limiting.

Prototype 02: Key Points & Qualitative Results

Trends from Affinity Diagram

  1. Consistency in screens’ layout and organization, also translated well from tablet to mobile
  2. Users’ preferences for the primary colors (pink, blue, and brown) were mixed and most users wanted darker text and higher contrast.
  3. Icons were contextual which helped the users navigate with ease
User Scenario:
Success Rate:
1. Notification Check & Participant Pathway
100%
2. Participant Note Entry
83%
3. Checking Attendance
100%
4. Exporting Document
100%
5. Check Dashboard & Check-Ins
83%
6. Navigate to Participant Profile
100%

Qualitative Results

Two-thirds of the user task scenarios was completed successfully by our users while the remaining third had an 83% success rate: (2) Participant Note Entry and (5) Check Dashboard & Check-Ins. We'll have to re-examine and conduct further testing to ask if the task was difficult because of the scenario, task, and/or UI elements.

"[Screens] they're consistent. I think that's really helpful, especially in your website. Looks like all the information connects to itself, it’s supposed to be easy. Yeah, like having this new export links, everything's pretty consistent as far as links go."

Visuals + Organization

  1. Consistency in screens’ layout and organization, also translated well from tablet to mobile. 
  2. Users’ preferences for the color palette (pink, blue, and brown) were mixed and most users wanted even darker text and higher contrast.
  3. Icons were contextual which helped the users navigate with ease.
What Our Subject Matter Experts Taught Us
Program Director at an all girls public school
Be more aware about the safety of after school participants and how to support them emotionally while maintaining administrative duties.
“Emergency contact, extremely important. More so who's authorized to pick up who again. We enroll over 100 kids. So it's really important that we're able to access, access that information quickly. Hours of participation within our program will be nice to generate as well.”
assistive technology instructor for the visually impaired
To values UI elements that stand out from the background because she works with people who are visually impaired. 
“Currently, typically using PC computers, if that's what you're asking, occasionally I got to use Mac or iPad or iPhones.”
Aquatics Director at ymca
The design should be geared with administrators, but try to inject a youthful energy.
“I think you know as a staff member, whoever’s using this it really puts me in the correct kind of feeling, they feel warm, they feel... it makes me feel the way I should feel working with youth.”
program coordinator at an all girls public school
Centralize attendance and rosters from different programs to make reporting easy.

“And I think in terms of like scheduling, something that ours doesn't do that would be nice to have each a way to show each kids' individual schedule for the week, in a way that's like, looks good. And emailing it out to them automatically will be nice.”
retired educator and administrator
Spacing, busyness, and text legibility are a top concern.
“The left side doesn't balance with the right side at all and it doesn't make me want to look at it too much.”
middle school teacher
Applications should be accessible for both kids and older educators and administrators who don't understand technology. 
“...there's this transition between the older generation and the younger generation, working in education, technology can be kind of scary for them.”
retired school administrator and former vice principal
Don't overcomplicate things - put the important information front and center.
“As an administrator, less is more. I prefer more neutral colors and strong fonts, because I’m looking to see ‘what do I have here?’, and ‘what can I do?’”
Twinkel Prototype 02
Learnings and Future Recommendations
Typeface & Legibility

A majority of users tested preferred sans serif fonts and headings with large, bold type for easy viewing. I recommend running accessibility user tests more often and gather site visit data to observe various user types.

colors & Emotions

The color palette should be vibrant enough to distinguish from background. Most users disliked too bright or clashing, dull colors, and like a subtle color palette that's not overpowering. I recommend avoiding a monochromatic color scheme especially when viewing data viz.

Layout, Hierarchy & Elements

Users felt more informed when buttons contained icons and labels as seen in the primary nav and were more confused when using the secondary nav because the options were new to them. Overtime, the users believed they would become more familiar and I suggest continued testing to eliminate or consolidate features.

Prototype Walkthrough