des-fund-13311

[des-fund-13311]

Whilst designing my app I decided to research any more apps that could be seen as competition to mine.

Whilst I couldn’t find any local apps I realised that my biggest competition would be large scale ticket vendors such as Eventbrite, Ticketmaster and SeatGeek (only in the US).

However, I believe there is a market for my app as it focuses solely on the Greater Manchester area and would aim to provide tickets for all sports from Premier League football to University level cricket and anything inbetween. I would also have the map section and the favourites section be able to offer a personalised experience without the advertising emails from sites such as Ticketmaster.

I also think my interface is much simplerand would allow people travelling into Manchester from elsewhere e.g. Leeds, London or mainland Europe to see what is on offer in the city whenever they travelled down.

In the local travel apps I looked at they focused more on sights and landmarks as opposed to activities and events. Sport also has such a broad audience and Manchester is regardied as a very successful sport city that I feel my app could be sucessful.

[des-fund-13311]

This is one of the most common user journeys to be made on my app, purchasing a football ticket

[des-fund-13311]

Creation of my tickets and purchase screen.

My billing forms were taken from the build in XD wireframes and my QR code was generated from a QR code plugin

[des-fund-13311]

Map and Accounts page

[des-fund-13311]

Creation of my 2 search pages

[des-fund-13311]

Step by step of my home screen.

[des-fund-13311]

Step by step of creating my ticket and sports pages. I used text and the rectangle tool

[des-fund-13311]

Step by step creation of my login screens using my logo, text and the rectangle tool

[des-fund-13311]

For my logo, once I had changed from the community shield, I decided to make a trophy.

My original concept was a simple vector of a gold trophy with my app name engraved in the wood below, where a winners name would be placed.

I decided this was far too plain and didn’t show any relation to Manchester as I feel my logo should. To combat this I engraved my app name (the font for this was called Beauty and was not a font I originally considered) and the famous Manchester bee onto the trophy itself whilst adding Manchester to the bottom in place of the app name.

Once I had finished this I then decided my logo both looked flat and didn’t fit my new colour scheme. For this I changed the trophy to a silver and added some shading.

I was then much happier ith my logo as I thought it felt cleaner, higher quality and less like a flat image. I then tweaked the colours of the engraving slightly so it was clearer within my app and settled on that as a final logo.

I also feel that because of the placement of elements related to Manchester, my app and its branding could be changed to create apps for different regions. E.g. swap the bee for a white Yorkshire Rose and you’d have “City of Champions: Leeds” 

[des-fund-13311]

For making my basket ball icon i started by making an elipse with a large stroke to create the hoop. I then used the pen tool with a lighter stroke to make the net shape. I then added two rectangles for a backboard and used the line tool to create the net pattern. Once this was complete I grouped all the elements together to collect for export.

For my favourites icon I penned out a bookmark/ribbon shape and used the star tool to make a star. I then placed the star ontop of the ribbon and used the exlude function to create a transparent hole and a compound shape. This icon was then ready for export.

The restif my icons were made using similar techniques again with the pen, line, shape and pathfinder tools.

[des-fund-13311]

Testing my app

Upon testing my app in Adobe XD I feel that the user journey is efficient, simple and streamlined enoughh to be considered effective.

The style of my app is consistent throughout and I feel all the key parts are highlighted well.

[des-fund-13311]

The layout of my  app is very simple with my login/sign up screen, home, map, account and tickets/favourites.

All the pages for the 9 different sports are the same layout. The map and search results pages also offer similar functions.

Tickets and favourites have minor differences due to their functions overlapping slightly whilst being able to remain as separate pages.

The account settings page is the most different to anyother page accesed from the menu bar as it is the only page that doesnt show any events around Manchester.

I also have ppages for ticket purchasing, viewing and upcoming sports.

Most of the pages contain only black and white elements but i have used turquoise as an accent for any thing that needs subtly highlighting.

[des-fund-13311]

Once I started designing my app UI I realised I disliked my colour scheme and other design choices. I decided that my logo was far too plain and simple. To combat this I made my icon a silver trophy with my app name and the bee engraved on the trophy. I also added shading so it appeared more 3D and realistic.

