Let's start from the very beginning…
I’ve not really done this before, not from scratch… my very own app, designed by me, made by me, It’s all quite intimidating but I'm going to work in small, manageable chunks.. that’s what I’ve told myself, so, let's do it together and see what I can turn out and we can hopefully learn a few handy bits along the way.
I will post this blog in sessions for smaller reads too...again, small, manageable chunks.
The Brief –
To create an app for children to track their chores and mark as complete to get their rewards, controlled by parents. Target audience – Young people between the ages of 7 – 15 years old. This app will be used initially by my 2 boys aged 8 & 13 (Sid & Sam)
Chapter 1 - Planning
I have been told Figma is a fantastic tool for planning and sharing ideas, Since I work with my brother-in-law creating these apps, lets create a big ‘live’ whiteboard type layout that he can peek in on and see the progress I am making along with my thought process (my thought process can be quite erratic)
I start as many do – choose the perfect soundtrack to work to. Today I need to ground myself and take this step by step so I’ve gone for a YouTube Zelda Ambience soundtrack. This seems unimportant but I’ve found that it can make a huge difference to the pace and quality of my work in the past.
I grab some paper, sticky notes and pens and get to work brainstorming. I make a ‘HMW’ or ‘How Might We’ list – I got this idea from A J &Styles YouTube, this is a list of all the bits you might want to think about solving, for example, how might we display how the chores have been completed? I use the sticky notes to make a wireframe/flow of screens – I’ve found this better than drawing straight onto the page as I can swap the sticky note screens around, replace them and more often than not, chuck them away and re-create them. This allows me to think about what I want on each page, in what order and to think very briefly about the design. The design below WILL change as I cross bridges later in the process no doubt.
I opened 2 Figma pages - The sharing ‘FigJam’ whiteboard and a ‘new design file’ so I can mock up pages on a design file and then screenshot them and pop them on the whiteboard for Adam (my bro in law) to see.
In the design file, I make sure to name it and choose the applicable frame. For this project I have chosen a small android frame as this will work universally across the target household. I crack on placing grey boxes where I would like buttons or images and label parts of the pages accordingly.
Next I screenshot each page and pop them on the whiteboard, I share the whiteboard with Adam so he can see my thought process. A really helpful element of Figma is that you can leave comments, sticky notes & images/stamps on the board. The stamps are a really simple way of communicating how you feel about certain elements of the design and you can stamp hearts on certain parts you like & vote on colour palettes etc. Great if you work within a team!
I make sure to annotate my works not only to update Adam but to keep things fresh in my mind also, rather than have pages and pages of scribbles to keep track of. I also make it clear where a viewer needs to go next to see my thought process with the use of the stamped images (eyes & arrows) and by numbering the areas which you will see on the screenshots.
Once I have created a very basic flow/wireframe design I am ready to start beefing it out with some design ideas, looking at theming, small animations, icons etc.
I have begun to think about a retro gaming theme with achievements to be unlocked and gold coins to be made! I look online for inspiration; I often look on Pinterest but today I came across flaticon.com where I found lots of cool little icons that I posted onto the whiteboard to portray aesthetic. I would like to think up a name for the app and an icon that will reflect the style of the overall app so I can carry this design throughout.
Next session – Lets look at the Main theme/Icon... I’m thinking retro gaming neon sign style.