Video Of Website Navigation
Please find above a video of my website prototype working.
During my user research I was suggested by a user to make the “festival” the first tab on the navigation bar which I did, and this makes it much easier for users to locate the main event/selling point (the festival). In addition to this, I also took the user suggestion of making the background a really light green as opposed to it just being white as originally decided, and I feel this makes the overall website/branding a lot more colourful and memorable.
In addition to this, I created a log in/ sign up screen for my website, which would allow users to easily create a profile, ask and answer questions on the FAQ page, as well as let others know how many trees the user currently has. This design is a responsive design because after signing up, the user receives a thank you message with fun confetti icons, and an image that they can liken to themselves.The user also receives a notification of a confirmation email to make them feel more secure that the sign-up process went as desired.
The UI colour scheme is identical to the App, however the layout of the website, although following similar rules, is different due to the location and shape of the navigation bar, whereas the app has a hamburger menu which can be expanded. I felt this feature kept true to the strong branding, whilst also being adaptable for PC layouts, and making use of the extra space.
People also were extremely keen on seeing as many images of Bonsai as they could on the website, so in addition to the gallery page, i added a small frame to the left hand of all pages except gallery page, which contains a small scrolling feature where people can scroll through bonsai images, and the heading also contains a link to the gallery page itself, therefore encouraging users to come and look at these pictures and get inspired; resulting in ticket sales.
Typographical Standards
Above are the Typographical standards for anyone who should need to create assets for the Tool Shed Bonsai Brand. Koulen was chosen for headings as it is bold, whilst still feeling modern and minimalist, due to this, all text is sans serif font. Lexend was used for body copy, and Lexend variants with larger spaces can be used for messages such as “basket is empty” or “username/ password”. I chose this font because it is easy to read, and rounded, making it easier on accessibility issues such as poor eyesight, which is common in the older male demographic which my product is designed for.
Card style has been used for images in the gallery, and all other images (e.g History page), to keep the website UI feeling soft and not overwhelming, especially to an audience who might struggle already with using technology.
Uses of colours include:
- Acid green for main features,
- Ivy green for highlight and font
- White for highlighted texts,
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] |