Twinkel
Enabling after-school program administrators to streamline daily tasks and better understand student engagement.
Role:
UI/UX Designer
Client:
Flatiron School
Platforms:
Tablet, Mobile
Areas:
Design, Strategy
Background
When an after-school program is effective, it can be a game changer. The best programs offer a wide range of benefits, from boosting students' academic performances, to promoting social skills and helping kids stay physically fit; all within a safe, structured environment.
The key to these programs is recruitment, retention, and engagement. Twinkel was conceived as a CRM-like tablet-friendly app that allows administrators to measure and monitor program success and interest. A user-facing portal (where users can register and engage with programs) is part of the application; however, our team was tasked with designing the back-end portion of the app from the ground up. The back-end is intended to allow admins to see a 360° view of their programs and to reduce administrative burden. Top priorities were: easy-to-digest visuals and charts, helpful participant profiles, and simple, powerful reporting.
Approach
The goal for our team was to create the best possible experience for users while also balancing stakeholder needs. One key stakeholder said: “I want the app to be as convenient as scrolling on Instagram and liking a bunch of stuff while standing in line at the grocery store.” We began our research with this in mind, and after getting a sense of the competitive landscape, we honed in on a few additional design principles that helped guide us throughout the process. We also focused on accessibility (high contrast colors eventually tested best) and scalability, with each piece of the app being modular and flexible to any current or unforeseen needs that might arise in the future.
Process
First, we conducted 20 in-depth interviews with subject matter experts and administrators to gather insights from our target users. Our main takeaways in terms of requests were:
-Bespoke format: A majority of programs used for managing after-school programs are for a general education audience and not designed to fit this particular niche
-Visual Appeal: Our users found that typical educational apps and websites held little visual interest or personality that reflected the nature of the programs themselves
-Legibility: Juggling multiple busy programs, our users needed to see data easily, clearly, and at a glance
The interviews validated our previous research and helped to inform our design concepts. Although we were tasked with designing a system to be used primarily by adult administrators, my design approach was to take a tiny bit of inspiration from the feelings I hope the students get out of their programs: freedom, comfort, and energy.
I was a little surprised that users selected my purple “energy” concept, which I felt was more experimental and potentially divisive. However, multiple users likened it to “dark mode” and found the boldness of the color palette and the high contrast chart elements to be visually pleasing. Testing is always a good reminder that you are not your user.
Results
My design tested well with users (13 usability tests over 2 iterations) who praised the organization of information and visuals. These design aspects also contributed to high engagement scores.
"I really like the homepage and the gradients. I like the organization. The overall design choices are really strong."
- After-school administrator
For my second pass of the design, I focused primarily on fixing UX issues we discovered in testing, since aesthetics were well-regarded. Harkening back to the initial ask stressing an Instagram-like ease-of-use, I decided to focus on improving the mobile implementation of data visualization modules. In the original iteration, one could only scroll these modules horizontally. . This did not test well, so we adjusted the modules to contain only as much information as could be condensed to the width of a smaller smartphone. Users far preferred Version 2.
Version 1 (left) contained more information via horizontal scroll. Version 2 limits data to fit screen width, which was preferred by users.
Future
Although we were only able to run two rounds of testing given the project timeline, we felt encouraged by the early results and success we saw with users responding so positively. If given additional timing and budget, the team identified key areas where the app could benefit from further testing, exploration, and development, including: robust messaging capabilities for participants and parents, a reimagining of the front-facing portal for consistency and further engagement, and the further building upon of data viz modules and general scalability of the system, to ensure that it grows along with any future needs of administrators.
Twinkel
Enabling after-school program administrators to streamline daily tasks and better understand student engagement.
Role:
UI/UX Designer
Client:
Flatiron School
Platforms:
Tablet, Mobile
Areas:
Design, Strategy
Background
When an after-school program is effective, it can be a game changer. The best programs offer a wide range of benefits, from boosting students' academic performances, to promoting social skills and helping kids stay physically fit; all within a safe, structured environment.
The key to these programs is recruitment, retention, and engagement. Twinkel was conceived as a CRM-like tablet-friendly app that allows administrators to measure and monitor program success and interest. A user-facing portal (where users can register and engage with programs) is part of the application; however, our team was tasked with designing the back-end portion of the app from the ground up. The back-end is intended to allow admins to see a 360° view of their programs and to reduce administrative burden. Top priorities were: easy-to-digest visuals and charts, helpful participant profiles, and simple, powerful reporting.
Approach
The goal for our team was to create the best possible experience for users while also balancing stakeholder needs. One key stakeholder said: “I want the app to be as convenient as scrolling on Instagram and liking a bunch of stuff while standing in line at the grocery store.” We began our research with this in mind, and after getting a sense of the competitive landscape, we honed in on a few additional design principles that helped guide us throughout the process. We also focused on accessibility (high contrast colors eventually tested best) and scalability, with each piece of the app being modular and flexible to any current or unforeseen needs that might arise in the future.
Process
First, we conducted 20 in-depth interviews with subject matter experts and administrators to gather insights from our target users. Our main takeaways in terms of requests were:
-Bespoke format: A majority of programs used for managing after-school programs are for a general education audience and not designed to fit this particular niche
-Visual Appeal: Our users found that typical educational apps and websites held little visual interest or personality that reflected the nature of the programs themselves
-Legibility: Juggling multiple busy programs, our users needed to see data easily, clearly, and at a glance
The interviews validated our previous research and helped to inform our design concepts. Although we were tasked with designing a system to be used primarily by adult administrators, my design approach was to take a tiny bit of inspiration from the feelings I hope the students get out of their programs: freedom, comfort, and energy.
I was a little surprised that users selected my purple “energy” concept, which I felt was more experimental and potentially divisive. However, multiple users likened it to “dark mode” and found the boldness of the color palette and the high contrast chart elements to be visually pleasing. Testing is always a good reminder that you are not your user.
Results
My design tested well with users (13 usability tests over 2 iterations) who praised the organization of information and visuals. These design aspects also contributed to high engagement scores.
"I really like the homepage and the gradients. I like the organization. The overall design choices are really strong."
- After-school administrator
For my second pass of the design, I focused primarily on fixing UX issues we discovered in testing, since aesthetics were well-regarded. Harkening back to the initial ask stressing an Instagram-like ease-of-use, I decided to focus on improving the mobile implementation of data visualization modules. In the original iteration, one could only scroll these modules horizontally. . This did not test well, so we adjusted the modules to contain only as much information as could be condensed to the width of a smaller smartphone. Users far preferred Version 2.
Version 1 (left) contained more information via horizontal scroll. Version 2 limits data to fit screen width, which was preferred by users.
Future
Although we were only able to run two rounds of testing given the project timeline, we felt encouraged by the early results and success we saw with users responding so positively. If given additional timing and budget, the team identified key areas where the app could benefit from further testing, exploration, and development, including: robust messaging capabilities for participants and parents, a reimagining of the front-facing portal for consistency and further engagement, and the further building upon of data viz modules and general scalability of the system, to ensure that it grows along with any future needs of administrators.
Twinkel
Enabling after-school program administrators to streamline daily tasks and better understand student engagement.
Role:
UI/UX Designer
Client:
Flatiron School
Platforms:
Tablet, Mobile
Areas:
Design, Strategy
Background
When an after-school program is effective, it can be a game changer. The best programs offer a wide range of benefits, from boosting students' academic performances, to promoting social skills and helping kids stay physically fit; all within a safe, structured environment.
The key to these programs is recruitment, retention, and engagement. Twinkel was conceived as a CRM-like tablet-friendly app that allows administrators to measure and monitor program success and interest. A user-facing portal (where users can register and engage with programs) is part of the application; however, our team was tasked with designing the back-end portion of the app from the ground up. The back-end is intended to allow admins to see a 360° view of their programs and to reduce administrative burden. Top priorities were: easy-to-digest visuals and charts, helpful participant profiles, and simple, powerful reporting.
Approach
The goal for our team was to create the best possible experience for users while also balancing stakeholder needs. One key stakeholder said: “I want the app to be as convenient as scrolling on Instagram and liking a bunch of stuff while standing in line at the grocery store.” We began our research with this in mind, and after getting a sense of the competitive landscape, we honed in on a few additional design principles that helped guide us throughout the process. We also focused on accessibility (high contrast colors eventually tested best) and scalability, with each piece of the app being modular and flexible to any current or unforeseen needs that might arise in the future.
Process
First, we conducted 20 in-depth interviews with subject matter experts and administrators to gather insights from our target users. Our main takeaways in terms of requests were:
-Bespoke format: A majority of programs used for managing after-school programs are for a general education audience and not designed to fit this particular niche
-Visual Appeal: Our users found that typical educational apps and websites held little visual interest or personality that reflected the nature of the programs themselves
-Legibility: Juggling multiple busy programs, our users needed to see data easily, clearly, and at a glance
The interviews validated our previous research and helped to inform our design concepts. Although we were tasked with designing a system to be used primarily by adult administrators, my design approach was to take a tiny bit of inspiration from the feelings I hope the students get out of their programs: freedom, comfort, and energy.
I was a little surprised that users selected my purple “energy” concept, which I felt was more experimental and potentially divisive. However, multiple users likened it to “dark mode” and found the boldness of the color palette and the high contrast chart elements to be visually pleasing. Testing is always a good reminder that you are not your user.
Results
My design tested well with users (13 usability tests over 2 iterations) who praised the organization of information and visuals. These design aspects also contributed to high engagement scores.
"I really like the homepage and the gradients. I like the organization. The overall design choices are really strong."
- After-school administrator
For my second pass of the design, I focused primarily on fixing UX issues we discovered in testing, since aesthetics were well-regarded. Harkening back to the initial ask stressing an Instagram-like ease-of-use, I decided to focus on improving the mobile implementation of data visualization modules. In the original iteration, one could only scroll these modules horizontally. . This did not test well, so we adjusted the modules to contain only as much information as could be condensed to the width of a smaller smartphone. Users far preferred Version 2.
Version 1 (left) contained more information via horizontal scroll. Version 2 limits data to fit screen width, which was preferred by users.
Future
Although we were only able to run two rounds of testing given the project timeline, we felt encouraged by the early results and success we saw with users responding so positively. If given additional timing and budget, the team identified key areas where the app could benefit from further testing, exploration, and development, including: robust messaging capabilities for participants and parents, a reimagining of the front-facing portal for consistency and further engagement, and the further building upon of data viz modules and general scalability of the system, to ensure that it grows along with any future needs of administrators.