Busra Yildiz

I really enjoyed the Applying Applitute project as I never created a smartphone app on XD before which was a really good experience  I found it easy working on XD because it was easy layering things on the frames and mainly focused on shapes and text. Before working on XD I did in-depth research on different kinds of apps related to the idea I had in my mind which was about travelers and travelling. This concept is not so developed in the app market as most apps now focus on social media networking such as Instagram and Twitter etc. I found a lot of apps about travelling but mainly they were focused on travel guides for tourists and the designs seemed out of date. I also found few apps which weren’t related to the traveling but I still included them in my research because I liked the contemporary style and use of font and colour in most of them. I had the aesthetics planned in my head but I wasn’t sure on layouts of each sections. After the research and mind maps I started to work on XD and I believed this helped me because actually designing also helps the decision making process as you can see what works and what doesn’t so you can change some layouts and ideas you had originally. Once I created few frames I started to focus on logos and icons so it would stat looks complete. For the logo, I had a long process trying to decide the name. I thought about some names which combined both travelling and finding friends but they seemed too cliche. I decided go with Solo, the word solo represents exactly what my app was about and it was short  and recognisable which is an essential part of branding. I designed some logos focusing on the context of the app and experimented with different symbols to combine typography and imagery. I found logo designers that I really liked and they influenced my logo designs significantly. The logo process did take time however I really enjoyed making all logo because the name gave different ideas and it was very broad. Once I was set on the logo, I carried on working through each section of the app, designed as a go along but also added features which I knew I wanted from the start. I created simple icons for each section of the app such as profile, saved messages, solo cycle etc. I believe the layout suits the context of the app as I think it is simple and clean, there isn’t big imagery or bold fonts that take over the page. However, the clean look and simplistic layout suits the purpose of the app and also helps the users use the app easily. I chose fonts and colour scheme considering both context, the target audience. I’m really happy with the overall layout, I believe I created an app that users would find it easy to use but also interest and enjoy while using it.

 

I was really happy with the feedback I received from David. I understand the areas I need to improve as seen on the feedback sheet. I had a tutorial with David where he clearly stated areas I could improve such as the pace of the editorial design which was something I wasn’t sure myself. He suggested to change the second page design and create something similar I designed in the development stage and decided not to use as I thought it didn’t fit in with the overall design. In addition, I also have to improve on justified text too tight and rivers. To fix this problem I would need to play with the gutter and type size. Also, I need to add bleed and link one of my messages one was missing. All these small areas can be fixed.

To start off I created new designs using the first template of the second page I made in the development stage which was the white background with large print on the top right corner . I developed this idea more by creating 3 different variations experimenting positioning and body copy layouts.

This is the first design created using the screen printed imagery. I chose to use the print on white background to create the strong contrast between the back ground and the imagery. The imagery covers the first page and also layers over to the second page which removes the feeling of two separate pages. I chose to use a large size call out places diagonally next to the right of the print to also help hierarchy on the page but also creates stronger dynamic on the page. The body copy layout is simple with justified text in two blocks. I added a short call out on the middle right of the last paragraph to break the heavy text. I like this layout because the text is more dynamic compared with other versions however I believe the size of the image should be bigger.

The second variation focuses more on the bod copy layout and placing call outs around the body copy.  I liked the layout on text in this design because it is easy to follow for the reader and there is a break through two paragraphs with a short call out. I think I want to use this body copy layout in the last version and try making the print size bigger.

This is the final version and the design that I will be using in the final editorial design. I believe this changes the pace in the design significantly creating more dynamic layout and feel to the article. The imagery size is big enough to cover both pages which stands out the most in all 3 pages. The body copy layout is simple in two blocks focusing on a small call out between paragraphs but not perfectly in centre to break the structure. The big call out placed diagonally to the imagery also fits perfectly to the page more like creating a bridge between a large imagery and small structured texts. Combining other variations together I believe this design would suit the rest of the editorials creating a contemporary editorial design which the article in the best way.

I also worked on the other areas such as text too tight and river I worked on it by decreasing the gutter to 4mm which was 5mm originally. In addition, the point size is now 9 rather than 10 I believe this helped the tight text. In addition, I added 3mm bleed mark on each spread and also increased the margin to 13mm. Also, I added the missing image.

Overall I am really happy with the outcome and I improved the areas on the feedback sheet.

EDITORIAL MOCK UPS

 

 

 

 

 

 

 

 

 

These are the photographs I took in the studio contextualising the editorials spreads for my portfolio. The photographs show clearly the details of the imagery and the complete look of the binded spreads. I trued to take photographs which gave the feelings of a magazine and not so flat so the viewer can see how it could look inside a magazine. There are over the head shots focusing on areas on the page but also close up shots into imagery to draw the attention to them. With the studio lights the pages look bright and vibrant each element on the page stands out and overall looks really good on the portfolio and completes the project.

This slideshow requires JavaScript.

Today we had to present our power point to a small group of peers with Theo. I think my presentation went well I was able to explain the key points on each slide. Theo gave us 3 minutes to present our work which should include the app video so I think it wasn’t enough time to cover everything on the power point but from the feedback Theo was very positive about my presentation. He said that my project looked like a finished and well thought project and I explained ideation and some elements of the app such as the profile very well. Theo also suggested I should create advertising posters to go with my app.

In the first slide we had to cover target audience and the process we went through identifying target audience for our app. The concept of travelling is always thought to be a young generation concept, which this does make sense as most people go travelling either before going into university or after they graduate before going into work. So I thought the target audience for my app should be age group from 18- 25. However, this is only for age. The research shows the number of travelers older than age 30 showed the biggest percentage increase from 2007, rising from 10% of the market to 17%, while younger travelers, aged 23 to 30, have seen a decrease of a similar percentage. It means older people are traveling more which this would mean my target audience should also broaden out as my aim is just travelers.  To balance this in my app I had to create a contemporary app layout which can be easily used by a 23 year old but also a 40 year old. For this, I had to chose a fonts which are sans serif which has the informal style but also can be read easily and gives a relaxed, playful feelings which suits the concept. 

THE USER TESTING

Few weeks ago we had a workshop with Theo where he explained the importance of user testing. User testing involves thinking about different types of users fro all different backgrounds, technological experience, age, work, occupation etc. We were told to create 3 different types of users to test whether they would be able to use the app efficiently. This test would allow me to see whether I need to change any areas in the app such as the size of icons, or size of text for readability, or the navigation system whether it is functional different types of users.

