Clarifi
Clarifi
Embedded Files
During summer 2021, I did design and frontend dev with an EdTech startup called Clarifi.
Clarifi is a digital workspace for students with ADHD to complete online work. Our planning tools help students stay on top of their assignments and plan their work sessions ahead of time. When they’re ready to work, Clarifi’s digital workspace blocks distractions and keeps students focused with smart reminders. Students are incentivized to complete work with our rewards system where they can earn XP and gems to unlock and buy new gear for their customizable avatar.
My Work
My Work
Design
Design
Initially my responsibility was to lead a team of designers to completely redesign the Clarifi product. Before this, Clarifi was a prototype using a combination of Python and Google Forms. My team’s job was to help design a version of Clarifi that was ready to launch. We started by helping rebrand Clarifi with a new logo and style guide. Then, we created wireframes and eventually (after many many iterations) designed a high fidelity mockup for the final product.
Front End Development
Front End Development
The following summer, Clarifi’s CEO offered me the opportunity to work with Clarifi’s core team. I initially joined the team as a designer, but when it became clear that another developer would be critical to the team I began learning React. This was my first time using React, so the biggest challenge was learning as I created the product. Through a combination of online courses (and a lot of google and Stack Overflow) I made my designs a reality!
Wireframes and Hight Fidelity Mockups
Wireframes and Hight Fidelity Mockups
React Project Demo
React Project Demo
To the right is a demo of the React code I wrote in action! In the actual product, this code is wrapped as an Electron app into a virtual environment where students complete their work. The virtual environment blocks distracting environments and is integrated with the React I wrote so students lose lives when inactive during working sessions.
Graphics
Graphics
I created graphics for Clarifi, including customizable avatars with different hair styles, skin tones, and outfits. I also designed swords, shields, and achievements for students to unlock. This was also my first time making pixel graphics, which was a fun challenge for me!
Character customizations
Character customizations
Achievement Icons
Achievement Icons
Google Sites
Report abuse