I also realised I could use just one font in Comfortaa. It was similar to Cocomat  but a bit bolder and cleaner.

My colour scheme changed to Black/White/Grey with a bright turquoise accent. I also realised my app could be percieved as slightly complex and wanted to fix this by having everything streamlined and simple, achieved through literally presenting it in black and white.

I remade my menu icons at the bottom of my screen and also considered 2 different icons for ‘Map/Location’ and ‘Account/Settings’

I also made icons for the different sports on my app that were very minimal and clear of what they represented.

[des-fund-13311]

Before I could flesh out my app I aslo needed to consider a wireframe. Because my app focuses on finding sports events and purchasing the tickets for said events.my wireframe would consist of a home oage with all 9 sports categories on, a search for events, purchased tickets, favourite events and an accounts page. Each of the 9 sports would follow Home-> selected sport -> events list -> purchase ticket. The events search page follows a similar journey where instead of selecting a sport its from a search results page. Id also have a map page so people could see events close to them or just in relation to where they are in Manchester.

The tickets page allows users to see purchased tickets and keep them after events as people would with physical tickets. Saved events and favourites would show events similar to those purchased incase the user wants to go to siilar events and have a simple personalised experience.

The accounts page would allow users to change any settings to do with the app functionality and their account.

Once I had a tect wireframe I tried to mockup the user journey of a user purchasing a ticket. To do this I used Balsamiq and used the pre-designed elements as placeholders for what icons I’d have.

[des-fund-13311]

Before designing my app I had to consider my fonts, icons, colours and a logo.

For my fonts I was looking at easy to read sans-serif fonts. 2 fonts i settled on were Fundamental Brigade as it was bold and esy to read. The second font i chose was Cocomat. I really like this font as its round, easily legible and feels quite clean and modern.

For my colour scheme I wanted a simple scheme of black, white, gold, and blue with yellow and grey to add some accents. I feel this simple colour scheme will work quite well with the app being branded ‘City of Champions’.As the deep gold and blue can be used to add a prestigous feel to the app, much like the status attached to sporting trophies.

My icons on my menu bar will be simple icons of black and gold that will stay along the bottom of the screen.

For a logo I researched manchester travel apps and sports apps. The most common logos for these apps are simple icons or just a brand name with the word sports. My original logo was to look similar to a community shield with the different sports my app will host around it. I would then add the Manchester bee in the centre to emphasise that my app is targeted for the Manchester region. I decided this logo was far too detailed for its purpose so  I changed my idea slightly.

My second idea consisted of a simple trophy icon, again with the bee to emphasise the connection to Manchester. This icon was a lot simpler and a lot more effective. I was also able to use a feew colours from my general app colour scheme.

[des-fund-13311]

My original idea for a logo was similar to a community shield trophy with the Manchester bee in the middle and surrounded by shields of the sports I would feature on my app around the centrepiece.

Once the logo was made I realised it was maybe to complex for an app icon. It would possibly work as a menu interface however as an app interface it would need to be changed.

Other ideas I have had was the word ‘Sport’ with the bee in place of the O or written in the tripes/wings of the bee. I was also consiering making a simple vector of a trophy again with the Manchester bee engraved on the side.

In terms of naming for the app I’m deciding between either ‘Manchester Sport’ as this is simple and fits with the simple branding of other apps. 

I may also call the app ‘City of Champions’ based on the name towns are given for winning maor sporting compeitions such as the Premier League (which a Manchester based team has won recently). ‘City of Champions’ also makes Manchester sound important/prestigious and may have a positive influence on branding.  One downside I can see to this is that sporting rivalries with people from outside towns who are the target audience of the app may not be a fan of the branding inferring that Manchester is an elite city for sport.

[des-fund-13311]

For my app logo and branding I looked at both sports apps and Manchester based apps. For sports apps most icons feature a main brand logo and the word ‘sports’ underneath the logo. For the  Manchester apps the focus was on either the colour red, the letter M or a simple design of a significant place/the city skyline. I also found most travel/location related apps followed the same ideas.