The user profile I had for my app was 3 different types of people. First one was a young person which chose to travel over university and their first time going abroad so my app will enable them to meet people on the way and experience it together with someone. The age was 20 and they were very confident with technology. Therefore, for this user I believe my app os very useful. This is because the colour scheme is bright and energetic, it would keep the users interest in the app. As it’s an app to meet new people younger people are always interested in apps  similar to mine. In addition, the navigation is easy to use, the hamburger menu allows the users to see all different features of the app in one section. There are feature such as solo cycle which is an activity for users to meet more people and the app can be used for more than connecting with new people. The second user I thought was someone mid age 25, after university chose to travel for a year and not so confident with making friends but wants to get out of their comfort zone. They’re not so confident with technology but have used apps such as Instagram, Twitter before. For this user, I believe my app is also easy to use, as they’re not a very confident person and first time travelling alone I think the app is perfect for users like this. As people can message people who they think are similar to them and seem more friendly.Also, in terms of usability of the app there are short steps to each sections it isn’t complicated going from profiles to solo cycle or to friends list.  The third user was 42, been traveling for 5 years always on road and has used many other apps similar to Solo and knows a lot about traveling. I think the user would be satisfied with the features and functionality of the app 

I also created advertising mock ups as Theo suggested to complete the project. I created these mocks up on Photoshop using Iphone X mock ups online.

The first mock up is showing the launch screen on Iphone X mock up and the sign up screen to introduce the users to the app. I used Iphone X mock ups online and created them on Photoshop using images of each layer. The centered phones on the screen is the main focus and I didn’t add text to not draw attention away from the design. The orange background creates a professional outcome. I chose to use back ground to complete the overall essence as an identity of the app. I used the logo in the corner smaller size to again keep the focus on the mock ups in the centre. The logo stands out on the background so it’s a good hierarchy between two elements on the page. This is a simple clean poster which fits well with my overall design aesthetic.

The second poster focuses on more screen of the app using variety of phones isometrically layered on the screen. I really like the layout of each phone the user can clearly see each screen and overall outlook of the app. Also, I used orange background to complete with the other design, I tried black background as well but I feel this version looks much better. These posters will be able to give user some insight of the app before downloading, maybe I could add a small slogan or text so there isn’t too much empty space but I do like the way it looks.

This is the last mock up and I focused on contextualising the app rather than using flat mock ups. The mock up focuses on a hand holding a phone with the main feed of the app. This design I didn’t add a logo or text because I believe there is a lot going on the back ground and I wanted to keep the main focus on the image in the centre. I believe these mock ups will look really good on my portfolio with the recording of my app to complete the whole project.

 

 

 

 

Reference

https://www.freepik.com/free-psd/iphone-mock-up-design_1101782.htm

https://www.behance.net/gallery/54400759/CITY-CONSTRUCTIONS-MOBILE-APP-AND-POSTERS?tracking_source=search%257CApp%2Bposters

https://www.behance.net/gallery/76024721/UIUXInteraction-Design-for-Social-Praying-Mobile-App?tracking_source=search%257Cmobile%2Bapp

 

Once I created the profile frames for the user I started to focus on the messaging sections which is the key part of the app. The way this works is the user can see other active users around the location and can select to view more about the user. When they tap the profile photo it takes them to their profile. In this profile sections, I focused on similar layout as the original profile layouts. The layout is clean and readable as I had a look at few other profile designs from other apps such as Bubble, Instagram, Twitter. They are seem to have focused on the functionality and the minimal design.

Above you can see the final layout for each profile. The design is very simple, I chose to have the gallery on the top with their profile photos which is similar to Tinder, you can scroll through their photos. I added some shadows to the images so it’s not very flat, then placed the name of the user and age above and the location below the name to top left. I didn’t use the round style in those profiles because I think every frame looked very similar so I chose to use sharp corner. I used Proxima Bold for the name/age and Proxima medium for the location. For 1 profile you can see 3 screens that’s the each screen created to make the scrolling possible. I linked all of them to each other so the user can slide left and go through the gallery. I had to edit type detailing as David’s feedback suggested. On the bottom right corner I placed the button ‘send a message’ to convince the user to message the person using Dunbar Low as the font is bold and stands out on the screen. The button has a gradient of dark orange to light orange to add some texture.

When the user clicks on send a message it takes them to messaging section you can see below. This layout I chose to use the profile photo in the top centre with the name under neath the photo. The text boxes and 2 icons are both designed by my on Illustrator. I chose to use them orange to help the consistency. The the icons are inside a small circle and there’s a 3 dots on the top right. That feature slides up to another section of either saving messages. adding to friend list and report. I added the report section to help the security and ethical issues of the app. The slide up section is designed and linked by auto animate tool on Prototype. When you select either one you can see a small icon on the screen to let you know it’s saved and it dissolves from the screen. All these 6 frames are linked together smoothly. Small details such as shadow below the profile to create more 3D effect to also help the layout.

Speaking to David for some feedback he suggested that the messaging screen should be orange to help break the white orange theme as orange background on white text would make the frames stand out and also help the pace. I used Proxima Nova as the font is for text. The user can easily go back to main profile using the back arrow on the top left corner.

I think the adding colour has really improved the overall look of the frames making everything in your face. This also made other features stand out such as the profile photo above and creates a clear line between conversation.

PROTOTYPE

This is the final frames of messaging section.

The next section of the app I worked on was the other parts of the hamburger menu. These consisted of Privacy, Settings, Saved Messages, Friend list. All these sections are important part of the app to work smoothly and also features which make the user to create more personal account. The ‘saved messages’ shows the history of conversation the user had with someone, this builds the connection and acts more like an archive. The friends list is where the user can add a user to their list and message them whenever they like rather then waiting to be in the same location.

I chose to keep the layout minimal and elegant. The friends list you can see profile photos and their name which you tap on the photo it takes you back to their profile screen. I used Dunbar Low in bold top centre of the screen, creating a section with a straight line across the screen. There is also a search bar for the more user uses the app the friends list would grow and search bar enables the user to find the person quickly.

The final feature I added on was the Solocycle, this feature was something I thought about before as it saw few other apps such as city mapper. A feature for users to book an activity, or apps such as Klook show popular events around your area for music, theatre and allows the users to book tickets for those events. I knew my app needed a feature like that to make the user have something else to do other than meeting new people. When the users meet new people they would want to do something together so an event or an activity seemed the best feature. Speaking to David he mentioned about a cycling activity for users to read about in the app. Rather than just giving information about activities I added features to actually book and pay for the activity. I created Solocycle which is an activity focused on travelers, an hour session cycling session in the mornin with a tour guide, the activity takes you to the popular and historical destinations in the location. The layout of the frame is very easy to use, first it gives you information about what the activity is and what you need to do to attend. The second part is the meet up point which users need to be there at the set time and then the available dates and times. These date/times and also meet up point changes according to the location. Once the user selected between dates, a ‘book’ button appear on the screen. Once they click on the button the apple pay frame slides up. Loads of people have apple pay in today’s society especially for travelers it would be easier and quicker than tying card numbers manually.

The layout is very easy to follow focusing on the image first half of the screen. I chose to keep it round edges as I did with other sections. The image is from PhotoSplash from XD plugin. The Solo cycle icon is on the hamburger menu so it’s easily accessible for new users. The icon is created by me which represents the cycling symbol. The I chose to use Proxima Nova regular for text body under the image. The meet up point is under the small information paragraph. Overall, the font is Proxima Nova regular and bold for headers. The user can see the available sessions placed below the meet up point. This section is also simple with white box to highlight the dates. I added shadows to make them stand out from the rest of the parts. All the tex is aligned left to help the user read and follow easier.  When the user selects a date the ‘book’ button appears, the gradient is same as other ones when they click on the ‘book’ the apple pay screen slides up which is an overlay on each frame. When the transaction goes through the user is sent to another page which it says that it’s all booked and includes the date/ time and meet up point. I was also going to do a section on the menu for user to check all their bookings but I thought there’s only one activity so I decided to have the ‘check email for confirmation’ so they can show that when they’re at the meet up point.

