Wheels & Wings

Individual Client Project.

Project Overview

For my first project of my final year, I undertook a client project for The Army Flying Museum, who wanted an app designed for their yearly day festival, called Wheels and Wings. However, after a few weeks into the semester, my client became my lecturer, due to unforseen circumstances with the initial client.

Project Brief

Wheels and Wings is a motoring and aviation day festival based at the Army Flying Museum in Middle Wallop, Hampshire. The client wanted an app designed for their guests to use at the festival, with elements such as key information, event schedule and access to a map. The app needs to be usable by everyone and suitable for all ages, due to the audience attracted to the style of event.

Research

Looking Into Current Event Apps

Before starting any design research and concepts, I wanted to look into any current event/festival apps that are already available on the app store. This will allow me to see what features these apps offer, and how I can implement any inspiration or ideas I get from these apps. While discovering what apps are on the market, I noticed that the majority revolve around giving users an app in which they can search for certain events or festivals, instead of an app based for one specific event.

Woov App

Woov is a free app where users can connect with others pre-event, and get equipped with the digital tools needed to streamline a music event or festival. With Woov, you can connect with friends going to a music event or festival, plan your event by making a personal timetable, find everything and anyone on the map, as well as stay in touch with your group. The app has been used by millions of fans and is spread over 40 countries. It is also partnered with over 1000 events across the globe. Woov currently has a 4.3 out of 5 rating on the Apple app store, but has frequent reviews mentioning that the app has a lot of bugs, and struggles to function without connectivity (App Store, 2021).

(App Store, 2021)

Reading Festival App

This is a free app based on the music festival in Reading, Berkshire. It offers the music line-up, latest announcements, special offers and secret sets. I chose to briefly look into this app because I myself have used it multiple times before, when attending the festival. I found it useful as it gave me a timetable of each day of all artists and which stage they are on. This feature helped us to stay organised and prepare us for the music that day. The app also functioned without wifi connection, which is important for an application like this because most festivals and events do not have much signal in the area of the event. It has a 3.9 out of 5 on the Apple app store, with the majority of 5 star reviews. A few criticisms include that the app has too many notifications, with one user complaining that they recieved over 100 notifications in one day. A few basic bugs were also reported and that it includes a lot of advertising.

(Festival Republic, 2015)

App Design Research

As this app needs to be used by all age ranges, it was important to make the app as user friendly and accessible as possible. To achieve this, I chose to design with a minimalistic approach to prevent confusion and miscommunicaton amoung users. So what is minimalist design? According to Diachenko (2020), minimalist design is a design concept guided by the 'less is more' principle. Minimalism in UX/UI design makes a mobile app simple and pleasant to use with a minimum of design elements. A minimal user interface has all the elements needed for users to get cognitive experience, but these elements are basic.

Example of a minimalist user interface, (Mansoor Creative, n.d.)

What benefits does minimal design bring?

Elements of Minimal Design

Unified Colour Schemes
Colours have a big impact on users' emotions. If an app has various bright or dark colours, it can make the user feel confused. If one colour is chosen, the interface may seem boring or unattractive. It is recommended to choose monochromatic or analogous colour schemes, to make the app visually appealing (Diachenko, 2020).

monochromatic colour schemes

Another way to make a design look minimalist is to use analogues colours. These are located next to each other shown in the wheel below. Each set of three colours consist of a dominant color, supporting colour and a third colour which is commonly a mix of the two previous colours. This concept works well for those wanting to stick to several colours while keeping the interface looking professional.

analogues colour wheel

Typography
Typography is a crucial aspect of minimalist design. It can have both a positive and negative impact on the user and app design. For example, using multiple fonts can be unpleasant and cause distractions. If fonts are chosen wisely, it can bring more attention to the screen. When choosing typography, it is best to follow common guidelines for either iOS or Android.

Apple, weight, size and leading values for each text style (Apple Developer Documentation, 2023)

White Space
White/negative space is blank space on an app's screen. The ideology behind white space is to let the app 'breathe' and to emphasise vital design elements. White space also improves readability, creates balance between elements, attracts the human eyes to what's different and implies sofistication (Diachenko, 2020).

Example of white space in app design, found on Dribbble.com (Rivaldi, n.d.)

Best Practices for Minimal Design

Gestalt Principles

