App Prototype Video
Welcome/Landing Page
Upon reaching the app, a landing screen will initiate for first time users which will contain Tool Shed’s Mission and Problem statements to let users know what the organisation stands for/ their aims and goals. On Figma the animation requires clicking on the nav dots, however i wanted that to represent the user sliding the screen across with their finger as it will feel more tactile and responsive.
Main App
Please see above the screen recording video of my Figma Mid-Fidelity App Prototype functioning. I did want to adhere to Jakob’s Law as my main design principle
Jakob’s Law as described by Zorraquino: “Principle of usability described by Jakob Nielsen that recommends the use of familiar patterns in design in order to facilitate user experience, because users prefer it when a site works in the same way as all the other sites they already know.”
Though i did adhere to this principle, as the app has obvious usability features such as the left hand situated drop down “burger” menu, which is so often used in app and web design; most people are used to using this function, and therefore reducing accessibility issues such as not being able to use the app properly, due to poor construction of features.
However, upon finishing my prototype, the design adheres to Jakob’s Law, but also manages to incorporate a unique, aesthetic, and memorable UI that is still easy to use. This layout also creates hierarchy naturally due to it having an inclining banner shape which guides the eye downward and across. UX Design Institute describes the functionality of hierarchy: “Visual Hierarchy considers how individual elements are laid out on a page or screen. More important elements can be emphasised by placing them at the top of the page or screen”
The app contains figma animations such as scrolling for most pages, and scrolling for ease in the gallery. Each page links to each page via the navigation bar, and the bar items are organised in order of THA, to make sure users can find the main part of the site easily “Festival”, and are able to purchase tickets easily. In addition to this, the app contains a “my basket” feature, which was added due to competitor research, and in future, could allow for users to see the tickets they have purchased before checking out.
In addition to these features, there is the main differential of the app to the website, which is the ticket wallet function. This function will give users a digital QR code on their virtual ticket, which can be scanned upon entry to the festival. This feature is the main use of this app, as well as to purchase tickets.
Features that I did not incorporate due to complications, and difficulties to UX, include the drop down arrow features for each heading; this would have created too many subheadings and made navigation too complicated. Giving users more options can leave them frustrated and wanting to abandon the task, or close and delete the app entirely.
Some Working/In Progress Screen Shots Of UI
Home Page
Tickets Page In Progress
Harvard References
| DiveInDesign (2022). how to create interactive cart with Figma. design and prototype ( animation ) Video Available Online: https://www.youtube.com/watch?v=5eXXco1NsNA&ab_channel=DiveInDesign [Accessed 03/04/2024] |
| Expo Bonsai UK (N.D.) ExpoBonsai UK- Home. Available Online: https://expobonsaiuk.weebly.com/[Accessed: 25/03/2024] |
| E.Stevens (2022) 7 Fundamental UX Design Principles All Designers Should Know. Available Online: https://www.uxdesigninstitute.com/blog/ux-design-principles/ [Accessed 04/04/2023] |
| Federation of British Bonsai (N.D.) Federation of British Bonsai. Available Online: http://www.fobbsbonsai.co.uk/index.html [Accessed: 24/03/02024] |
| Itmagination (N.D.) The Importance Of Architecture (AI) In UX And UI Design. Available Online: https://www.itmagination.com/blog/the-importance-of-information-architecture-ia-in-ux-and-ui-design#:~:text=By%20keeping%20your%20information%20architecture,of%20a%20tool%20or%20service. [Accessed 04/04/2024] |
| J.Downs (2019) Card UI Designs: Fundamentals and Examples. Available Online: https://www.justinmind.com/ui-design/cards [Accessed 04/04/2024] |
| K.A. Aziz (2023) Overcoming The Paradox Of Choice In UI UX Design. Available Online: https://bootcamp.uxdesign.cc/overcoming-the-paradox-of-choice-in-ui-ux-design-how-to-simplify-user-experience-f80ffe0a0c6c [Accessed 04/04/2024] |
| The Bonsai Show Live (N.D.) The Bonsai Show Live-5th-6th. Available Online: https://www.thebonsaishowlive.co.uk/ [Accessed 24/03/2024] |
| Trophy Bonsaiassociation. (N.D.) Trophy Bonsaiassociation. Available Online:https://bonsaiassociation.be/trophy/ [Accessed: 24/03/2024] |
| Mid Herts Bonsai Club (N.D.) Galleries- Mid Herts Bonsai Club. Available Online:http://www.midhertsbonsaiclub.co.uk/galleries.html [Accessed 25/03/2024] |
| UK Bonsai Association (N.D.) Event Calendar- UK BONSAI EVENTS DIARY. Available online:https://www.ukbonsaiassoc.org/event-calendar.html [Accessed: 24/03/2024] |
| UX Planet. (2019) 98 Questions UX Designers Must Ask. Available Online: https://uxplanet.org/98-questions-ux-designers-must-ask-9b6984c6bd67 [Accessed: 18/032024] |
| Zorraquino (N.D.) Jakob’s Law/ Dictionary. Available Online:https://www.zorraquino.com/en/dictionary/ux/what-is-jakobs-law.html#:~:text=What%20is%20Jakob’s%20Law%3F,other%20sites%20they%20already%20know. [Accessed 06/04/2024] |