Category: Development Research Blog UX

Website Prototypes Above is the home/landing page for the website. I have chosen to categorise many headings as children categories so as to be able to have them be available when hovering over the parent heading e.g. ‘About Us’ Will then drop down to have the following ‘Stakeholders and Charities’, and so on and so forth for the other parent headings.  The gallery layout The ticket interface has been made less difficult by including drop down menus, in which the user can select which ticket they prefer, and then click the check out bottom in the bottom right. In the right middle is an advertisement to encourage ticket purchasers to download the app the access the ticket wallet feature.  Navigation Map App Low Fidelity Prototypes Above are Low Fidelity Figma Wireframes for the App; All UI uses the theme that got the highest percentage of votes from the user research. The following features have been selected and implemented through refinement of the rejected wireframes to collate the best features into one app.  It uses a simple theme of light and dark greens, on an off-white background so text is easy to read. In addition to this, extra vibrant greens were avoided so as to solve the accessibility issue of poor vision, without compromising on eye catching greens. HTA (After Log In and starting on home page)

App Rejected Wireframes This wireframe is a rejected design due to its messy and overwhelming layout, in addition to there being too many menu items. Features that do add usability to the UI include the user profile image which most people are used to seeing as the symbol for logging in or signing up. Here is a secondary app rejected design; this is due to the layout being harsh due to straight edges around the banner photographs. The goal is to create a UI that is simple and not intimidating to use for the older generation, which this does not achieve well.  Features that are memorable and useful include the scrolling dot buttons to show the user the slide they are on, as well as the welcome interface to add elements of fun.  In addition to this, the ticket wallet UI interface is treading the right line, but the subheadings are not specific enough and are confusingly titled.  Website Rejected Wireframes Above is a rejected wireframe for the website; it is rejected due to it being boring and lacking anything engaging. A keepable feature from this wireframe is the feedback widget tool which resides as a small clickable dot in the bottom right hand corner, and would allow users to give feedback on the website.  Above are my notes in which I used to write down all possible headings and subheadings for the website, and then order them numerically from least to most important in user interest, and what order the user will visit the pages. It contains the discarding of the previous heading system, and the formulations of regrouping contextually relevant headings together as further child pages. Above is the second rejected wireframe for the web UI; though it contains a large use of white space, which is the aim, there was not enough room at the top right hand corner for all of the headings to fit on there, even when reduced in number.  Usable features include white space, drop down headings/menus, and the tickets purchasing interface.

Design Laws Due to my target audience being mostly middle-older aged men, the interface should be simple, and easy to use, with a reliance on standardised UI design that is recognisable in functionality.  According to Open Replay on Jacob’s Law for UI,  “Users anticipate an interface to adhere to established conventions”“Users generally anticipate new interfaces to adhere to the same standards and patterns as other interfaces they are accustomed to.” The usability of both the website and the app should have an element of fun to it, to make the UX pleasant and memorable. [Image: Jakob’s Law. Batri, A. Medium.com] How Will My Design Acquire Feedback? [Krasovskaya, (2023) D. UX Tweak ] Stakeholders UI The stakeholder interface should be different from what users will see, as stakeholders will want to view certain data on website and app usage, in order to be able to pander to customer needs, such as what they feel is missing, and what they want to see, e.g media.  Call to Action 1.)Decide which menu items to add based off of user research 2.) Design the IA with a flow diagram to test how it works 3.)Get feedback on the IA and reiterate design 4.)Design wireframes for UI using design principles  Harvard References Batri, A. (2022) Jakobs Law for UX design. Available Online:https://arpit-batri.medium.com/jakobs-law-in-ux-design-dc88554a024b [Accessed 08/03/2024] Etegbeke, J (2023) Fundamentals of User Interface (UI) Design. [Blog post]  Available Online:https://blog.openreplay.com/fundamentals-of-ui-design/#:~:text=Principles%20of%20UI%20Design&text=Contrast%3A%20Creating%20visual%20contrast%20between,visually%20consistent%20and%20organized%20interface. [Accessed 08/032024] Krasovskaya, D. (2023) UX Tweak. User Feedback Examples. Available Online: https://www.uxtweak.com/user-feedback/examples/  [Accessed 08/03/2024]