Along with a minimalist design approach, I thought that it would be suitable to include the Gestalt Principles within the app design. The utilisation of these design principles will improve the overall asesthetic and user friendliness of the application. The Gestalt theory is based on the idea that the human brain will attempt to simplify or organise complex images or designs that consist of many elements. This is done by subconsiously arranging the parts into an organised system that creates a whole, rather than a series of elements (Chapman, n.d.).

Mobile Navigation

Once I understood the groundworks of minalistic app design, I went on to research into mobile navigation, and how I can implement the most user friendly navigation for the app. According to Budiu (2015), navigation and search come at a price. They occupy screen space and grab users' attention. If the screen is scarce, a search box or navigation links at the top of the screen can interfere with the users' ability to get new information quickly and may make the user work more. It is important to pay attention to the navigation and search when designing, so that they can be accessible and discoverable.

Overall, choosing the right mobile navigation pattern depends on the tasks users are likely to perform on the site. Each pattern has its downsides, and the key is to minimise the impact on users based on their likely activities.

A Brief Insight into Event Management

To finish off with my research, I thought it would be beneficial to look into event management as this will help me gain a deeper understanding into events and will give me more of an understanding of what goes on behind the scenes of Wheels and Wings.

What is Event Management?
It is the process of creating and maintaining an event. This process spans from the beginning of planning all the way to post-event strategising (Cvent, 2022). An event manager makes initial planning decisions such as time, location, and theme. Managers monitor the event in real time to ensure that everything runs successfully. Managers are entrusted with assessing event data, providing results, and keeping a watch on any post-event offerings following an event. A variety of planning go into event management, including types of sourcing, designing, regulation checks, and on-site management. In this field, you could be in the process of creating a conference, product launch or even a wedding.

Aspects of Event Management

Moodboard

Before starting the design phase, a moodboard was created to help gain inspiration and ideas for the overall interface and what elements could be included. Seeing these visual elements helped me to imagine what the app could look like and how I could implement these ideas into my own version.

Empathise

User Personas

After the initial research, I thought that it would be beneficial to generate user personas. This is because good personas help teams to understand and empathise with their users, by providing a clear picture of who they are and what they need. The process of creating personas also gives you a deep insight into the user's goals, behaviour and motivations, allowing you to create a more tailored app (O’Donoghue, 2023). To create user personas I decided to make use of ChatGPT, an artificial intelligence platform. This is a very efficient way of generating user personas as it only takes a couple of minutes, and I can always ask the tool to generate more information if needed. The tool generated me six user personas along with pain points, behaviours and attitudes.

These user personas were very helpful when it came to the design process because it felt as if I was designing for a more specifc user instead of an overall audience. Their app goals helped me the most as it helped me decide which features are the most important and how to make the app cater for all user ages and backgrounds.

Site Map

Once the user personas were completed, it was time to create a brief sitemap. A sitemap allows me to see what screens and how many are needed within the design concepts, and ensures me that I do not miss out any screens.

Low-Fidelity Wireframes

Next was to complete a range of low-fidelity wireframes. Although they are messy, the wireframes helped me quickly visualise what the screens will look like and how they will function. These wireframes also helped when it came to the high-fidelity prototype as they worked as a guide in what should be included when it came to high fidelity wireframing. Low-fidelity wireframes also briefly show my client the initial ideas and features and I can gain any feedback and add this to my next set of wireframes.

Branding

For this project, I did not need to design and create a set of brand guidelines for the app. The branding behind the event was previously completed by my client. However, I did need to choose typography for the app as this was within my brief. To find the most suitable typography, I completed brief research into which font will be best for this specific app that was following a minimalist interface. I found that the top six fonts for a minimalist app are Open Sans, Nunito Sans, DM sans, Inter, Libre Franklin and Playfair Display (Sparklin, 2023).

My chosen font is Nunito Sans which is a modern san serif typeface. I thought this font would work well within the app's interface because it is open, rounded and minimal, which fits in with the overall minimalist design. The typeface is easy on the eyes and is a fairly simple font, making it extremely user friendly which is vital for this app.

Brand Board

Brand Book

Once I created the brand board above, I also made a brand book which includes all of the relevant informtion about the branding, what to do with it and how we can utilise our ways of promotion and marketing.

First Set of Designs

