Month: May 2024

This post will be following on from Task 3, the next phase was to create a tablet and website version of the King Gizzard and the Lizard Wizard (KGLW) app. My initial idea was to adapt the app User Interface (UI) to have a responsive layout when scaled up to tablet size. However, I struggled to understand various tutorials and instructions on completing this and decided the best way for me to move forward would be to create the tablet and website versions manually (please find the link to these here). For the tablet UI, it was a case of adjusting the app into a bigger screen size and ensuring the components still lead to the correct pages and worked in the same way. However, the desktop website required a different layout. When carrying out my original research I mainly focused on desktop websites, meaning I had already gathered plenty of information of what features bands websites include, along with the layout of these sites. The first step I took was to create a logo to include on the website UI. The logo was created using Shlop typeface and the red and black from the style guideline colour palette, this had a gore/horror vibe which matched the typeface used within the app. I then included yellow stars in the background to represent the yellow stars on a wizard’s cloak but expanded the stars points to make them look sharp and blade like to match the gothic feel of the typography and match the heavy metal rock genre of KGLW. This logo was placed in the top left side of the desktop screen and aligned with the layout grid’s margin. The next step was to adapt the navigation bar and pages from the app and tablet and create call to actions that are more suited to a desktop website. To do this I took the classic looking call to actions from the ‘Tix’ page of the app and made them wider, I then duplicated each button and removed the drop shadow from the top one. Next, a component set was created for each one and the action to show drop shadow when hovering was added. The menu options without drop shadows were then included in a separate component and this was the navigation bar for the website. The drop shadows are included when hovering to give a visual cue to users and help improve usability of the UI.  Lastly, the contents of the app were brought across to the desktop version and scaled to suit the screen size. References KGLW Net (2024) South America tour. Available online: https://kglw.net/tour/53 [Accessed 10/5/2024]. King Gizzard and the Lizard Wizard (2024) Home page. Available online: https://kinggizzardandthelizardwizard.com/ [Accessed 10/5/2024]. Spin (2022) U.S. residency tour. Available online: https://www.spin.com/2022/11/king-gizzard-and-the-lizard-wizard-2023-us-tour/ [Accessed 10/5/2024]. Imagery Lasky, B. (2019) Photo gallery: King gizzard & the lizard wizard, ORB, stonefield live in New Haven. Available online: https://vanyaland.com/2019/08/29/photo-gallery-king-gizzard-the-lizard-wizard-orb-stonefield-live-in-new-haven/8/ [Accessed 10/5/2024]. Parker, J. (2019) King gizzard & the lizard wizard in utrecht: Two nights of ultimate chaos with the tightest live band in the world. Available online: https://www.allthingsloud.com/king-gizzard-lizard-wizard-utrecht-two-nights-ultimate-chaos-tightest-live-band-world/ [Accessed 10/5/2024]. P(doom) Records (2024) King gizzard and the lizard wizard merchandise. Available online: https://eu.pdoomrecords.com/collections/all [Accessed 10/5/2024]. Pitchfork (2022) King Gizzard & the Lizard Wizard Announce 2023 Tour Dates and Concert Film Screenings. Available online: https://pitchfork.com/news/king-gizzard-and-the-lizard-wizard-announce-2023-tour-dates-and-concert-film-screenings/ [Accessed 10/5/2024]. Inspiration Squid Band (2024) Tour dates. Available online: https://www.squidband.uk/tour [Accessed 10/5/2024].