By adding a feature like Solo cycle this makes the users have more interaction with the app more than just talking to other people. I think features like this really make the app stand out compared to other competitors with similar context.

THE FULL APP

 

I started the design the first few frames on the XD focusing on placing of each element so I used shapes as outlines of where I want to place the logo etc.  The first few pages consist of the launch screen which has a large logo of the app and which dissolves into the screen which shows the log in and sign up buttons. These frames were designed few weeks before I decided on the name of my app so they’re like the draft and I wanted to decide on whether to use orange as the background or white. The two frames I used white as text and orange #FF8A17 on the background because it’s a warm toned  orange which isn’t bold and bright it creates a good contrast with white text. However. I used orange in a lighter tone with shadows to create the buttons but this made the buttons harder to see on the screen and blended in with the background. The launch screen starts off with the logo in the top which at the start I thought I could have a small illustration with the logo to compliment the screen but then I decided to stick with just the logo. The sign up and log in frames I think are simple and centered on the screen filling up which makes it easier to follow for the user.

 

 

 

 

 

 

The font I used was Dunbar Low for headers and Proxima Nova for the text. I think these both go well together as Dunbar Low is thick and bold which is appropriate for a header to stand out and Proxima Nova is commonly use din many app designs it’s a sans seri font easily to read and blends well with Dunbar Low. However, the font choice could change during the design process. I created few more frames with the same style  and I realised I want to use white background instead of orange. The reason for this is because white enhances the elements on the screen, making it easy for user to follow the page and most apps with a lot of content on each screen chose to use white background because it could look over crowded with the text and images. My app will be heavy on images due to the profile sections and main feed for this reason I decided to use white as the background and use colour on text and buttons.

Launch Screen

I had few ideas about the launch screen as one of them was to keep it simple with a dark background and white logo in the centre of the page and it dissolves into the frame of log in or sign up. This would create a good blend into the app not having interaction with the user. It’s also a common feature in most contemporary apps and XD allows you to easily create this feature on prototype section. The other idea was to use an image which is blended in the background colour, an image which shows the context of the app showing a traveler. The tone of the image would be warm colour such as yellow and orange to create a consistency once it dissolves into the second frame.

The 3 colours on the left are the colours I used creating the launch pages. The first one is the darker orange colour #FF6A13, the second one is  #FF7F00 lighter shade of orange I thought this would be really nice for a shade for a gradient. The last colour is #FF8A17 the  light shade of orange which I used in the first few draft frames earlier. I don’t think I will use it as the main colour as it isn’t bright as I like it to be, I could use it for gradients in buttons and some text which I don’t want to draw much attention too.Using the three colours I created variations for launch screen. The first one which has an image and white logo at the top is probably my favourite. It creates a really nice blend with the overall colour scheme on the app and it works well with the white logo. My first initial plan was to actually create a blend with the white background and place the logo at the top but in the darker orange colour. Also the size of the logo is not too big because it isn’t too much on the screen to look crowded with the image but it compliments the image.  However, I couldn’t get it to work for ages and then I tried filling the whole screen and I really liked the outcome. I think this way it makes a difference and everything would seem to be orange which could effect the pace. It would start to bore the user. The other version was a solid background in#FF6A13, which is bold dark orange shade with white logo. This does make it stand out but it looks very flat. The last one I thought a gradient would look nice as the other version with colour was very flat. To create the gradient I used #FF6A13 and #FF8A17. I like the way it looks as it adds a detail to the screen enhancing the logo in the centre. The logo covers most of the space on the screen making it the main focus.  Looking at all these 3 variations the first one is the one I want to use in the design as it looks clean and simple way to introduce the users to the app. Using a photograph breaks the use of only solid colours which could make the app come seems dull and less interesting.

These are the other 3 variations using an image on the launch screen. I found these images Plugins/PhotoSplash on XD. PhotoSplash is very useful tool it has variety of images depending on the key word you enter. The 3 variations I chose have different colour tones. Originally I was going to use the third image but I realised everything is would be orange and other shades I had to add a different colour to make it stand out. I asked some of my peers for there opinion they suggested the first design goes really well with the context of the app, the image is really bright and works fine with the white logo placed top centre. It would be good transition in the app from green to orange. However, other people suggested the third launch screen goes better with the aesthetic of the app and consistency. I decide to use the original launch screen because I want to have a strong aesthetic throughout my app, I also like the placing of image and logo complement each other building a strong visual for the user.

The final first 4 frames look like this. A very simple approach focusing on simplicity and clean layout. The launch page dissolves in to the home screen to where users can either sign up or log in. The sign up section is in bold with a round circle button to create a hierarchy. There is a pattern of rounded edge for buttons because I tried more square buttons but I think they aren’t are smooth and they create a harsh break on the screen. The round buttons create a smooth blend and I think they go well with the sans serif font. Also, my log is also round they isn’t any harsh edges so I think overall everything element on the screen works well and fits together for consistency. The sign up and log in screens both very similar for consistency. placing each section in the centered and I didn’t use section to add a photo because creating a profile page comes later on. For the font I used Dunbar Low for both text and buttons. There is a colour gradient on buttons because at first it was just solid colour of dark orange but then I thought it was too flat and gradient for buttons is used in many other apps to add colour to the layout I chose to use a lighter tone of orange rather than a different colour. There are small less than symbol as icon to go back on both sign up and log in which take you back to the home screen. I created the small icon using round lines to fit the logo and other elements on the screen.

This section for sign up users to create an account, I was originally going to place a map on the screen however I decided to keep it simple and add a search bar where user can type in there location select and move to creating a profile. The first screen is like an introduction to the app, it has a bold orange background colour with white text and white logo. It was originally white on orange but I wanted to break the theme because it could become boring and it needed a in your face screen which is a different style. The small paragraph focuses on the purpose of the app and then with the small icon placed on bottom right you move on to location. I think it was a simple but effective pages needed to users to spend few seconds reading something rather than keep tapping to move onto to the next page. The Location screen is made up of 4 screens all linked together by auto animate. The header ‘where are?” was originally “Where abouts are you?” which speaking to David and thinking about it it sounded too informal so I changed it to ‘where are you?’.

CREATE A PROFILE

Once you selected the location you press the icon at the bottom right and it takes you to create a profile section. This is for new users to create a profile that’s personal to me which has features such as adding a profile picture, a small section to write interesting things about themselves, favourite things to do when travelling and etc.

