Problem Space There is a gap in the market for streaming services aimed at girls and women who like anime and manga. This is due to most anime being created to appeal to the male demographic, with sacrifices made to story and character development for fan service, and lewd portrayals of womanhood. It is evident that there is a large demographic of girls and women who enjoy manga and anime, and struggle to find a show that doesn’t have fan service, or isn’t catered towards the male demographic. Thus, the aim is to create an ‘companion app’ streaming service that is aimed at girls and women who like manga and anime. This is an issue that is deep rooted in the country of origin in which the art is from and most commonly produced (Japan); it is well known that Japan has an issue with the treatment of women, and in a statement by Human Rights Pulse: “Earlier this year, the creative chief of Tokyo’s Olympics, Hiroshi Sasaki, resigned after making comments body shaming Naomi Watanabe – a plus-sized entertainer – and describing her as an”Olympig “. Just one month earlier, the chair of the Japanese Olympic Committee was forced to step down following remarks he made, stating that women “talk too much,”. It can be seen that this attitude is indeed reflected in anime, as art imitates life: “Minister Hakuo Yanagisawa declared publicly that “women are child-bearing machines,” which continued to feed the popular stereotyping in Japan that the main contribution of women to society ought to be bearing and raising children.” This, and the demographic of “Otaku”, and the fan service catered towards them is creating an unrealistic expectation of women’s behaviour and bodies, that are simply just not true, and this is harmful to young girls growing up into womanhood, and especially in the anime community. Mission Statement “To create a space where women can enjoy anime without feeling like they are watching fetish content or fan service aimed at the male demographic. To try and take back the word “Otaku” and its negative connotations. Over the years “Otaku” has had a stigma attached to it due to it having a reputation of being favoured by sub- cultures such as “incel” culture, and that all anime is strange and sexualised. The app is an anime streaming service that aims at providing shoujo and josei anime and manga for girls and women. Abridged: A streaming service for girls and women, who want to watch anime with a genuine focus in storytelling, character building, music, romance and art. “A streaming service WITHOUT the fan service”, so women can feel more safe in the anime community. A blog post by Emma Sauer states her opinion, that as a long time anime watcher, the one thing she could never grow accustomed to was the fan service, and all the strange scenes that come with it; however she also states that it’s not dirty jokes, or sexy characters that are the problem, stating: “To clarify, I don’t have a problem with dirty jokes or sexy characters in anime–this is not the issue. Rather, what skeeves me out is when sexual harassment is played for laughs, or when the “sexy” character in question looks like a child. For example, take the first season of the Netflix original anime, Seven Deadly Sins. The main character constantly harasses another character by groping or looking up her skirt, while the other characters berate him for being a pervert. This is supposed to be a running gag. ” This is common in a lot of anime, and therefore my project will focus on UX/UI for an app designed for men and women who just want to watch beautiful animation, in a safe space. Figma Mood Board and Wire Frames User Flow Above is the user flow diagram for the Daisy App, which shows pages which can be accessed via the navigation bar, and pages which can be accessed via the hamburger menu, and their sub pages. User Research It can be observed that the following research does support the opinion that there is an issue with anime and fan service, and that there are women out there who would have use for an app like Daisy; However, there are some opinions from users that do not align with mine, however it would have been biased for me to have filtrated these so i have included all of the user research i got from Google Forms. As you can see, 66.7% of users admitted that they had stopped watching an anime because of uncomfortable fan service, which corresponds with the concepts behind the Daisy App, (creating a safe space where people can watch anime for its story). Here the responses where mixed which was interesting, with sometimes being most responded, which means that Daisy App would be for subjective purposes, e.g. , for those who feel they want to get away from fan service, as not all women dislike it. When asked if they would like to see more anime created from female mangaka authors manga, 12 of the users said yes, which means that there is definitely a gap in the market for more female artists work to become anime. Daisy would be a space for this. Here are responses in regards to the safety of being involved in the online anime “community”, and again, the opinions where mixed, and showed that some people don’t feel safe, whereas others do, and even one male replied saying he doesn’t feel safe, so it is really a subjective matter. Above is evidence that 75% of users agreed with the opinion that; in lots of anime, the female characters are sexualised/objectified for comic relief, or other purposes, and that they would prefer more story driven anime that focuses on character development, and music. Which is why Daisy would be a useful app for those who share this opinion, and want to break away from it to a safer space.… Continue reading User Research and Concept Ideation
Month: April 2024
Class Work
Practical Exercises
Website Mid-Fidelity Prototype
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 Mid-Fidelity Prototypes
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]
Figma Mood Board- Website
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]
Figma Mood Board-App
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]