Blog Post 3: UI Prototyping for Mobile Application

Posted on

At the beginning stages of this process, I started by importing my mood board images as placeholders for my apps content. This worked well, with clear images and a fully functioning scrolling feature. My first problem came when creating certain titles and buttons for a selection of pages. I knew that I wanted to use ‘The Sims’ font for all typographical components of my app. After a little bit of research, I learnt this was Benton Sans (Jehnay, 2014), a font not accessible in Figma. In order to make this app as legitimate as possible, I ended up creating every single button in Photoshop, making sure to colour match them to my preexisting design, and then importing them as PNGs into Figma.

https://www.figma.com/proto/EZlINLlBlR4yomFob7AnUr/Sims-Companion-App?node-id=0-1&t=PhUequ778aLNzLpc-1

Embedded Figma File, showing my High Fidelity Prototype for my app and the link to the functioning prototype, as well as screen shots of each stage (including my Prototyping).

The next key issue I ran into was the sizing of certain interactive features and buttons. This issue arose during my peer feedback stage after creating my wire-frame. Certain users found that the buttons were too small or close together to work effectively. Thus the ‘FAT FINGER’ issue was born. The biggest victim to this was the ‘Packs’ pages, with the categories being inaccessible. I resolved this issue by maximizing anything and everything I could. Instead of a four-image layout, it became three, boxes became bigger, and I even expanded the footer navigational bar to create larger icons to make moving throughout pages easier, all vital to Fitt’s law (E. Stevens 2024).

From here, there wasn’t much left to adjust other than colour palette. I said goodbye to my harsh colour coordination, and welcomed a clean white approach, mimicked after ‘The Sims’ very own website (E. Arts, 2025). I made sure each and every bar was colour matched with the same palette of greens, be it #7EDB65, #51C132 or # 68C06F, all shades used in ‘The Sims’ symbol.

I also made sure to test each element at every stage, and rounded off the design by creating a sign in page at the beginning of my prototype to encourage an on-boarding component to my app. 

References

Visual References for Content & Art Inspiration