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.
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.
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.
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.
To build a responsive platform connecting students with after-school programs; which in turn will help community programs maximize their participant reach.
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.
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.
Divergent designs from five designers including Style Tiles, High Fidelity screens, and Prototypes for both tablet and mobile devices.
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.
Regardless of user demographics, all users prioritized a clean design aesthetic, over one that fits their level of engagement with their students.
"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."
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.
We believe that practice makes perfect, and achieving perfection requires trying, and then trying again and again until you get there.
.png)
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.
.png)
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.
To better inform our design to fit user needs, we conducted surveys and interviews which placed users in scenarios and offered tasks.
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.
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.
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.
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.
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.
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.
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.
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.
Notifications should allow users to take actions, and make choices, with a single tap and not just with a close icon. Having too little options confused the users and failed to nudge them to take action.
Nomenclature surrounding the attendance roster list was confusing to each user because from the secondary navigation it was unclear that the attendance button was contextualized to the specific participant
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.
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."
User preferences for note editing via pop-up card were divisive so further A/B testing needs to be conducted with other options: Inline Editing which displays icons on hover, Inline Edit on popover, or Multiple Fields Inline Edit.
Navigation from any other screen to Dashboard > Attendance > Total Check-Ins was confusing to some users (83% success rate) so further testing with navigational hierarchy is needed.
Navigation to Participant Profile was confusing to some users (83% success rate) due to the label, Snapshot. The users who did not successfully complete this task were unsure why they were given this view and label.
“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.”
“Currently, typically using PC computers, if that's what you're asking, occasionally I got to use Mac or iPad or iPhones.”
“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.”
“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.”
“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.”
“...there's this transition between the older generation and the younger generation, working in education, technology can be kind of scary for them.”
“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?’”
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.
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.
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