Week 9: Rapid ideation session 2 (pt 2)

29th July 2021

---

Genius app prototype image created by Lehang Tieu. 2021.

Continuing from the rapid ideation session two, I have created a budgeting app that allows users to track and budget their finances and set up goals to save for something specific.

I researched competitors to view their offerings and interface design. The Mint app offers a bill payment tracker, budgeting feature, free credit score and investments. I liked their minimal interface design and use of icons and progress bars to show the budgeting categories. It inspired me to implement visual metrics in my designs.

Image by Mint

Paper prototype

I used the user journey as a reference to draw my paper prototypes. It was helpful to see a high-level overview of the user experience which made designing the prototypes quicker.

When thinking about the design, my visions stem from competitor apps and inspiration from Behance. I approached the design ideas inspired by the user's needs. The user interviews have helped me get an insight into their everyday routines and lifestyle. For example, the budgeting categories incorporated in the design are based on the user's responses. The layouts and structure were not tested with real users however I have used the information I have gathered to create relevant designs suitable for them. I am excited to learn the User Research module to know the best approaches that have been tested and verified.

Paper prototype image created by Lehang Tieu. 2021.

Brand

I created a simple logo design, colours and font styles for my Genius app. I chose complementary colours (green and blue) and Museo Sans Rounded font because it is soft and playful to balance it with a serious money-saving app concept.

Lieven et al (2015) research on the brand design on gender perceptions examines the choice of fonts, colours, brand name and logo shape to be perceived as having masculine and feminine associations. It is not logical or ethical to restrict colours and designs to be more feminine or masculine. The research shows lighter colours increase brand femininity perceptions and darker colours increase brand masculine perceptions. I have chosen a mix of light and dark colours. I am interested in doing user research in this area to understand brand perception better.

Genius brand image created by Lehang Tieu. 2021.

Wireframe

I developed my sketches into wireframes in Figma. It took a few days to get the digital design because there were so many frames to create. I found many Youtube videos and tutorials on the Figma website to be incredibly useful. I implemented: frame transitions, interactive slider, horizontal and vertical scrolling and delayed popups. It was challenging but with practice and trial and error I was able to create a functioning prototype. There are still more advanced animations and interactions I would like to explore and with time and practice, I hope to become an expert user with Figma.

I am particularly interested in becoming a UI Designer and one of the key responsibilities is creating prototypes using programs such as Figma and Adobe XD. I have been using Figma at work to design digital mockups and wireframes of web design and it has been beneficial to apply my learning to my professional career.

I tested my prototype in play mode and went through the frames and features that were missing. For example, an edit icon or a back button. It was helpful to see the prototype in live-action to add and improve the designs along the way. I did struggle with a couple of things using Figma. The status bar on some of the frames was not displaying in preview mode. I tried deleting and repasting it and researching some forums but I could not find a solution. Due to the time constraint, I was unable to solve this issue.

Luckily with Figma, I can use the undo function to reverse any mistakes I made. I also referred to the automatic version control to revert to a previous version. It has been a lifesaver because it has saved me time in redoing work.

Prototype

Genius app prototype video created by Lehang Tieu. 2021.

Summary

Reflecting on my second rapid ideation session, I made better use of my time by giving more effort to work on the wireframe prototype. I am proud that I applied interactivity in my app and improved significantly compared to my first rapid ideation. Furthermore, learning about user research and creating an interview and user journey has helped me understand my users better.

Some of the assumptions I have uncovered involve the brand colours I have used. I used two colours that were complementary and aesthetically appealing when used together as a gradient. I assumed that these colours were appropriate from an accessibility perspective. I implemented white text on dark coloured backgrounds and dark text on light backgrounds. However, I have not done any user testing on this. I would like to apply user research on the use of colours and accessibility issues in my future projects and consider users that are colour-blind.

Looking back, I only had time to carry out interviews but I would like to conduct a survey or observations to have a thorough understanding of my target audience to have sufficient quantitative and qualitative research. It will help me create better user interfaces and experiences to progress my journey to become a UI Designer.

I enjoyed showcasing my prototype to my peers and tutors in the webinar this week. They were supportive, and my peers gave great feedback on my designs. They thought the concept worked well and that my choice of the colour palette was refreshing. One of my peers has asked if there was a pay function to allow users to make payments. I thought this was a great idea and something relevant in technology today. Due to the time constraint, I was unable to get more constructive feedback to improve my prototype. Perhaps I can share my prototype with others to provide me feedback in their own time.

References

Lieven, T., Grohmann, B., Herrmann, A., Landwehr, J.R., Tilburg, M.V. 2015. ‘The Effect of Brand Design on Brand Gender Perceptions and Brand Preference’. European journal of marketing 49(1/2), 146–69.

Images

2021. Bills and subscriptions. [image] Available at: <https://mint.intuit.com/how-mint-works/bills> [Accessed 29 July 2021].

2021. August budget. [image] Available at: <https://mint.intuit.com/how-mint-works/budgets> [Accessed 29 July 2021].

2021. Expenses. [image] Available at: <https://mint.intuit.com/how-mint-works/budgets> [Accessed 29 July 2021].

2020. Netflix logo. [image] Available at: <https://toppng.com/netflix-logo-icon-PNG-free-PNG-Images_471555> [Accessed 25 July 2021].

2021. Spotify logo. [image] Available at: <https://1000logos.net/spotify-logo/> [Accessed 25 July 2021].

2018. The Guardian logo. [image] Available at: <https://xenzone.com/kooth-featured-in-the-guardian/guardian-logo-kooth/> [Accessed 25 July 2021].

2021. Mindful chef logo. [image] Available at: <https://raggededge.com/work/mindful-chef-branding/> [Accessed 25 July 2021].

2020. The United Kingdom flag. [image] Available at: <https://www.britannica.com/topic/flag-of-the-United-Kingdom> [Accessed 25 July 2021].