The 4 frames are all linked together by auto animate on Prototype. The second frame slides up into the screen where you can select to either import from camera or take a photo. This section shows importing a photo from album. I used Twitter as influence on this section they use a simple slide up album. The layout of the this section is very similar to other parts of the app. The centered position of each section with round text circles. The font is mixture of Dunbar Low Bold and Proxima Nova Bold for headers. I think the layout is easy to use, there is heavy use of circles but I think it creates consistency. This section includes the user to enter their birthday as well which is an important part of the app. When user filled in all sections they can see the button at the bottom right which takes them to the main feed.

The video above shows the final frames from Launch screen to the ‘feed’ for a new user. I like the frames on each section, I added more interaction in the app such as adding the location, selecting a profile for photo from your album etc. I made small changes in some frames such as the profile page I didn’t like the mixture of black and orange it didn’t blend together so I used orange as the man colour for round text boxes and headings, lighter shade black for text inside the boxes. I think this version the layout is stronger in terms of layout with everything centered on the screen enables the user to focus better and colours blend nicely. Once the user creates a profile by writing a small biography about things they enjoy while travelling, or interesting things about themselves then they go through to the ‘main feed’. As earlier they selected the location the main, the feed will allow them to see other active users around their location.

The video above shows the ‘feed’ after you create your profile. This section starts off with a small paragraph again introducing the user to the app, they can take few seconds to read it and then click on skip to start using the app. The feed is the main home screen where you can navigate back to and from. The feed allows users to see which users are active around their location and allows them to message them. The design of the feed is simple but practical. It has 3 elements, the first is the hamburger menu on the top left which allows the user to explore the other features of the app and also go to there profile. The second is the main feed is big images of users including their name and location. Then the last section is the inbox, this section allows the user to see if they have a message and it’s easy access they don’t  need to click several buttons to go to inbox. The feed layout is very straight forward and easy to understand. All the users are shown with a big profile photo in a round shape to fit the overall, name and their location. If the user wants to find out more about them they tap the profile photo and it takes to that persons profile. I chose to use a hamburger menu rather than bottom navigation. This is because I think it would be easier for the user to hamburger menu where it has all the features. It helps the functionality of the app. Speaking to Theo about whether it’s a good decision to use a hamburger menu he suggested if the user can easily go back to the menu and it doesn’t take many clicks then it should work fine. So I tested out the menu several times and every feature easily goes back to menu without many clicks.

When you click the 3 lines on the top left corner on the home screen the  hamburger menu slides right and you can see the other features in the app. I used XD transition action slide right as the animation. This tool is really useful as you can choose the seconds and it has other features such as overlay which is also a very useful action when prototyping the app. The hamburger allows the user to first of all see their profile photo and name on the top to creates more personal interaction for the user. Below the profile photo the user can visit their profile, saved messages with other travelers, friends list, privacy and settings. All the features either enable user to create more personal account such as friends list and saved messages or change settings or edit their profile. The icons on the menu some are designed by me except the Solo cycle icon I found them on flaticon website and changed the colour on to fit the app.

PROFILE

The aesthetic layout design also can be seen on the profile frame designs. I had some inspiration from Instagram and other social media apps. The top left you can see a profile photo with the name and location to the left side of the image. This layout breaks the centered layout from other frames which can be good in the app. The font I used for header/name is Dunbar Low and for location it’s Proxima Nova. Then there is a section of Gallery. This feature I added later on in the design process. I struggled on the profile design so I had a look at other UI designs for some inspiration. I could see that my profile layout seemed empty, there was a too much white space so I had to add a feature or change the layout completely. I thought I could add a gallery for the user as it’s a travel app and most travelers take photographs of countries they visit so if they can add them on the app this would make the profile seem more personal and also for other users as it would be interesting. The gallery photos doesn’t have to be photographs of views, it can be you or with friends. This feature is similar like Tinder, the app allows you to have many profile photos. This also helped the layout because it looks more on the screen and more interaction for users.

The ‘About’ section is what the user wrote about themselves with birthday and location. All this is inside a white circle with shadowing to create more 3D effect and hierarchy. I think the design is visually interesting. It’s easy to follow and simple layout system.

The profile layouts above are were designed for profiles of other users and I was finding it hard to choose the one to use in all profiles. They are very similar and have same features such as the profile photo as the round and placed either on top right or top left on the screen. As I said earlier I was influenced by Instagram mainly with this design. However, I struggled with the layout for the biography. In some designs like the 2 screens on the right, I used am orange border to highlight the biography. The designs above were created before the gallery decision so later on I incorporated the gallery in to one of them. The other top right has a white border with shadow to create some texture so it’s not as flat as the design below. Between all 4 of the layouts, top left is the one I chose to use. I then added the gallery section between the profile photo and the biography box.

THE FINAL PROFILE

Reference

https://www.flaticon.com/search?word=bike

Before starting to design on XD I wanted to decide on the colour scheme of the app. As I mentioned earlier I’m thinking about using orange as the main colour on the app. Selecting the colour scheme for the app involves thinking about various elements such as the target audience, the overall aesthetic I want to achieve, whether it fits the context of the app and other factors. From Editorial project I have some knowledge on psychology of colour, which colours evoke different feelings and needs on people. This is mainly used in marketing to try understand what draws costumers into certain brands.  The research showed that orange is a colour which increases attention and increases memory performance. I also thought about green and red however, I think I was set on orange because it’s a bright warm colour which fits really well with the context of my of app is travelling which associated with the feeling of freedom, fresh, excitement these feelings should be represented on the app to attract my target audience which is the solo travelers who want to explore and experience different things. I don’t have a set age for my target audience this is because from the small research I did on on age demographics on traveling trends it says that the number of travelers older than age 30 showed the biggest percentage increase from 2007, rising from 10% of the market to 17%, while younger travelers, aged 23 to 30, have seen a decrease of a similar percentage. So considering this fact I figured out the app should interest and attract people from different age ranges such as Instagram. I think the design is very simple, clean focuses on the usability and consistency in the style. Everything is easy to understand with font choices they mainly used sans serif font which is commonly seen as more readable. However, the design is not really how I want my app to look like but it’s one of my apps that give me inspiration.

I had a look at which colour palettes with orange to maybe have another colour such as lighter orange or even darker orange/red for buttons etc. This way there will be stronger visual hierarchy in the app enabling users to easily navigate around the app. The colour palettes below are very bright warm tones to darker tones of orange and browns. I like the second colour scheme with dark blue and two shades of orange. The blue could be used in the buttons and icons, the two oranges can be used as background colour on the launch screen. The logo I created can be either black which could look too harsh on orange I would prefer it to be white so there’s a soft blend between background and the logo.

 

 

 

 

References

https://groupstoday.com/business/404-travel-trends-by-age-demographic

After all the research I started to think about branding, logos and icons are one of the most important things in an app. I was still unsure about the name of my app which made things lot harder. To come up with a name I started to search synonyms of key words that came to my mind about my traveling and meeting people. These words were travel, explore, talk. Searching up synonyms for these words and writing them down was a useful way to start off. As my app is for solo travelers to find each other and connect as friends I also had to focus on words such as friends, find. The words about traveling and finding friends can be a hard mixture to put to together without giving away too much about the app. The aim to find a name which is short, recognisable and brings together two aspects of the app.

 