User Personas User Research- Reddit I asked two Bonsai communities on Reddit: “What features would you wish to see in your user experience with a website/app for a Bonsai tree festival?”   All Usernames have been changed by me due to GDPR reasons. User Comment My Mum  Her response was that she would want to see a schedule for all the events and their dates and locations.  Reddit User: MountBonsai “I would want to see trees most of all!Not just a huge page full of tree pics, but something organised by species or maybe Bonsai class.Scheduling of events, ticketing, award winners, etc would also be great.” Reddit User: FunkyBonsai “Pics of treesA schedule of events (demonstrations, lectures, workshops, etc.) if anyPics of treesA way to sign up for events, if anyPics of treesA section on the art of Bonsai, history, general practices, etc.Pics of trees” Reddit User: WillowBonsai “You’ll need a booking, reservations and ticketing. A photo gallery of previous years exhibits. The winners and categories of previous years. I’d use a CMS to make life easy, lmk if you want another dev/de.” Reddit User RedBonsai “Progress pics of the same tree over the years are super interesting and helpful.” Reddit User GigaBonsai “Discussion boards and virtual workshops. I don’t know anything about Web design but that’s what I feel like this sub is missing.” A User suggested that the website should have a Bonsai History page where users can find out a little bit about the history of the art of Bonsai Trees. I think this can help solve the user problem space of “what?”, when it comes to Bonsai.  Forms and Statistics Analysis For the research of the companion app to the website I used Google Forms to create a questionnaire for my classmates to fill out; as well as posting it onto the Bonsai SubReddits on Reddit. As can be seen by the percentages above, that most popular choices for app functionality where:  It can be seen that 83% of Users agreed that Ticket Purchase, Schedule of Events, and About us and History, were the most sought after pages for user convenience and functionality. In addition to this, 75% of Users felt that they wanted a Ticket Wallet Feature, Home Page, and Bonsai Gallery for the Companion App.  Also, 66% of users chose the same preference for colour scheme for the App (Dark and Light Greens with Off-White Background), therefore going forward i think this is the best choice for the UI for the website AND the App to be as aesthetically pleasing to the customers as possible.  Harvard References L. Grenier (2022) How To Create A Simple, Accurate User Persona.  [Blog Post] HotJar. 18 August. Available Online: https://www.hotjar.com/blog/user-personas/  [Accessed 26/02/2024] Reddit (N.D) r/Bonsai Community. Available Online: https://www.reddit.com/r/bonsaicommunity/ [Accessed 08/03/2024] Reddit (N.D) r/Bonsai. Available online: https://www.reddit.com/r/Bonsai/ [Accessed 08/03/2024]

The Festival Summary The Tool Shed Is a  Bonsai festival which aims to raise awareness about the harmful effects of Global Warming and Deforestation, through a two night festival which allows for camping, and other festival events such as demonstrations, a market, competitions, taster sessions, star gazing, environment talks, and guided walks. Tool Shed aims to use this festival to help the global crisis of global warming by donating the profits of the festival to charities that work to protect the environment. Problem Space and Usability Goals  Based on my own user research,the demographic for this type of festival is predominantly males of an older generation, which means some may lack computer experience.  According to Educative, there are six main usability goals in interactive design:  [Image: Educative. Usability Goals] The Difference Between the Website and App The Website should work as an advertisement to navigate Users to download the App, and purchase tickets to the event, as well as introducing the topic, and solving user questions, such as what the User can expect from the event. The App should feel like a security item in which to store the tickets, and to hold all the information you might need at the Festival, in the convenience of a pocket or a handbag. Harvard References Alvan, A. (N.D) What are usability goals in interactive design? Available online: https://www.educative.io/answers/what-are-usability-goals-in-interactive-design [Accessed 07/03/2024]