UI Principles to be applied to the FlexFest Website and Companion App

Design Laws to be Applied to User Interface  One of the design laws chosen to be applied to the FlexFest website and app is Hicks Law, “The time it takes to make a decision increases with the number and complexity of choices.”(Yablonski, 2022). Therefore, the interface designed for the website and app will limit the number of complex options the user is faced with. This will avoid unnecessarily overwhelming the user and provide a simple, stress-free experience.  The second design law chosen to be applied to the FlexFest website and app is Jakobs law “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.” (Yablonski, 2022). Therefore, providing the user with a more memorable interface will reduce unnecessary time spent learning the interface and more time spent on the task at hand, such as purchasing tickets. This will lead to more sales and time spent browsing festival information, therefore attracting a larger audience and making more profit.  Call to Action  Call to action is utilised in user interface (UI) design that typically consists of buttons. These buttons are usually used as a selling strategy to make a profit, “Call to action is a set of marketing tactics consistently implemented in the interface design.” (Messaki, 2022). This is an efficient way of directing the user straight to the most critical page of a website/app, such as a ticket purchasing page. This is a practical action for the buyer and the company receiving the profit as it skips a lot of potentially time-consuming efforts. Call to action will be utilised throughout the FlexFest website and app to direct the users to the most relevant information, such as ticket purchasing, the event line-up and other significant activities. Usability Goals Applied to User Interface Design  There are five different user interface (UI) principles that must be applied to the website and app design to construct a memorable user experience. These principles include visibility, consistency, learnability, predictability and feedback. Applying visibility principles to the overall website and app design will ensure the user optimises the website to fulfil their overall goal. Moreover, for example, making sure that accessibility information is visualised within the app is essential for accommodating individuals’ requirements, ensuring they can see how and where they can achieve their goal. Consistency principles are crucial when using icons, menus and overall design patterns; these design patterns need to remain the same throughout the website and app to ensure the users can easily understand and relate to interface elements. Therefore, colours, menus, icons should all stay the same throughout the website and companion app. Learnability is an essential principle in which users can understand the interface without learning something new, as Jakob’s law suggests users only want to use familiar interfaces. Therefore, making sure the FlexFest website and app utilise a similar interface to other websites is essential. The predictability of the website and app design is vital when attracting more users. Predictability is valuable when users purchase tickets for the event; making sure they are familiar with the interface and what happens next will promote usage and prevent people from leaving the page prematurely because they can’t figure it out. Finally, providing the users with positive and negative feedback will help them navigate the website and app, giving regular prompts on how close they are to reaching their overall goal.  Stakeholder Interface Differences The overall user interface will be similar across the website and companion app; identifying and addressing concerns for opposing stakeholders will focus on the user experience. Ensuring all the user interface (UI) principles remain consistent between consumers.  The stakeholders differing user interface (Ui) will only be diversified through visibility and feedback. This ensures that the website and companion app are equally usable and accessible to a diverse range of people. References  Created Academy. 2022. The 5 Principles of User Interface Design | Created Academy. [online] Available at: <https://www.created.academy/resources/the-5-principles-of-user-interface-design/> [Accessed 10 March 2022]. Messaki, E., 2022. Call-to-Action. The Foundations of Efficiency. [online] Medium. Available at: <https://medium.com/outcrowd/call-to-action-the-foundations-of-efficiency-f8218fa8e344> [Accessed 10 March 2022]. Yablonski, J., 2022. Hick’s Law | Laws of UX. [online] Laws of UX. Available at: <https://lawsofux.com/hicks-law/> [Accessed 10 March 2022]. Yablonski, J., 2022. Jakob’s Law | Laws of UX. [online] Laws of UX. Available at: <https://lawsofux.com/jakobs-law/> [Accessed 10 March 2022].

UI Principles to be applied to the FlexFest Website and Companion App Read More »

Requirements Gathering and Analysis