The words above are all either synonyms or word associations of words like travel, passage, explore. Once I found an interesting word that sounds good I then found synonyms of that word to find other words. At the end, I had some potentials names like travel buddy, Explore It, Travel match, Trek, Movement. I think these words can be good as a app name, they show that it’s related to traveling which is the main purpose of the app. As I was doing research about existing apps related to my idea, I came across some apps which use words similar to mine which tells about the content in the app yet some names are very different and it doesn’t reveal too much about the app which I think this also creates interest for users to look into the app. The potential names I came up with are very cliche as it reveals everything about the app yet they work with the app well and it could look good with a good UI design. I think for now I will be use travel buddy as that’s the one that works the most and sounds better than others.

LOGOS FOR EXISTING APPS

As the next step I had a look at the logos for already existing apps which you can find them in my Research post. The top 3 are the icons focused on imagery and the bottom two are focused on typography. Looking at the style, as they’re all focused on travel guide I can see the similarities as using symbols associated with traveling such as location symbol. The rest have created their own identity using typography, I like the ‘Klook’ logo, they way 2 o’s blend into each other creates a small detail and stands out in the logo. Couchsurfing app focused on a feminine, simple font in orange which also works well in the app. All of these logos are very simple, using bold bright colours. As these are logos of very popular travel apps, the logos are recognised by users and used by many people around the world. These logos were a good starting point as I can see using bold colours and simplicity what most popular apps used in their logos. For my logo, I want to use a contemporary style focused on typography, a simple but effective logo which can be recognised and looks in the layout design. For this, I want to research more about logos as the the ones above is not the style I like and I think they visually can be stronger.

After the small research I just wanted to go on Illustration and sketch out the first initial ideas I had so I can see which style I want to focus on as I had few ideas. As seen in the ‘Klook’ logo I liked the idea of merging words together decreasing the tracking.

The logos above as the first initial ideas came to my mind influenced from the other existing app logos. I really don’t like these logos I think I just don’t like the name it reveals too much about the app and it’s too long. I like the way ‘buddy’ is merged but other than that I don’t like these they’re not visually strong. I tried to create some hierarchy between travel and buddy using thinner font such as Futura and Cresta fonts and Geometric 231 Heavy BT for ‘buddy’ as I used this font in my editorial project and really liked as it’s bold and stands out in anything. I also made some variations with orange to add colour to see how it would look with black and I think it looks okay but it needs more details it looks too simple with just the way it is. As these are first initial ideas I won’t be using them or carry on creating more variations because I want to change the name. So I went back to searching for a new name.

I was searching for more words associated with traveling and I came up with ‘Solo’ as my travel app is for solo travelers to find friends so for this I think ‘Solo’ sounds much better than travel buddy as it’s shorter, simple but also it doesn’t reveal  much about the app which is what I like the most. Once I was sure, I started to sketch some ideas on my sketchbook then I will create them on Illustrator.

As I was looking at other contemporary logos for influence I found these series of logos created by Ak Desain on Dribble. He creates logos for many companies and when I had a look at his work I really liked his style.

His style is creating simple and effective logo identities for companies to communicate with people. I only chose the logos which are black and white because to me they stood out the most but he also has work with colour. The main thing style he has is he uses imagery or symbols associated with the word or company in the logo. The logos above you can see clearly he has a clear sense of what he wants to communicate, I really like them as they can easily work on anything. I think this style is simple but has a strong visual language which could work really well with my app name and as app icon. As it would include imagery and typography to give the user some idea of what the app is about. So from looking at these logos I sketched some ideas on my sketchbook to begin the process of logo and icon.

 

 

The sketches above are the first initial ideas for my logo. The sketches are very simple and I just mainly  focused on getting  all my ideas on paper which then I would chose the ones I like the most and design  on Illustrator. All the sketches focus on using symbols associated with traveling such as location symbol, compass, a silhouette of a person, a globe etc. As I was sketching I was also having a look at contemporary typography logo designs for inspiration. I think the ones I like the one the most is compass one and the person sat on a plane sit merged into the L part. Those two symbols the word ‘solo’ the most as it shows there’s only one compass and a person associated in the logo I could add a backpack to give more hints about the app.

Then I focused on icons, using borders in different shapes. I used the same ideas but placed borders around them to see what it would look like. I think I like the icon which has the person silhouette and maybe the just the person on the icon and ‘SOLO’ can be under the icon and used as the logo. All these ideas can work nicely on illustrator with some colour like orange or green as for now I want my app to be orange and white. The reason for this is when you think about traveling colours associated with it is warm bright colours such as green, orange, yellow, red. From these warm colours orange is the one I think it would look the best. Orange would stand out on the layout on white background really well, especially as headers with bold fonts. From my research on colours from last project Changing Faces, I already had some knowledge on which colours seek our attention the most and improve memory. I think orange would be really good as it fits to the aesthetic I have in mine for my app. The next step was to design the logos on Illustrator. 

 

The designs above are all the potential logos for my app. I used several different fonts which are sans serif and is very bold in thickness and curves. I believe sans serif fonts suit my app as it creates informal style as traveling is not a formal  activity it focuses on freedom and exploring. Also, everything blends into each other smooths creating it consistency. To start off with I played around with the word it self, placing them differently cutting them and using different point sizes. There’s some designs with diff think it looks good but it wasn’t as strong visually so I then focuses on symbols. I used different symbols for each part of the word. I liked the ones with magnifying glasses but I think this is very cliche and is used a lot in many other logos. The one I liked the most was the silhouette of person sat on chair replacing the letter L. I think this looks very interesting gives a little bit about the app it self focusing on the traveler. I wasn’t sure on whether have straight corners on the silhouette or round edges. But I decided to have round edges so it fits in with the rest of the font and also for my app I think I’m going to focus on round edges in most sections.

 

Using the logo I created more variations but this time focusing on colour and borders. I chose to create variations using black and dark orange which is Pantone FF6A13. I’m not sure which one to us in the launch screen as I don’t know what kind of design I want for it. I have an idea of a photo blended in the screen with the logo on top part of the screen. It depends which colour palette on the screen. However, I think the simple one colour variations is better than the colours versions it’s very simple and I think it would fit better on a screen with heavy photography.

 

 

 

The logo above is the final version with few adjustments. I changed the seat line to a round edges because with this way it blends in with the font and the vector creating consistency. I used the font Geometric 231 Heavy BT, it has heavy thick feature which is very in your face and works well as a logo to make it stand out. I tried other fonts such as Futura, Cresta , Geometric 415 BT Medium but they didn’t look as bold as I wanted them it to be. I really like this logo as I think suits it the content of the app showing the purpose of the app well. The colour is not certain I used the Pantone colour #FF6A13 which I really like so I wan to base my app on that colour however, I will decide on that later on in the project depending on the overall colour scheme of the app.

