Ideation and Sketches
I began with some ideation by creating mind maps of some ideas and the SDG’s.
I narrowed my ideas down to creating something to do with storytelling. I wanted to create an app that told a short story for each SDG that simplified it down to something a 10 year old would understand.
I would do this by including a character for each goal to help the child connect to the story, a real life example of the problem and also an activity the child could do to contribute to the goal.
I then done a few sketches of what a character might look like. I wanted to keep this simple as there would be 17 of them.
My idea was to create one character and use it as a base for the other 17, to save time and make sure they were all cohesive.
Character Design
This week, I dedicated my time to character designs for my SDG project. I utilised my earlier sketches and brought them into Figma, where I traced and refined them, since the sketches weren't flawless. I aimed for simplicity to suit the project's audience without diverting attention from the stories.
I used a base character and changed details such as skin colour, eye colour and hair style to create a range of characters. The colour of their hair, t-shirt and socks aligns with the SDG they are associated with from the original SDG’s on the United Nations website.
Sketches & Digital Development
This week we were given time for independent study. I used this time to create some sketches of my UI. For the home page I wanted a simple layout using cards to display the image of the character and the name of the story below. I experimented with a grid layout with 2/3 in each row and also tried listing them. In the end I decided to go with the 2 in each row grid as I felt this was the best for accessibility and looked the best visually.
When I took this to Figma I ran into a few problems as I had jumped straight into creating the UI without any branding. One of my lecturers had mentioned using one of the colours I had used to wireframe as a colour in my brand. I decided to go along with this, as it was a dark blue colour it worked well as this would help prevent fatigue and eye strain in kids. It was also visually appealing and didn’t clash with the colours of the characters. I used different shades of this to create the cards which made the character stand out. I will learn from this mistake and work on branding beforehand in the future.
When trying to find a layout for my stories I initially thought to have the illustration and text side by side and include a scroll feature instead of clicking through pages, however this would leave the illustrations and text quite small especially for a 10 year old target audience. I was given advice to try landscape for this section of my app. I sketched this out with the text and illustration side by side however this approach included clicking through the pages which I was fine with.
I took this to Figma to begin digital development. I created the first few screens of my first story and asked advice from one of my lecturers. They mentioned that having this section landscape and my home screen portrait caused a delay in the usability, which when I thought about it I agreed with them. I then went back to create some sketches for this to be portrait but avoiding small text and illustrations. I accomplished this my having the text being the main focus of the screen at the top with an illustration at the bottom, with the click feature to go to the next page. I then rejigged my previous screens to this layout and this removed the delay of having to rotate your phone to read a story.