Initial Festival Research The above screenshots are of initial research carried out on similar festival websites to gain insight into their target audience and usability goals as inspiration for FlexFest. Defining the Target Audience The primary target audience for FlexFest includes festival visitors and competitors. The secondary target audience includes event staff, artists, volunteers, media and policing staff. Both audiences will require slightly different festival information.  Defining the Stakeholders A stakeholder refers to anyone internally or externally involved in a development plan that can influence the direction of a project positively or negatively. The stakeholders involved in developing the FlexFest website and companion app are both external and internal and include but are not limited to individuals aged 18 and over, students, parents, event staff, artists and police officers.  Stakeholder Assumptions The internal stakeholders, including event staff, artists and police officers, will assume the website and app display correct and relevant information in the safest manner possible. Whilst promoting the event and selling tickets to gain profit and a good media presence.  The external stakeholders, including the people attending the festival and volunteers, will assume the website and app are safe, display the most relevant information, and share past reviews and experiences to gain knowledge of what to expect on the day of the event.  The Product Users Developing user personas aids in bringing the audience and stockholders to life, gaining relevant information such as what the stakeholders value as success and gaining insight into their core needs and aspirations for the website and companion app.  The user needs are clearly defined throughout the personas below and user journey maps. The core needs include purchasing tickets, finding accommodation and travel information, viewing line-ups, finding security precautions, and generally browsing the website. The users consider success to be a range of different things such as providing helpful accessibility features, communication services, live event information and quicker access to the event. These can be achieved by providing haptic feedback, AUI, VUI, contacts list, live video content and QR code systems.  Accessibility Concerns “An accessibility issue is any barrier that makes it difficult or impossible for a person with a disability to equally access, navigate, or engage with the content on your website.” (Navarro, 2022). The accessibility problem space encountered when analysing websites involves the lack of haptic feedback, AUI/VUI, text size alteration, zoom, colour contrast options, and overlays. A more accessible festival website and the app can be achieved by providing the users with multiple accessibility options; these could be displayed in a separate menu. The colours used throughout the website and app will be carefully considered and consistent with creating a more streamlined and helpful user experience. References Navarro, J., 2022. Top 10 most common accessibility issues to avoid. [online] Siteimprove. Available at: <https://siteimprove.com/en-us/blog/common-accessibility-issues/> [Accessed 10 March 2022].

Requirements Gathering and Analysis Read More »

Defining the UX for the FlexFest Website and Companion App

Festival Idea  FlexFest is a Sheffield based music festival showcasing some of the most significant UK established artists from genres including Pop, Grime, Dance and Electronic music. The festival will also offer new and upcoming artists a platform to showcase their musical talent and gain a wider audience. Moreover, other festival activities will include a variety of street food stalls and games such as total wipe out inflatables, mechanical bulls and arcade games.  Website Problem Space The problem space encountered when designing the website for FlexFest relies heavily on the user needs of the external stakeholders. This involves efficiently providing general up to date festival information such as where and how to purchase tickets, view the line-up, access travel and location information, accessibility services and security precautions in place without having to sift through old news. The solution opportunity for the problem space will be communicated through the design prototype and make finding the most relevant festival information easily accessible and stress-free, resulting in a larger audience and more festival profit.   Website Usability Goals  The usability goals for the FlexFest website consider the five principles required for solving problem space, including effectiveness, efficiency, utility, learnability, memorability and safety. How effective the website is at meeting the user needs depends on the utility of the interface, which refers to the functionality of the design. The FlexFest website will be made functional with the option to autofill information for a smoother transaction when purchasing tickets. There will also be accessible features for those who require them, such as haptic feedback and AUI/VUI. The learnability and efficiency of the website refer to how easy it is for the users to perform tasks the first time they use the interface, such as purchasing tickets for the event. This comes hand in hand with the memorability of the site. This is measured by how fast the user can pick up the website after not using it; universal design methods can increase the usability of these essential elements. Such as using globally familiar menus, buttons and icons. Safety protects the user from errors and how quickly they can recover from making a mistake, such as using incorrect autofill information for forms when purchasing tickets or pressing the wrong button when closing pop-ups.  App Problem Space  The problem space encountered when designing the companion app for FlexFestival is finding a solution to effectively compress the most relevant website information into a more streamlined, stress-free experience festivalgoers can utilise quickly on the day of the event. This will prevent the users from going back through the website to find relevant information.   App Usability Goals The usability goals for the FlexFest companion app also consider the five principles required for solving problem space. How effective the app meets the user’s needs depends on its functions as a compressed website version. The app mustn’t lose integrity; it needs to remain consistent with the website so that the user feels familiar with the interface. Therefore, utilising similar website elements, such as layouts and menus, will result in a positive user experience. Moreover, how learnable and effective the app is will depend on how quickly the user navigates the app and performs tasks during a busy event, such as locating their favourite artist intime. This will be achieved by providing a seamless experience displaying only relevant information.  Conclusion  The website and companion app differ slightly and address different challenges when solving the problem space. The website will display all information, news, photos and video content from current and past events. Whereas the app will be a more tailored and interactive experience for use on the day of the event. The app will show the most relevant information such as festival maps, ticket QR codes, safety information and location services.  Bibliography  Medium. 2022. Notes from an UX Consultation. [online] Available at: <https://medium.com/ux-uw/notes-from-an-ux-consultation-24285534015d#5a49> [Accessed 28 February 2022]. Nielsen Norman Group. 2022. Usability 101: Introduction to Usability. [online] Available at: <https://www.nngroup.com/articles/usability-101-introduction-to-usability/> [Accessed 28 February 2022]. Pastel, R., 2022. Usability | CS4760 & CS5760: Human-Computer Interactions & Usability. [online] Cs4760.csl.mtu.edu. Available at: <http://cs4760.csl.mtu.edu/2017/lectures/usability/> [Accessed 28 February 2022]. Quesenbery, W., 2022. What Does Usability Mean: Looking Beyond ‘Ease of Use’ – Whitney Interactive Design. [online] Wqusability.com. Available at: <https://www.wqusability.com/articles/more-than-ease-of-use.html> [Accessed 28 February 2022].

