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.

Thank you for your time!

Before you leave:

Watch a mini flow below.
Also visit: Storistic website.

Page updated

Google Sites

Report abuse