Storistic: A tool to help children learn about emotions

This project became a very big one. So, I divided the app and the web into two. You can view all website screens on the second batch of pages. (The app is on the first batch, same link.)

Responsive website

I designed 3 sizes of screens for the responsive website: mobile, tablet and web. I started with the smallest size and made them prorpotionately larger.

The target group

App's target group is children of ages 6-10 with some kind of a developmental or neurological disorder. Neurotypical children who know how to read can also benefit from the app.

However, the website's target group is mainly the caregivers who want to learn more about the app, the specific conditions, the ways they can help and platforms they can get support.

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

"My daughter is having a hard time identifying emotions of others and her emotions as a response to them"

Tuğçe's mother;

38 years old
From an immigrant family, lives in a big city
Graduated from high school

GOALS

Help her daughter identify emotions in an practical way.
Help her daughter feel more confident in her relationships with friends, family and in general.

FRUSTRATIONS

There aren't enough apps, some are didactic.
Some apps are too complicated and she has cold feet.

My daughter is a happy, friendly child. But she has hard times identifying others' emotions and her own emotions when a response comes. 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.

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 and Google Chrome.

Before

I thought then bigger fonts meant more accessibility. However, it's obvious that I didn't do justice to the top and bottom navigations.

After

I learned about the relevant components, such as status bar and address bar. Top navigation and bottom navigation are better positioned now.

Before

Actually I designed responsive screens before the app. So, this is my first hi-fi tablet screen. The button and the fonts size are better than the mobile, though.

After

Everything has become a part of a design system. I designed every component with three sizes, and learned to follow Apple's and Google's rules.

Before

Web was the hardest one for me, because of the vast amount of space. And I didn't know how to fill it. So, everything is big and look like from '90's.

After

I learned about the current home page trends and tried to implement what I've learnt. Both navigations are better now.

Hi-fi prototype

Unlike the app's prototype, I kept website's prototype fairly simple. You can see it all within the image below. You can always visit the Figma link, though.

Dark mode

As I was creating components, I also created variants for the dark mode. I had a color scheme, so the transitions was very smooth, just like it was in the app.

Landscape modes

I designed landscape modes for mobile and tablet screens, mostly to try myself. I didn't need this mode for the app. But it was a must for smaller screens of the responsive website. (I don't have the dark mode for these screens. But it's a matter of minutes to create them.)

Sitemap

As I'm a digital UX writer with many years of experience, I'm very familiar with website content and blogs. This is the first sitemap I made for Storistic. I didn't make many changes after that. The focus is to provide enriching content for caregivers but not to overweigh the app.

Consistency among platforms

I was careful about the consistency between the app and the website, although the app is for children and the website is for caregivers. Here is an image from the Storistic app to compare.

Color scheme

Typography

Accessibility

I started with the idea of an inclusive social good app. Accessibility was always in my mind, regarding colors and fonts. I conducted some specific tests for contrast and color blindness.

Color blindness test

This helped me to see the colors from another perspective.

Color contrast test

This helped me to determine the colors for both light and dark modes.

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 am now better at understanding how to design for different devices. However, I am not as confident in tablet and web screens as I am in mobile screens. Designing for different screens is on the top of my list now.
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 app.

Page updated

Google Sites

Report abuse