The next step is to focus on the research about colour. This research would allow me to decide what colour to use on text and background. I think colour scheme is really important as it symbolises the context of the app, it could increase attention if chose correctly and also the compliment the aesthetic.

 

 

 

 

 

 

---

Reference:

https://dribbble.com/Akdesain

https://dribbble.com/shots/6293827-Ramen-119-365

https://dribbble.com/shots/6105413-leave-64-365

https://dribbble.com/shots/6187088-return-85-365

https://dribbble.com/shots/6209992-Send-101-365

We had a workshop with David focusing on UX and UI. The workshop focused on what the difference between UX and UI, what makes a good UI and principles of each process. I think this workshop was really useful developing our knowledge in two of those areas. UI designers focus on the way users interact with the either mobile app or computer. By 1980’s first graphical user interface was developed by computer scientists at Xerox PARC. Users were able to interact with their computers by features such as icons, buttons, menus, checkboxes. This was a ground breaking rule as there was no need for coding, this meant anyone can learn how to use the computer and personalise the device. UI aims to create a good design which users easily can use and increate functionality. If users can’t work out  how to use the device then this would effect the sales of the device. UI designers need to enable users from all ages, backgrounds and technological experience can to effectively use the device.

UX design is the improvement stage after the UI process. Peter Moreville created a diagram, which points out how to achieve an effective UX design. If the UX designers achieves all the elements in the diagram then most likely it will achieve a good UX design. Peter Moreville believes in 7 factors are the most important part of UX design. There are useful, desirable, usable, valuable, finable, credible and accessible. I also think these elements are very important because just because an app is easy to use that doesn’t mean it’s good. UX focuses on things such as menus the correct terminology for menus, the correct call outs of actions, back icons which makes it easer for users to go back rather than keep going back to the main screen. There are many elements for UX designers to consider when designing a good user experience.

 

INSTAGRAM

Towards the end of the workshop we were asked to create wire frames of a chosen app. This would allow us to understanding how wire framing works and how each app functions. We chose to do Instagram which was a very hard as it is a very complex app with many elements in each frame. This also makes it easier for users to navigate in the app with different elements to go back to sections in the each page. We started to sketch out the navigate to have an idea what the frames have and how each frame needs to link to each other for a smooth working UX design. Instagram is a social networking app which is used by millions of people all around the world. The user audience varies with age, gender, backgrounds, technological experiences and so on. I really like Instagrams layout design because as it’s a photograph and videos based app the design is very minimal and simple. They focused on black and white colour scheme, with white background for more space and for layout to not look overcrowded. The font used san serif fonts which create a clean, informal but sophisticated look. There are many icons used in the app such as home buttons, explore, add a photo, likes, profile. These icons are placed on the bottom of the screen which make it easier to use. There are other icons such as the ‘story’ and message icons placed on the left and right sides of the bold Instagram logo separated from the timeline with a line.

Instagram profile has section has recently changed due to an update. They changed the design with the update which I do think it looks better than the other version. Making changes to an app design can be very risky as users get very familiar with the design and once there’s few changes it could make the user feel uncomfortable or hate the design. The changes in this version consists of the profile image has moved to the left side with user name and biography placed on the left of the image. The size of the profile image is  bigger than original which fills more space on the screen. The ‘follow’ and ‘message’ place below the profile message to fit the screen . Small changes in the design can really effect the users at first, however if the design does’y limit the usability then users can easily get used to the new design. I think visually, the new version looks better on the screen, there is still white space but it makes each photo and element stand out.

WIREFRAME

This wire framing is very brief sketch of navigating between home screen, profile and to stories settings on the story section. You can clearly see the app is very complex, there are many frames which go back and forth. For my app design, I want to keep it very simple but have as strong visual design. As Instagram has many features such as messaging, posting photographs, searching, different categories for each section such as art, lifestyle and personalised discovery page depending on things and people you follow. All these elements create a complicated app which needs to be carefully designed to not have a crowded layout also for user to easily know their way around the app. I was thinking about adding a discover section in my app so it’s not just meeting friends. As some apps like ‘HEY Vina’ a social networking app for women, I saw that it wasn’t just matching and talking to people the app had features like planner where you can see the meet ups you arranged for that week. For my app, I want to include a small section where you can just see popular destinations in that area or many cheap bars and restaurants for travelers. I think this could be a good feature as users can interact more and spend time on the app searching to find good places to eat around the location they’re at. 

To carry with the research about existing apps I wanted to have a look at other contemporary app designs which aren’t related to travel to see what kinds of designs exist and what style people are moving towards too. Looking at the very popular and old travel apps it’s clear they  have focused on functionality rather than design of the app. The apps I found below I think have a very good contemporary layout which is attractive and interesting. It stands out to me in many ways below you can see screenshots of navigation as I’ve used the app. I will be analysing each tab about overall layout focusing on icons, navigation menu, layout of each frame and colour scheme.

UPPER

After the the first initial research about existing apps I was able to see that the most popular travel guide apps are mainly only focused on the purpose and the design is not what how I want to design my app. I started to do more in depth research into newer app designs which are more contemporary, focused on strong visuals and good user interface. As I was searching for apps I found Upper which is an app focused on daily tasks and it’s suppose to replace note pads or planners.  I think the main reason this app caught my eye was the colour scheme and layout. I really liked the logo as it’s minimal, but catches your eye with the red and black. Focused on typography it’s simple but works well with the overall layout creating consistency. As you open the app you are straight into the home screen there is no log in or sign up which is quick and easy. The image on the left shows the home screen, I really like the font they used and layout of each section is good with hierarchy of colours. To work the app you need to either slide down to see your tasks for that day or slide left to change dates. There are good features such as you can cross over the tasks when you completed which gives the feeling off using physical planner but on the app. The icons are also simple and fits in with the design, they are easy to understand and placed on the bottom left. When you click the menu button which is the three straight lines it takes you to menu where it shows you several features such as completed tasks, the past 30 days etc and at the bottom they separated the two parts with change of back ground colour which works well. To get off this page you tap cross to get off the page which is in the middle of two sections. There is a strong use of colour in each section.

From the 3 sections you can either choose calendar, settings and productivity. Calendar section shows you the month where you can track the tasks you have set yourself. I think it’s easy to use the app, the icons are placed mainly on the bottom right of middle of the page to divide sections. This page you can either add a task from the plus red icon or go back to the menu from the 3 straight lines. I think this is easy for user to understand and efficiently use the app.  Settings screen only has 4 main headers in big white font on black background. They used the same style in main pages black background bold red or white on top which makes the design stand out even though it is a very simple layout which not many features.

From the settings screen you can also change the theme of the app which I think it’s the most exciting feature about the design. There is a selection of two features either black or white. Through out the app it’s on black theme which makes everything else such as type and icons either red or white. If you select white theme the background turns into white and everything else turns black or red. I think this feature is like a night mode where the white theme catches your eye the most and is used in many other popular apps such as Twitter. The black theme could be more for night time users or your in a dark room you don’t want your screen to be too bright. On Twitter there is a night mode which is for users who hate the bright white background when they’re using the app at night they can put the app on night mode which the theme turns dark blue background which doesn’t hurt your eyes.