When I first started the design process, I found it difficult to stick with the branding and vibrance of the app and brand. This is because the chosen colour palette was extremely out of my comfort zone. So with these first set of home screen options, I went with a more toned down aesthetic by lowering the opacity of the brand colours. I made a large range of home screens because I wanted to give my client options to choose from, and see a range of designs. However, I recieved feedback from my client regarding these designs, and it was noted that they needed to be more colourful and made sure that they reflect the brand image and chosen colours. It was also decided to stick with the plane svg because it reflects the brand and helps to make the screen stand out more and fit the colourful and exciting branding.

First Prototype

After completing these first designs, I thought that it would be best to create a brief prototype to show my client how these screens will work and animate.

Second Pair of Designs

I then designed another home screen and event schedule which I thought fit the overall brand image to a higher standard. I gained positive feedback on this pair of screens from my peers, however, it was noted that the elements on the homeapage were not noticeable enough and made my peers confused. This led me to making these elements stand out more in my next set of designs. For the event schedule, it was pointed out that the colours in this case were too bold to use in the square elements.

Final Design

For the splash screen, I wanted to keep it minimal with the main focus of an image from the previous Wallop Wheels & Wings event so that the app will entice the user from the moment they open it. I placed the logo in the centre of the screen so that our user's know what this app is focused on and introduces them to the event. With the home screen, I introduced the screen to the user with a 'welcome' to the event and then with the other app elements below. These elements also now have a blue border around them so that they are easy to access by everyone. I chose this layout so that the 'welcome' was the main focal point that the user will first see, and then they will scroll below to find what they are looking for. A search bar is also included for accessibility and practicality, so user's can search for anything about the event quickly.

The map is simple and functional, with user's being able to press on any of the areas of the map to recieve information about it, for example, clicking on the food icon will allow users to recieve a pop up of important food information. I wanted this screen to fit the minimal design aesthetic fairly well so that it is as user friendly as possible. For event information, I added three box elements to seperate out the information into the relevant sections. This is to prevent confusion among users and to ensure that they can find each section of information quickly and easily. I changed the opacity of the brand colours for this screen so that the text is easier to read and so that the plane elements could stand out more with their 100% opacity against the box elements. A relevant icon was also used in each box element to visually show what each box of information is based on.

With the event schedule, I changed the box elements so that they also had a coloured outline instead of a fill colour. This was chosen so that the schedule was easy to read and reflected the minimal aesthetic while also focussing on the brand image. Two larger versions of the plane svg were added to the background to stay with the app theme and relfect the brand's ideology of motor and aviation. The contact page was kept fairly simple with just the key information added. Having this screen as quite simple ensures that the user will be able to access the contact information easily, especially in case of any emergencies.

The gallery was added to show the user's images of the museums' previous events so that they can get a feel for what is coming on the day of the event. This gallery also gives the user the opportunity to add their own images of the event as the day goes on, therefore, everyone will be able to see everyones perspective of the day. For the donations page, I wanted this to be minimal and easy to navigate so that the user does not missuse this feature. The user will simply just need to press one of the three amount options or type in a suitable amount. It will then take them to a JustGiving page for the museum. For the final feature, it was suggested by my client to try and include a camera filter that the attendees can use throughout the day of the festival. This feature was left quite last minute to design, so the signature planes were used around the edge with the event logo.

User Testing

Before creating my final working prototpye with the finished screens, I did a quick session of user testing by allowing an individual to annotate my finished screens and to see where they would press the screens etc. Completing this brief usability test allowed me to polish my prototype and make it as user friendly as possible.

Final Prototype

For this recording, I had to record from the desktop version of Figma, as the mobile version was glitching repeatedly and would not let my prototype function properly. For the prototype, I used the same animations between each screen to secure fluidity throughout the app. I used gentle push animations so that the app would flow gently instead of sudden and sharp. I was able to learn how to create 'pop up' animations as well, shown within the map and donations screens which adds more interaction within the prototype. In the future, I would add more interactive animations to show the client even further how it would work.

Client Communication

Throughout this project, my client and I stayed on track with our project communication. Once every other week I would show my design progression and gain any suitable feedback or criticisms which helped me alter my work. I would email regularly with any design changes so that I could implement any further feedback as soon as possible. I also gave my client access to my Figma file so that they were able to have 24/7 access to my design progress. I recieved approval for my finished designs as well when my client and I had a Teams call during the last week of the semester. I was happy to recieve this positive feedback as this app has been challenging, and I am glad that the work has paid off and fits with the desired branding for my client.

Figma File

Project Management

