Author: pepper2023

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