Case Study | Activiteach
Mobile-Responsive Activity Database Website for Elementary School Teachers
Challenge
To create a mobile & web-responsive application providing elementary school teachers a solution to better engage students in all learning environments
Solution
Activiteach is a responsive activity database website allowing elementary school teachers with activity ideas that will promote engagement through doing while learning
Role & Tools Used
UX/UI Designer
Figma
Mural
Optimal Workshop
Protoypes
Researched & Designed
User Research & Interviews
Data Analysis
Empathy Mapping
User Persona
Brainstorming
From Start
Low-fi Wireframes
Mid-fi Prototyping
Hi-fi Prototyping V 1
Usability Testing
Hi-fi Prototyping V 2
To Finish.
Moodboards & Branding
Logo Redesign
Design System
Implement Best Practices
Hi-fi Prototyping V 3
The Question
How might we re-imagine the U.S. elementary school experience due to COVID-19 constraints?
Design Thinking Process
Empathize
Define
Ideate
Prototype
Test
Empathize & Define
User Research
I conducted user interviews & a survey to better understand the challenge presented based on my target users and provide the best solution.
Audience
I determined that the key direct audience would be elementary school teachers in the United States.
Survey Responses
I shared my survey via LinkedIn and Slack to gather responses from remote, in-person, and hybrid elementary school teachers. I received 76 total survey responses where there was a roughly even distribution of responses for those teaching either in-person, hybrid, and remote.
Data Analysis
User Interviews
I connected with 3 elementary school teachers via Zoom to gain a deeper insight on what it was like to teach at the beginning of COVID & their adjustments and expectations for the Fall 2020 semester.
User Persona
Based on the synthesis of the user interviews and survey results, I created a user persona focusing on the goals and pain points of this particular user.
Ideate & Prototype:
Wireframing
Mapping out the low-fidelity and mid-fidelity wireframes helped me lay out the main user flows and user interface.
Low-fi Wireframes for desktop, tablet, and mobile devices.
Mid-fi Wireframes for desktop, tablet, and mobile devices.
Usability Testing & Feedback:
After designing the initial hi-fi prototypes, I contacted 3 direct audience members and conducted usability testing with each of them.
Below are the key feedback points from the usability testing:
Prototyping Version 1
High-fidelity prototype traits:
Designed logo icon + font to reflect the target demographic (teachers)
Blue + Yellow color scheme for an elementary academic aesthetic
Hand-picked kid-friendly images to display throughout the site
Focused on “Find Activity” and “Add Activity” user flows
Desktop Prototype
Mobile Prototype
Upgrading the Brand
Generated 2 total mood boards with one of them pictured above
Established design systems for desktop (pictured above) and mobile screens
Updated logo icon to a more recognizable red apple outline
Refined filter to a more modern blue and white scheme, aligned main text to left, and changed dropdown arrows to plus/minus signs.
Hi-Fi Prototypes Version 2
Hi-fi Prototyping Version 2:
Refined existing branding: color scheme + logo redesign
Established mobile and desktop design systems
Incorporated more efficient design practices
Desktop Prototype Version 2
Mobile Prototype Version 2
Key Takeaways
Simple is best. I initially had 5 user flows (About, Newsletter, Events) in addition to the “Find Activity” and “Add Activity” flows then cut down to 2 main flows.
Your user knows best! I recognized the importance of conducting usability testing so that the intended user can easily navigate through the site.
Design system = efficiency. I fell in love with design systems because it makes prototyping and updating designs so much faster.