I think these types of features are very interesting and allows the users to personalise the main apps as like Twitter you can’t personalise as much it’s the set theme in every account.  The user has the option to either use or not it’s in the menu section placed at the bottom. Also, I think the white background works well as thinking for the Apple users, they are mainly familiar with white background, clean layouts so black background may too in your face. However, the app is for android users and android layout is darker in theme compared to Apple so the dark theme in Upper could suit Android users more then Apple so they considered both types of users which is interesting and adds a good feature to the app.

WEATHER APP

I also found another app which is not actually on Appstore but a design from Behance focused on weather forecast. The main thing that caught my attention for this app is the colours. Compared to many weather apps the layout is very simple but unique with the colour choice and strong typography. The app is focused on weather forecast in your area which they designers used gifs of each weather in each section to make the app more interesting. The design shows the home screen of each day being shown in one screen from morning to night in colour codes. Each part of the day is highlighted with it’s own colour and depending on that the illustrations are brighter to make them stand out. I really like the illustrations in each section I think they are simple, they communicate the information very well. At the top right there is two icons which I think the the one on  right is the menu icon and the other one is related to the layout of the home screen. I think it’s not so clear on what those icons represents but I like the simplicity of the design.

These are the gifs for each weather which when you click on the part of the day they gifs start to play. I think this feature is really good as it’s a very flat design there isn’t many features the user can interact with. Gifs added some sense of playfulness and allows the user to look at something other than the actual weather forecast and get off the page. I also think the colour scheme is very nice, the main colours of green, beige, dark brown, orange which are in different tones and they all work really nicely together.

Next step I think I started to have a clear image in my head about the style I want in my head. The different between two different styles from research 1 and 2 have made me realise I need a layout and design which works the best for the concept of the app. As my idea is a more of a social media where users can interest with other users and also check out cheap bars, restaurants in the area it allows them to use other features even though they might not want to find friends. The colours I was thinking about for my app was colours associated with traveling, exploring. I asked my peers which colours come to there mind when I say traveling and mostly they said green, blue, yellow and orange. These colours are warm and earthy colours focused on the traveling which would work really well. I think as a design it’s very good however, you can’t see other features on the app. What other features can they add to make the app interact with the user because if they don’t it could just be same as the weather app created by Apple where you click on the app look at the weather and click off with limited interaction and interest.

MEDIUM

 

 

 

 

 

 

 

 

 

I was looking at App store doing some researching to find other apps which have a good app design that could influence my work and I saw Medium. The concept of the app is different to my idea however, I really liked the design and the logo.  Medium is an app where you can read about variety of different topics about the world we live in. It’s an app that you can find interesting stories and blog posts. The launch screen is what interested me the first glance, the collage of images is very eye catchy they used a simple logo focused on typography placed it on the top of centre of the screen which the collage of images catches your attention then the logo. I then wanted to see the how the app so after the launch page it took me to sign up page giving me 3 choices on how to sign up or sign in. This page is focused on simple and clean design using the main colour as green in the background. I can already see there’s a strong colour scheme which the colour is warm and subtle it’s not in your face as you can still focus and read the screen. When you click on the sign in page, this is also in the same style as the other page using the same colour as background and same two fonts which one of them is san serif and serif fonts which both work really good together. The icon is very simple on the top left corner which is easy to use. I didn’t want to carry on looking into the app but I liked the first few pages as in the app store you can see images of the app and they mainly focused on white background with black text using green in icons to highlight icons and sections.

MUBI GO

This is an app I found on app store it has a very interesting concept and purpose. The app allows you to have a one free cinema ticket every week if you subscribe to the app, it has a monthly fee which is like Netflix. I clicked on the app because I thought the logo was nice and I liked the colour. The app design is very straight forward one long screen where you scroll down which is like the introduction. It explains how it works, what you have to enter and how you use the app. When you scroll all the way down the last thing you see is start subscription which then it takes you to payment. I think this launch screen is really good, it enables the user to read through to understand how to use the app and the design is very easy to use. The arrow points down highlighting ‘how it works’. I think this was really good feature as most apps you tap to go into other pages. The colours are mainly bright colours like yellow, white and black. Yellow is the background colour. I think this is a very bold choice which makes the app stand out even in the app store section. The reason I clicked on the app was because of the logo which is yellow with black text and small illustration. The layout is simple with not much hierarchy which makes it boring to read through short introductions. Overall, I only like the colour scheme and logo of the app. I think the layout of the launch screen could be more interesting using hierarchy and more interesting visuals.

BUMBLE

As my app idea is mainly focused on social media, friendship apps I wanted to do some research to see existing apps and their designs. Bumble is an app which allows you to meet new people, matching with people with same interests as you. When you sign in there’s 3 choices bumblebizz for business friends only, bumblebff for just friends and bumbledate which focuses on dating. Depending on your preference the design of the app changes. This idea of personalising the app depending on your preference is I think a very nice feature which makes the app stand out from other apps.  The app generally uses bright colours which  increases the attention. It has basic features as other dating, friendship apps such as Tinder, sliding left to view the conversations and left icon which is for the profile. I think icons are simple and easy to understand. The app is mainly focused of images of people. It also has other features such as connecting to Spotify for share much with your matches. I think the app layout generally fits the purpose of the app, good user interface and functionality.

HEY VINA

Hey Vina is also another friendship app focused on women found on App store. Researching about existing apps similar to my idea really gives me a clear indication of what style is used by other designers and things that work the most. This design is focused on illustrations with typography and each icon used in the app which gives the friendly theme. The fonts used  mostly is san serif and feminine style as seen in the logo. I think the logo works well with the rest of the app design and blend in nicely. As seen in the images the layout is also mainly in the style of Tinder matching people. It has different features compared to Tinder such as you can have a planner which shows you all the meet ups you’ve arranged for the week. Also, it’s lot more friendly and has a personalised effect with all the small illustrations. The layout is very feminine with no bold bright colours or bold fonts which is in your face. I think as for the purpose this app is very nice, it’s not really my style that I would design for my app but I think it works well for this concept. I also like the fact users can interact and use the app for more than one purpose such as the planner feature is very useful for the user.

---

References:

https://www.mockplus.com/blog/post/flat-mobile-ui-design

https://www.behance.net/gallery/27118125/GIF-for-the-Weather-App

https://alty.co/blog/8-best-mobile-navigation-design-examples/

 

The idea that I will be going for is Tourist friendship app. I chose this idea because I think I will be able to create interesting visuals and a useful app for tourists or solo travelers to use as they’re exploring the world. To start off I did some research on apps focused on tourists to see what kind of visuals they use and to have an idea for what I could design. As I don’t have a strong visual in my head of what the app should look like.

 

KLOOK