Defining the UX for the FlexFest Website and Companion App Read More »

Reference List

Aesthetica Short Film Festival. 2022. Aesthetica Short Film Festival. [online] Available at: <https://www.asff.co.uk/category/photography/> [Accessed 8 January 2022]. Anne, V., 2022. Fêtes de la musique 2008, joyeux succès ! – Bmol. [online] Bmol.bm-grenoble.fr. Available at: <https://bmol.bm-grenoble.fr/fetes-de-la-musique-2008-joyeux-succes/> [Accessed 8 January 2022]. Cottinghamspringboard.com. 2022. CONFIRMED ACTS 2022. [online] Available at: <http://www.cottinghamspringboard.com/confirmed-acts-2022> [Accessed 8 January 2022]. En.wikipedia.org. 2022. I Love New York – Wikipedia. [online] Available at: <https://en.wikipedia.org/wiki/I_Love_New_York> [Accessed 9 January 2022]. Hull.ac.uk. 2022. Homepage. [online] Available at: <https://www.hull.ac.uk/> [Accessed 8 January 2022]. Mcdonalds.com. 2022. McDonald’s UK – Burgers, Fries, Salads & More | McDonald’s UK. [online] Available at: <https://www.mcdonalds.com/gb/en-gb.html> [Accessed 8 January 2022]. Monty Verdi. 2022. McDonald’s Look & Feel — Monty Verdi. [online] Available at: <https://www.montyverdi.com/mcdonalds-look-feel> [Accessed 9 January 2022]. Pinterest. 2022. 280 Design ideas | fashion portfolio layout, fashion sketchbook inspiration, fashion design portfolio. [online] Available at: <https://www.pinterest.co.uk/adalton1202/design/punk-design-research/> [Accessed 8 January 2022]. Vectors, R. and Vectors, P., 2022. Retro line drawing of a pointing finger vector image on VectorStock. [online] VectorStock. Available at: <https://www.vectorstock.com/royalty-free-vector/retro-line-drawing-of-a-pointing-finger-vector-3273133> [Accessed 8 January 2022].

Reference List Read More »

Before and After (Honing Experiment)

The above photographs are a before and after of a honing experiment, to manipulate a photograph inspired by today’s beauty standards. Photoshop tools were used to smooth the skin and create a more airbrushed appearance to the image. The image was layered twice so that the changes looks more realistic with reduced opacity. The soft round pressure opacity and flow bush was used with reduced opacity in a colour matched tone to smooth the skin by running the bush over the face and creating dimension with the use of difference tones. The hair was manipulated with the same brush to appear lighter and show less ‘root’ regrowth to appear more ‘perfect’ in the eyes of the society. The spot healing tool was used to remove any imperfections on the skin. The blur tool was used to blend everything together in a subtle way.

Before and After (Honing Experiment) Read More »

Culture Jammed Anti Advertisement