This post will be exploring the functionality of the User Interface (UI) of the King Gizzard and the Lizard Wizard (KGLW) app created using Figma. To start the high fidelity prototype (linked here) I duplicated the wireframe pages created in the previous post. I then created style guideline on Figma (using the mood board previously created) to ensure that the correct typography, colour, icons and grid layout were used on each page. For the main typeface I wanted to bring in a horror aesthetic to represent the heavy metal rock songs by KGLW, so used ‘Creepster’. The body typeface is a tidy sans serif font to give good readability for the user. The colour palette is from the mood board, the bright psychedelic colours and darker moody colours signifies again the heavy metal tracks by KGLW but also the psychedelic rock that they are more commonly known for. Once the style guideline was in place it was time to adapt the wireframes to become high fidelity functional UI’s. I started by creating a functioning navigation bar by using components and duplicating them onto each page of the application, I then ‘Fixed’ them in place to ensure they stay in place when scrolling occurs. I then incorporated the correct typography and colour schemes on to each page. The next step was to add cards, information and images into the pages, this was done using various methods. The bootlegger page is a simple vertical scroll, the previous tours page incorporates horizontal scrolls with components, the upcoming shows includes a vertical scroll with a tick box component and the releases page includes a bouncy accordion. Each page also includes a search bar component that opens out and includes a question to prompt the user and an option to open the account information page which includes accessibility options and a toggle switch for notifications. When the wording included was not made up using the KGLW terminology found during the research phase, the wording was taken from their current website, which is referenced below. References KGLW Net (2024) South America tour. Available online: https://kglw.net/tour/53 [Accessed 10/5/2024]. King Gizzard and the Lizard Wizard (2024) Home page. Available online: https://kinggizzardandthelizardwizard.com/ [Accessed 10/5/2024]. Spin (2022) U.S. residency tour. Available online: https://www.spin.com/2022/11/king-gizzard-and-the-lizard-wizard-2023-us-tour/ [Accessed 10/5/2024]. Imagery Lasky, B. (2019) Photo gallery: King gizzard & the lizard wizard, ORB, stonefield live in New Haven. Available online: https://vanyaland.com/2019/08/29/photo-gallery-king-gizzard-the-lizard-wizard-orb-stonefield-live-in-new-haven/8/ [Accessed 10/5/2024]. Parker, J. (2019) King gizzard & the lizard wizard in utrecht: Two nights of ultimate chaos with the tightest live band in the world. Available online: https://www.allthingsloud.com/king-gizzard-lizard-wizard-utrecht-two-nights-ultimate-chaos-tightest-live-band-world/ [Accessed 10/5/2024]. P(doom) Records (2024) King gizzard and the lizard wizard merchandise. Available online: https://eu.pdoomrecords.com/collections/all [Accessed 10/5/2024]. Pitchfork (2022) King Gizzard & the Lizard Wizard Announce 2023 Tour Dates and Concert Film Screenings. Available online: https://pitchfork.com/news/king-gizzard-and-the-lizard-wizard-announce-2023-tour-dates-and-concert-film-screenings/ [Accessed 10/5/2024]. Inspiration Squid Band (2024) Tour dates. Available online: https://www.squidband.uk/tour [Accessed 10/5/2024].

Similarly to the previous post, this blog post will continue to explore ideas for a companion app for the band, King Gizzard and the Lizard Wizard (KGLW), by introducing system maps and wireframes for the app whilst taking into consideration User Experience (UX) and User Interface (UI). The next stage of this project was to create a user flow chart, however, to complete a user flow chart, the key features needed to be organised. At this point the key features list was: The above list was combined with the 8-minute sketch from the previous post. Incorporating all features into a maximum of 8 pages helped ensure the app was not overcomplicated. When creating the new sketches I was mindful to highlight important features and non-essential features were less visible. Please see below the updated sketch: User Flow Chart A user flow chart shows the path a user will take when using an application (app). There are several reasons for creating a user flow map in the development stage, they share product aims, lower the risk of errors, and encourage user-centred design (Product Plan, 2024). Using Figjam I have created a user flow chart for the KGLW app (linked here), this user flow chart includes all the key features that were introduced in the ideation stage and shows all the possible user outcomes for the app. Wireframe The next step in the process was to create a wireframe/low fidelity prototype of the app. Wireframes help to ensure “focus is on the basic functionality” (Figma, 2024).  To create the wireframe, I used Figma and based the screens off the sketched ideas and the user flow chart. At this point there was not many design elements included, other then a few pops of colour which will be incorporated to the final design to assist users in knowing which page they are currently on, additionally a wizard hat has been added to the account icon to link to the bands name. The link to my Figma wireframe can be found here. The most important and useful features were included in the navigation bar, whilst other non-essential features were included within the pages. References Figma (2024) What is wireframing? Available online: https://www.figma.com/resource-library/what-is-wireframing/ [Accessed 9/5/2024]. Product Plan (2024) User flow. Available online: https://www.productplan.com/glossary/user-flow/#:~:text=A%20user%20flow%20is%20a,as%20few%20steps%20as%20possible. [Accessed 9/5/2024].