It was really hard trying to find an app that I like the visuals in it because most are very old and just focused on maps where you can just pick the place you want to go. I want my app to be more contemporary feel where people can enjoy using and strong visuals to support the app. The one I found which I like is called Klook which is a travel guide app which allows you to do several things such as you can type in your location and it tells you all the events in your and you can also buy tickets for concerts, popular destinations and you can check your bookings and vouchers.. Also the part I like is, it’s very complex you can download guides from each city and it tells you everything you need from food to historical sites in detail.However, as looking at the design of the app I think the aesthetic is boring and there isn’t a set style. As the home screen layout is very clean and simple focused on photography which isn’t the concept I’m thinking for my app but home screen has strong visuals the layout is easy to follow and interesting. The main colour scheme is white and black but they used orange and yellow in icons to show hierarchy but I don’t think it looks good. I really like logo they used typography to create a  modern and minimal logo but the overall layout of the app is messy as there’s many aspects in the app which created a complex design.

 

LONELY PLANET

Another app I found in my search for travel apps for Lonely Planet which is a popular app used by tourists. The app offers a travel guide to users allowing them to download a big guide about the specific destination. When you download the guide it contains everything about the destination from food/drinks places, historical views and ‘must see’ section as popular destinations. I think the app offers everything you would want a travel guide to offer. The design of the app is photography based which works well with the purpose of the app. The app is easy to use as it’s a very simple layout and the use of colour and typography is very limited. This could be because of the target audience of the app or the overall aesthetic they wanted to create but the app is not very exciting to use it meets the purpose but that’s all.The icons are easy to understand yet could be done is a bolder way with colour or highlights as they don’t stand out much. The typography over is very limited, they used easy readable font for all headers and information text.I think the photography is the key focus in the app as the home screen does draw your attention. However, this is not the concept I want for my app, think for the concept of travel guide most apps always focused on photography which some apps do use a contemporary style but it’s very limited.

 

TIQETS

Tiqets is a new app I discovered which again focuses on travel. I think it’s the one I like the design the most in the sense of overall design of each frame and colour scheme. The app offers similar things as all the other apps which  are you can check the availability of popular destinations such as London Zoo, shows the ticket prices and other information such as closing times. You can also book tickets using the app. In addition, I think the branding is good, I like the logo which focused on typography. It’s minimal and works well with the overall layout  of the app. I also like the colour scheme of shades of  turquoise and black for text. They also have dark purple for main signs to make them stand out which I think they could of used a darker tone of turquoise to stand out than a different colour as it effects the overall layout and doesn’t fit well with the colour scheme. The icons are placed on the bottom of the app which are simple and east to understand. They used the ‘t’ in the logo as part of the discover icon which works well and adds a detail to basic discover icons. The map, wallet and options icons are simple and all works well together. At the top of the screen they placed the search bar which I think it’s too small, it should be near the middle to have the focus on there to make the readers want to search things and use it. If it’s at the top it won’t be as eye catchy.

 

JOURNI BLOG

Journi blog is a different from other travel guides as it still allows you to explore new places however, you can post your memories which is where the name comes from ‘journal blog’. It’s a blog for your memories related to traveling where you can post images with your blog posts and other users can read them. I think this is very interesting I never came across an app just for your memories where you can write a blog in a app. As there are many blog writers however this is an app where you can easy find writes and also it’s personal as well as like recording a journal. Also, as I mentioned it’s also an app to explore other writers blog posts find out new places and explore. I think the idea is really good and focuses on directly travelers. It’s similar to my idea as you can be friends with other blog writers through ‘invite friends’ section.

The design of the app is also very nice, it’s simple and comptemporary focusing on the illustrations using a nice colour scheme of white and shades of blue which visually looks good together. The header are being made to stand out with bold font and black colour which creates hierarchy, similar fonts are being used in overall text which creates a consistence. The layout reminds of a social media app as the layout and font choice is mainly used by social media apps like instagram. I think the logo is very nice, works well with the layout and the colour choice is also very nice, the blend of different shades of blue creates for detail. The logo is also animated, the white shades i the logo moves side to side as you click to log in or sign up. I think this makes it interesting to use the app and works the best compared to all the other apps I found. The interface is are easy to follow which makes it easier for the user to use the app. Each section is highlighted clearly which increases clarity and functionality. I think overall, the app is very good in order of the interface design, aesthetic and the layout of each frame. This style is something I could consider for my app design.

 

VIEWRANGER

Also I found another app which is focused on mountains and views around the selected area. They target audience people who are interested in camping, long walks and views. The app allows you to track where you’ve been and clearly shows mountains and views in the map. Also, there are many features such as challenges, points of interests and Buddy beacon which is for sharing your real time location with friends and family. The design of the app seems very easy to use with the home screen however I struggled when I skipped onto the main page without creating a page. All I could view was just the map and there was nothing else which was a bug I think. However, once I clicked off and went back on I could use the menu page and the icons. There are 5 icons on the top of the screen, which usually in most apps the icons are at the bottom. Each icon is easy to understand and they used symbols which are many people are familiar off such as sign boards, magnifying glass which are used by other apps as well. I think overall the layout of the app is good with the consistence of colour scheme. Profile section of the app gives the sense of a facebook profile page. It looks boring without much detail, as the purpose of the app is about exploring I think the design could’ve been more playful and abstract to give the feeling and fit the context. The logo is very minimal and communicates the purpose of the app well. However, once you skip the home screen I think the app is boring, there’s no visual hierarchy or any element which is interesting to the user to read or use.  It has limited use of typography I think the aesthetic design the app of very simple which functional with good UI interface.

CITY MAPPER

The last app that I wanted to include in my research was CityMapper which is a very popular app for transport. The app allows you to pick a city and then show you all the different kinds of transports around the area and how to get to places in detail. It has many features which allows you the user to interact with the app such as ‘Get me to work’ or ‘Get me home’ features which creates a more personal feeling for the user. The app also has a City Mapper Pass and City Mapper ride which are both very useful for user as it becomes more than just an app they have in their phone. I think the app meets the purpose of transport allowing the user to find the location they want to go but also offer rides and a pass etc. As the design of the app is not as good as the features it offers. I think there is a strong consistent colour scheme of green and white which makes the app stand out. There are illustrations on the location select section looks playful and does work well. Illustrations are mainly on the home screen and location selection page but then they used to the style in icons as well.  There are 3 main icons which are placed at the bottom of the screen as pass go and ride. Pass icon is a small illustration as the illustration used the card which makes sense but I don’t think it clearly communicates what it does.  Go icon is the simple illustration used with an arrow to symbolise the word ‘go’ which I think looks good but they also used words to support the icon which is not very common in very well designed which creates unrefined look. I think overall, I think the design of the app isn’t as attractive and interesting as the home screen, I don’t like the icon symbols and I think there isn’t a consistent working style the aesthetic is playful but it doesn’t stand out to me and not my personal style.

Researching about different other working apps and looking at the designs I was able to see different UIs whether they work, different icon styles and colour choices. For my app, the aesthetic I want is something simple yet stands out with strong typography and the layout design. As it’s about exploring and traveling I think it shouldn’t have a  corporate style and feel to it as the my target audience is people who could be against that idea. Next thing I want to do is few more app researches to find designs I really like and that could influence my designs. I want to focus more on contemporary designs.