The above anti advertisement references Extinction Rebellion and Veganism, the purpose of the redesigned advert is to promote the message of innocent animals being murdered for human consumption. The two variations send the same message and make use of the typeface Shlop which has a horror theme appearance, relating to the violence animals suffer before being slaughtered. The designs are an example of Culture Jamming and make use of existing company advertisements. References Mcdonalds.com. 2022. McDonald’s UK – Burgers, Fries, Salads & More | McDonald’s UK. [online] Available at: <https://www.mcdonalds.com/gb/en-gb.html> [Accessed 8 January 2022]. Monty Verdi. 2022. McDonald’s Look & Feel — Monty Verdi. [online] Available at: <https://www.montyverdi.com/mcdonalds-look-feel> [Accessed 9 January 2022].

Culture Jammed Anti Advertisement Read More »

Original Artwork (Developed from the Master Plan)

Thoughts and potential ideas have been taken from the master plan and converted and developed into design solutions using 2D graphic design. The first design idea taken from the master plan was merchandise. The designed merchandise consists of eight reusable tote bags, eight reusable cups and six reusable face masks, all designed with sustainability and brand promotion in mind. The designs created use the four main components in graphic design, including conceptual design, colour, typography and composition. The colours used for each product match the existing Rooted in hull colour pallet to make sure that the brand identity isn’t confused and runs seamlessly through all new and future developments. The typography used through each design is called Scarlet Wood and was chosen to represent natural resources, sustainability and the urban farming aspects of the organisation, such as food growth and eco-friendly practices. The composition has been carefully thought about when displaying printed designs on products. Making sure they’re striking and memorable, attracting the audience with catchy phrases relating to Rooted in Hull, promoting the organisation and attracting the consumption of sustainable everyday products earning profit for Rooted in Hull. Finally, the Rooted in Hull logo is displayed on each product to ensure that the organisation is recognised by the public and promoted. The second design idea taken from the master plan was a poster. The developed artwork is a promotional poster with the intent to upsell the above merchandise, which can be displayed around the site for potential customers and the community to refer to when shopping, learning or cooking at the urban farm. The poster consists of the same components as the above merchandise to keep with the Rooted in Hull brand identity and theme. The final design idea taken from the master plan consists of both a loyalty card and an app. The loyalty cards can be utilised as a physical card or as part of the app designed as an online shop/donations platform. The elements used all relate to the previous design solutions, keeping with the original brand identity. The colours used link seamlessly to the original Rooted in Hull colour pallet, creating relations to everything they have made in the past and promoting the earthly organisation through bright and attractive colours, relating to the help they provide to the community around them. The illustrations used throughout the app and loyalty cards have been taken from the merchandise to create new icons and stamps. The same typeface Scarlet Wood has been used to create smooth transitions between online and physical products. In conclusion, the three design solutions created all relate to each other and follow the same main principles to create a seamless and recognisable brand identity through typography, colour, composition and conceptual design. Furthermore, the design solutions have been developed to last forever, being reusable, either through merchandise or online platforms. Finally, the designs will promote Rooted in Hull, draw in new audiences, and help spread the word about the urban farm and the good they put into the community. Attracting new investors and donations. References Rooted In Hull. 2022. Rooted In Hull. [online] Available at: <https://www.rootedinhull.org.uk/> [Accessed 9 January 2022].

Original Artwork (Developed from the Master Plan) Read More »

Original Artwork (Developed from the Master Plan)

