Storistic (app)
Storistic is my biggest personal project, a tool to help children to learn about emotions. I created a design system with everything in mind. Check it out!
And here is its story:
The motive
After I created a very short version of Storistic for Google's certificate, I decided to work on in in more depth. I had two motive for doing this:
As an alexithymic person myself, I understand the difficulty of some children who are having hard time in identifying emotions.
I wanted to learn Figma beginning with the smallest details, let's say "atomic design". So, I decided to use autolayouts and components to create responsive pages.
The target group
My target group in mind is children of ages 6-10 with some kind of a developmental or neurological disorder such as:
Alexithymia
Autism
ADHD
Dislexia
Neurotypical children who know how to read can also benefit from the app.
I started of my personal experience to conduct the idea. I know how being unable to identify emotions can affect the social life. I wish I had the chance to practice with such an app in my childhood.
This may be regarded as the weak side of the project. However, I designed everything suitable for iteration and under mentorship.
Persona
"Sometimes people are angry with me but I don't understand why. They say it's appropriate. But I don't know what I did wrong."
Tuğçe;
9 years old
Born and lived in a big city
Elementary schoold student
GOALS
Help her identify emotions in an effective and fun way,
Help her feel more confident in her relationships with friends and family
FRUSTRATIONS
I want to know why people are angry at me.
I want to show that I really care about them.
Tuğçe is a happy, friendly child. But she has hard times identifying others' emotions. This makes it hard for her to experience social situations. If she can better understand who feels how, then she can see both sides and decide how to act accordingly.
Competitive audit
Crazy 8's
Iterative process
You can view the drastic changes between before and after screens. Before ones seem to me know as if I didn't know what I was doing. After ones (I think they are 3 months-or-so after) are more decent and compliant with Apple'a Human Interface Guidelines.
Before
I tried to fit everything in the screen (above the fold, in web terms). The button is way too big, whereas the bottom navigation is almost unclickable.
After
The home pages breathes with cards. Everything here has turned into components with required variants. Color hierchy and font sizes have changed.
Before
Same problems above. The white space is literally at pains to show itself. I didn't know about the notch, status bar or home indicator back then.
After
Everything is in place now. The story text seems less accessible but check out the bar under the top title. The users will have more control over the content.
Before
The UX is of this page so incomplete. The user would click on an emotion and would immediately see the result page. It would be an absolute shock.
After
Notice how that screen had to be two screens. The flow is much more explicit with icon and color chances. The user is also much more in control.
Hi-fi prototype
Here are only the sign up and verification screens. The whole prototype can make you dizzy in just a single image. Check the prototype by yourself.
Dark mode
All the screens in the app have also dark modes. There is a color scheme for both modes and components have relative variants. So, the transition was smooth.
Tablet app
This mobile app would also be released for apps, given the time children spend with tablets. You can also find the dark mode on the link at the very top of this case study.
Color scheme
Typography
Components
The outcome
The project took me very long. It must have been more than a month and I was thinking about it the whole time. It was like I had slowed down and doing the same thing for days. However, when it was sort of complete, I had many gains on my side:
I can confidently say that I've learned Figma. I can create buttons, bars, cards and screens for different devices. I can also use the plugins and community files to create seamless muckup series and hi-fi prototypes.
My UI's may not be perfect but I got a very strong grasp of design systems and consistency among devices and website. I now can choose a proved design system and use it in any of my future projects.