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.