Category: UI/UX

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:  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]

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]

Competitor Research And Interesting Features One feature I noticed that was common on most Bonsai and Bonsai Festival Websites is that there was a list of market sellers that will be at the event. There is evidence to suggest that a lot of Users will be going to the Festival just for the Bonsai market, and so the user’s would like to see which vendors are going to be present.  In addition to this, it can also be noted that these websites had a section at the bottom of the home page showing their stakeholder logos, and so I had to consider this idea as it was very common, and an easy way for users to see which organisations are behind the event.  Menu and Count down bar Feature Consideration Another feature from these similar websites included having a creative UI/Menu, and a countdown bar to the next festival, which could make customer’s feel excited and more likely to buy tickets. Register a tree form composition/UX This is a register a tree form for a Bonsai website; something like this would be a very familiar layout/context for users and therefore will be easy to understand and fill out.  Here I was looking at UI design, and banner design, seeing what works and what doesn’t, and which ideas would make my website easy to use, without causing any stress of overwhelming Users.  I found this photo inside a banner to be a really clean design which I felt was simple and not distracting from the content via constant moving banners etc. Due to this, it can be seen that this style looks nice, while providing some context for users, and meeting accessibility needs for those who are neurodivergent due to it being static and minimalist. According to the UX Design Institute: “Accessibility is about ensuring your product or service is accessible to and usable for as many people as possible. It includes catering to the needs of people with disabilities, as well as understanding how different environments or situational factors might impact the user experience.” Trader’s Floorplan/Maps for Users User Research Users thought that the colours already present in the low fidelity wireframes were satisfactory and work well together, and so these colours will be continuing into the mid-fidelity prototypes, with the exception of changing the white background to a very light green, as suggested by a peer.  Some users felt that the tabs were appropriately ordered, but others felt that they weren’t and could be ordered better, suggesting that  “Maybe if the festival is the main part it could be the first tab, and you could put a very slightly green colour for background too instead of the white just to give it a bit more colour”  Due to this, the festival tab will be more prominent as the first tab, for IA, and hierarchy, and so that users can find the main event page the fastest, as that’s the aim of the website, to encourage interest and sales. Accessibility Re-considered Above are some accessibility concerns I came across whilst doing competitor research, and wanted to add them to the mood board so as to show which UX/UI I am avoiding for my demographic.  Have Users Needs Been Met? Upon re-considering user needs, it can be seen that a “market sellers” information section (on any page), is something users want to see, and I will incorporate it into my  prototype. Harvard References 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] 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]

App Research Updates To Nav Map Above is the App Navigation Map, however with changes to structure, to aid the app to be less complicated (Less options), and easier to use, as too many subheadings can be overwhelming and confusing for people, e.g. According to Medium:                 “When users are presented with too many options, they can become overwhelmed and indecisive. This can lead to them abandoning the task or making a poor decision.” Further Wireframes Ideas/Brainstorming Here are Low-Fid Wireframes that came early on in the process of reiterating the app designs, and considering how certain pages might function best, as well as playing around with ideas of responsive design (perhaps confirmation messages to put the users at ease after purchasing tickets) Re-visiting and re-thinking App Problem Space/ Customer Needs This is a mind map where I re-visited customer’s needs and wants. Rejected Secondary Functionality Ideas For App In the early stages of the project I had an idea to add secondary functionality of being a tree identification app, in order to draw in a larger and broader audience for the festival, however, upon realising the Website will most likely be the first landing page for people, rather than the App, i felt it would be an inefficient use of time. User Research For my user research I chose to ask my peers this time rather than ask people online who can be unhelpful due to unkind comments, so the demographic I asked is much smaller this time, however I considered all of the constructive criticism that was given to me for both website and app; E.g. Someone said that the UI would look better with a logo, of which I decided to add an icon on each screen to represent the Festival Logo. Another user also said that they enjoyed the colour schemes of my first low fidelity wireframes, and so I made the design decision to keep these green colours as people found them to work well together, and found the fonts easy to read.  I noticed mid way through my Figma prototypes that if my app was to have shop features such as the ability to purchase a ticket, then it would most likely need a cart icon, to take users to their cart, and so i decided to add this in as it would be crucial to the Users needs and wants. Card Style Images The design choice to use a card style UI for the Gallery page, and any other images, has been chosen due to their simplicity, clean appearance, and familiarity, as most people are used to seeing this card style design from popular websites such as Pinterest, and Instagram. According to Justmind: “Nowadays, we can safely say that cards have become a design staple across websites and mobile app UIs. And there are good reasons for it. Card UI designs are simple, intuitive and aesthetically pleasing.” This falls in line with the UX design law applied to this project which is ‘Jakob’s Law’, the ease of using something familiar.   Tab Order and Information Architecture Notes It can be seen that through IA, the Users can find what they need most, quickly, and so I did some notes on tab order before doing the prototypes. In addition to this Itmagination states that:  “By keeping your information architecture logical and consistent (across pages and sections and with use of page or section templates), you put users at ease and give them confidence” Harvard References 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] 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]