Rooted in Hull have announced the opening of a new pizza parlour and require the help of the BA (Hons) Graphic Design students with developing a logo for the organisation. The client brief stated that the logo had to include a variation of the Hammer and Sickle, including tools used for making pizza. The logo design includes a pizza cutter and a pizza shovel to exhibit the hammer and sickle; other elements include a potential pizza parlour name (Rebel Recipes) and stars resembling pepperoni pizza toppings to bring the design together. The logo uses colour, composition, and typography; the colours used are subtle but impactful in creating a sophisticated and realistic feel to the imagery. The central composition of the primary two elements of the logo create balance and structure for the rest of the logo to flow naturally and create a frame. Finally, the typeface used (Brother 1816 Printed) is bold and in black with rough edges to relate to the craft of pizza making. The flyer, designed as a promotional piece of work to share the news of the new pizza parlour, includes the above logo, typography and shapes. The complementary shades of orange used in the background make the logo stand out and become the piece’s focal point to create a recognisable image for future customers and the general public. The typeface used for the logo and location of the Pizza Parlor is Brother 1816 Printed. The typeface used for the promotional information on the flyer is Millesime; this is to help the critical information such as the location stand out from the rest of the information. The second logo and flyer are variations of the designs above. The colours used have been altered to the original Rooted in Hull colour scheme so that the pizza parlour sits well within the Rooted in Hull site. A small Rooted in Hull logo has also been placed at the bottom of the designs to tie together the organisations. The third logo design consists of a pizza cutter, flames and typography. The fire behind the pizza cutter represents the stone oven where the pizzas are cooked, whilst the pizza cutter relates to the craft and makes it clear to the audience that the logo is, in fact, for a pizza parlour. The colours make the logo pop and draw the readers eyes straight to the typography. The composition of the three elements makes the logo highly legible and easily recognisable. The simplistic design of the final flyer design is straight to the point and shows the essential information without being overcrowded and unreadable. The Rooted in Hull colours were used throughout the flyer to ensure that the pizza parlour relates to its roots. The colours compliment the centrepiece logo by drawing out the flames and creating dimension with the pizza cutter. The Rooted in Hull logo was also placed on the flyer to form connections between the two. The pizza boxes have been designed to include the above logos to promote the pizza parlour whilst being transported. The colours used throughout the pizza boxes are a mixture of Rooted in Hull’s primary colours and the pizza parlours logo colours; this creates definition and makes the pizza tools stand out. The Rooted in Hull logo was added to establish that the two organisations work together. References Rooted In Hull. 2022. Rooted In Hull. [online] Available at: <https://www.rootedinhull.org.uk/> [Accessed 9 January 2022].

Original Artwork (Developed from the Master Plan) Read More »

Rooted In Hull Graphic Standards

Organisations and company’s use graphic design manuals to communicate their brand identity to designers, this ensures the designers tailor their work to their clients standards so that everything sits in line with their brand. The screenshots below show the Hull branding manual as an example and initial research for inspiration for the Rooted in Hull graphics manual. The Hull branding manual shows good examples of simplistic design methods used to create new promotions for Hull. The pages below were a great inspiration when designing the Rooted in Hull Graphic Standards Manual. The contemporary layout makes for an attractive design, swaying away from the usual corporate graphic design manuals, which helps draw in the audience. The first page in the Rooted in Hull graphics standard manual is Typography; this page shows all the acceptable and unacceptable examples of typefaces that can be utilized for future Rooted in Hull branding. The layout of this page makes it easy to understand and simple to follow. The good typeface examples have a woody appearance, linking well to the overall theme of the urban farm, whilst the bad is bold and bulky, relating to a more manufactured feel. The second page in the Rooted in Hull graphics standard manual is Composition; this page shows the acceptable and unacceptable examples of layouts and Composition. The page shows how to place the Rooted in Hull logo on pieces of future work. The future designs should not be manipulated in a way that makes the overall design look squashed and out of place. The logo placement should be consistent throughout future plans, helping to emphasize brand identity. It also explains ways in which the logo, for example, would look out of place, guiding on the necessary placements for future design work. The third page in the Rooted in Hull graphics manual is Colour; this page shows acceptable and unacceptable examples of colourways. The acceptable colour choices are displayed on the left; these include Rooted in Hulls original brand identity colours with added shades for typography and design details. The page is easy to understand and displays the colours in a simplistic but creative way. The final page in the Rooted in Hull graphics manual is Photography; This shows acceptable and unacceptable examples of photographs. The correct photos are clear with good Composition. The images haven’t been edited heavily, which projects an honest and transparent message to the audience. The incorrect photographs are overly zoomed with bad Composition, creating a less professional outcome. The images are also overly-edited, losing quality and essential details of the definition required to bring the photo to life. In conclusion, the standards discussed above are easily understandable, making it easy for future designers to follow the branding guidelines, ensuring that the work sits well alongside the past projects. References Human Design. 2022. City Brand for Hull – Human Design. [online] Available at: <http://humandesign.co.uk/portfolio/city-branding-hull/> [Accessed 9 January 2022]. Rooted In Hull. 2022. Rooted In Hull. [online] Available at: <https://www.rootedinhull.org.uk/> [Accessed 9 January 2022].

Rooted In Hull Graphic Standards Read More »

Scroll to Top