This blog post will be focusing on the design, research, and ideation phase for developing a companion app for a band, King Gizzard and the Lizard Wizard (KGLW). KGLW are a psychedelic rock band from Australia, they have a large catalogue of releases. This app will be created with a focus on the User Experience (UX) and the User Interface (UI). My initial thoughts on what should be included in an app for KGLW fans were based on both their current website and what I would like to see as a fan. These were then used to create a quick sketch of what each page may look like, please see below: To understand how KGLW communicate with their fans, I analysed their social media posts and website, and commonly used words were written down in the list below: Competitor Research Once the initial ideas were written, it was time to complete competitor research. Whilst there are not many (if any) apps for bands specifically, websites for various bands of a similar genre were viewed to evaluate what should be included and what users would want from the UI. The below common design features were highlighted and will be incorporated in the app to provide the best usability and improve the UX: Additional app features that were discovered by carrying out competitor research are as follows: Personas Historically psychedelic rock fans were young ‘hippies’, open to taking psychedelic substances and expressing themselves through activism, arts and protesting (Bell, 2023). In more recent years psychedelic rock has changed as a music genre but still appeals more to a creative, left leaning audience. Based on audience research, 6 personas were created using Figjam to represent users of the application. Figjam board with personas. Mood Boards Below is a mood board that consists of King Gizzard and the Lizard Wizard album artwork which is all created by Jason Galea. This mood board was created to get an idea of the current styles that KGLW are using. In the following link is an additional mood board created on Figjam of styles, colourways, and typography that I would like to incorporate in the app, along with reasoning for why each aspect is related to KGLW. Accessibility To ensure the app is user friendly for people with disabilities, conditions, or impairments, which are physical, cognitive, or sensory. There will be adjustable preferences within the settings of the app, these will include options to enlarge the text, adjust screen colours and text to speech options. Mission Statement A mission statement is a simple description that explains the purpose of a company or organisation. It assists designers in keeping focused on the aim of a project. When researching King Gizzard and the Lizard Wizard it quickly became clear that the terminology used by the band was very informal, meaning the mission statement for their app needed to be informal to be suitable for their target audience. The mission statement that has been developed is as follows: A mega app to let gizzheads know what’s going down in the gizzverse, find out what the boys are up to and share what you weirdo’s want from us next. References Bell, J. (2023) WTF is… psych rock? Available online: https://discover.ticketmaster.co.uk/music/wtf-is-psych-rock-58613/ [Accessed 9/5/2024]. King Gizzard and the Lizard Wizard (2024) Home page. Available online: https://kinggizzardandthelizardwizard.com/ [Accessed 18/4/2024]. Imagery Be Fonts (2021) Just bubble display font. Available online: https://befonts.com/just-bubble-display-font.html [Accessed 7/5/2024]. Chrome Web Store (2024) Psychedelic power. Available online: https://chromewebstore.google.com/detail/psychedelic-power/kmcoognglbpbhfmgpnanebpekagfbcin?pli=1 [Accessed 7/5/2024]. Divin (2024) Abstract hypnotic pattern with multi-colored striped lines. Available online: https://stock.adobe.com/search?k=psychedelic+pattern+black+and+white&asset_id=423955928 [Accessed 7/5/2024]. Easley, T. (2021) Wavy typeface. Available online: https://www.printmag.com/graphic-design/type-tuesday-catch-the-typographical-wave-with-wavy-typeface/ [Accessed 7/5/2024]. Failtotoro (2024) Doodle black bubble font collection vector image. Available online: https://www.vectorstock.com/royalty-free-vector/doodle-black-bubble-font-collection-vector-29106091 [Accessed 7/5/2024]. Galea, J. (2012-2024) King gizzard and the lizard wizard album artwork. Available online: https://kinggizzardandthelizardwizard.com/releases [Accessed 25/4/2024]. Galea, J. (2023) King gizzard and the lizard wizard live around the globe. Available online: https://www.sonicrendezvous.com/product/king-gizzard-the-lizard-wizard/live-around-the-globe-part-iii/564278 [Accessed 7/5/2024]. Kelli (2023) Kooky cloud. Available online: https://creativemarket.com/StudioFunshop/11012694-Kooky-Cloud%21-Unique-Bold-Bubble-Font [Accessed 7/5/2024]. Jung, E. & Marcin, R. (2009) True gore. Available online: https://fonts.adobe.com/fonts/true-gore#fonts-section [Accessed 7/5/2024]. Larabie, R. (2024) Shlop. Available online: https://fonts.adobe.com/fonts/shlop#fonts-section [Accessed 7/5/2024]. Moore, J. (2018) Zed the zombie. Available online: https://issuu.com/artfuly/docs/artfuly_magazine_issue_4.5/s/29563 [Accessed 7/5/2024]. Moore, J. (2023) Meaty Max. Available online: https://mulgatheartist.com.au/products/meaty-max-original-painting [Accessed 7/5/2024]. Rawpixel (2024) Layered editable text effect layour 3D typography. Available online: https://stock.adobe.com/templates/layered-editable-text-effect-layour-3d-typography/442162715 [Accessed 7/5/2024]. Softulka (2023) Nice wave font. Available online: https://www.behance.net/gallery/182428013/Nice-Wave-Font-fun-display-typeface?tracking_source=search_projects|wavy+font&l=24& [Accessed 7/5/2024]. Rossit, H. (1991) Red hot chili peppers, Nirvana, pearl jam. Available online: http://www.billboardlists.50webs.com/billboard-25-best-rock-posters-of-all-time.html [Accessed 7/5/2024]. Wilson, W. (1966) New generation, jaywalkers, the charlatans. Available online: http://www.billboardlists.50webs.com/billboard-25-best-rock-posters-of-all-time.html [Accessed 7/5/2024].