To help with time and project management, I opted to create a Gantt chart which helped me keep on track with the tasks that I needed to do in order for submission. If I missed a deadline or one task took longer than expected, then I would calculate how much time left I had to complete all other tasks, and prioritise which ones to complete first.

Gantt Chart

I also utilised the tool called Notion which is an online platform for organisation, writing and studying. I used this tool to write daily lists on which tasks needed completing each day. I then had one overall list of each task of the project that needed to be completed for submission. Doing this allowed me to visually see all my tasks for the semester, and made it feel less daunting overall.

Notion Page

Sustainable Development Goal 12 & Sustainability

For this project, I had to try and implement the UN's sustainable development goal 12 into my project. My project contributes to this goal by reducing paper usage. My app replaces traditional paper-based event schedules and maps, reducing the need for printed materials. This aligns with SDG 12 by minimising resource consumption and promoting a more sustainable event practice. By providing event information, schedules and digital updates through the app, there will be less need for physical promotion materials that often end up as waste. This helps in minimising the environmental impact associated with traditional event marketing. The event can also possibly highlight sponsers and food vendors that promote sustainable practices. This encourages partnerships with businesses that share a commitment to responsible consumption and production. The links to sustainable development 12 clearly show the relation to sustainability within the app, such as reduced paper usage. Regarding ethical issues, the users' data will be protected when donating through the app. The donations will be completed through JustGiving, allowing for suitable data protection.

UN (2023)

Project Reflection

Overall, this was a challenging yet successful project to complete. As it was more out of my comfort zone regarding the branding, it helped me feel more comfortable and prepared when it comes to completing a project that does not reflect my usual aspired aesthetic. It showed me a deeper look into working with clients because not all will want light and airy designs which is my usual style. This project allowed me to further improve my UX and UI skills and confidence with user interface design, preparing me for life after university. I also improved my prototyping skills within Figma, giving me more confidence when it comes to prototyping my designs. However, I found it hard to stay motivated for this app because I was working by myself and I found it hard to create a design with branding that was extremelely bold.

If I were to do this project again, I would try to think of more innovative ways to make the app more fun and interactive so that it could fit the brand's tone of voice even further. I would also complete a more substantial amount of user testing so that I recieved a versatile range of feedback that I could use in my prototyping.

Handover Document

We were also required to create a handover document to give to our client, so that they are able to carry on with the project themselves.

Handover Document

References and Forms

App Store. (2021). ‎Woov - Your Festival Companion. [online] Available at: https://apps.apple.com/gb/app/woov-your-festival-companion/id1580044680?see-all=reviews [Accessed 13 Nov. 2023].

Apple Developer Documentation. (2023). Typography. [online] Available at: https://developer.apple.com/design/human-interface-guidelines/typography.

Budiu (2015). Basic Patterns for Mobile Navigation. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/mobile-navigation-patterns/.

Chapman, C. (n.d.). Exploring the Gestalt Principles of Design. [online] Toptal Design Blog. Available at: https://www.toptal.com/designers/ui/gestalt-principles-of-design#:~:text=The%20classic%20principles%20of%20the.

Cvent (2022). What is Event Management? | Cvent Blog. [online] www.cvent.com. Available at: https://www.cvent.com/uk/blog/events/what-event-management.

Diachenko (2020). What Are the Core Features of Minimalist App Design? [online] UGEM. Available at: https://ugem.design/blog/minimal-app-design.

Festival Republic (2015). Reading Festival. [online] App Store. Available at: https://apps.apple.com/gb/app/reading-festival/id1024718630 [Accessed 13 Nov. 2023].

Mansoor Creative (n.d.). Recipe App. [online] Dribbble. Available at: https://dribbble.com/shots/16560848-Recipe-App [Accessed 13 Nov. 2023].

O’Donoghue, J. (2023). UX Personas Pros and Cons: Pointless or Powerful? [online] Make:Iterate. Available at: https://makeiterate.com/ux-personas-pros-and-cons-pointless-or-powerful/.

Rivaldi (n.d.). Meditation App. [online] Dribbble. Available at: https://dribbble.com/shots/12482095-Meditation-App [Accessed 13 Nov. 2023].

Sparklin (2023). Top 6 UI fonts for minimalist interfaces in 2023. [online] Medium. Available at: https://sparklin.medium.com/top-6-ui-fonts-for-minimalist-interfaces-in-2023-22c72f7620c2.

Word Count: 3,687

NLT Form