FMP: Feedback and Finalising App Design

For this blog post, I show the final development stages for the app design. There have been many changes since the last blog post focusing on the app design, which can be read here.

I took what I had done so far for the app design into the interim crit earlier this week, with the aim of sourcing feedback about the design about whether it was suitable in design terms. (as the audience members I had spoken to had already confirmed they felt the design was suitable for the audience.) This was achieved, with a good level of feedback, and I’m glad to say the majority was very positive, with a few little points to pick up on. So below I’ll run through the app, how it works, and mention the changes made.

Firstly, I decided I really needed a suitable app icon. I refreshed my memory with the research I had done into app icons, and looked around for Land Rover app icons but found nothing to really go on, other than using the logo. From this I came up with two paths:

  • Use either the Land Rover, Range Rover logo or both.
  • Show the vehicle, or a feature that the audience would recognise.

The second path was one I felt would work rather well, and to this extent I decided to look at the front vector shape I made earlier in the project. The whole front in the app icon was too small to be seen at a sensible size, so I soon changed my attention towards focusing on one element. Pretty quickly I knew the only element I could work with would be the headlight.

With the app being named ‘Range Rover’ (I cut out ‘The All-New’ from the name as it was too long) I felt perhaps the app icon could be the Range Rover logo. So I found that and turned that into a logo, of which I was really impressed. I also experimented with the Land Rover vector logo I had made as well.

Screen Shot 2013-05-15 at 14.29.53

So I showed all of these to the audience members that have helped me throughout this project and asked them what they thought. They felt the vehicle shape ones were not suitable as they were not recognisable unless you had a very good knowledge of the Range Rover, so not very accommodating for new audience members.

As for the Land Rover logo app icon, they felt this would create confusion, as many people are not totally familiar with the idea that Land Rover produce the Range Rover as just another model in the range, as they would the Discovery or Defender. This left the Range Rover logo, which was received favourably because the design approach was closest to the rest of the project, was the most legible, and was very minimal, so would stand out on the home screen.

Screen Shot 2013-05-18 at 14.09.45

With this feedback, I was able to pick out the best option and use that. This is why it helps to have an ‘outsider’ look at your work as they won’t be as familiar with it as you are, so won’t have as great a understanding, meaning things need to be more logical.

I then wanted to mock-it up on a iPhone home screen to see how it would look in relation to the other apps, so I did that and was impressed with the result.

Screen Shot 2013-05-16 at 16.47.06

After that, I wanted to turn my attention to the launch screen. This was not properly designed when I went to the interim crit, and opinions were mixed. Some felt the vector icon did not highlight the new features of the all-new Range Rover, and could just be any Range Rover, while some liked the minimal, ‘de-constructed’ approach as they felt it summarised the configuring process.

I had a long think about it afterwards, and decided the app launch screen needed to be bought in line with the front of the brochure and promotional leaflet I have designed. Therefore I placed the same image in, and made it look suitable in a portrait format whereas before I have placed it in a landscape format. Having a lot of ‘background space’ around the focal point helps make the image as flexible, and as useful as possible to me.

I then re-designed the black bar to go at the bottom of the screen, where it can carry the Land Rover logo and slogan.

Screen Shot 2013-05-15 at 14.50.47

I was happy with this, but felt it was missing something to show the progress of the loading app. I decided animation of the image was not possible, so turned my attention to designing a slim progress bar the audience will be familiar from seeing already on both computers and phones. I chose to place this under the vehicle to get the contrast from the sandy background and line up the edges with that of the Range Rover.

Screen Shot 2013-05-16 at 16.47.15

With the app design being received favourably at the interim crit, it has mainly been a case of making a few design tweaks and here, and designing the screens that I hadn’t done yet. The next change came to the structure of the app. I decided that the ‘Brochure’ section of the app should be removed, as there would be a better place to position the ‘Request a Brochure’ command. It also doesn’t need a whole page, just a button that re-directs them to the Land Rover website page where they can order from there.

This involved having to re-align the remaining elements, but it has helped to consolidate the minimal aesthetic, with more space given to each button.

Screen Shot 2013-05-16 at 16.47.40

Pressing ‘Configure’ will start the new configuration process, and as I have shown before the first two screens focus on selecting the ‘Engine’ and ‘Model’.

Screen Shot 2013-05-18 at 14.10.56

Below are the screens for the ‘Exterior’ part of the Range Rover configuration. Again, these have been finished previously, so nothing has changed here.

Screen Shot 2013-05-18 at 14.14.55

Screen Shot 2013-05-18 at 14.15.03

Below are the first two screens for the ‘Interior’ part of the Range Rover configuration. Again, these have been finished previously, with the only thing that has changed is the image, which is now of a better quality. I also discovered the old image was distorted, which was really annoying to find, but good that I have replaced it.

Screen Shot 2013-05-18 at 14.34.31

I have made changes however to the info panel for the ‘Seating’ screen where I have changed the info panel size, so it now covers the whole screen, and included an image of the option.

Screen Shot 2013-05-18 at 13.19.42

Below are the last two screens for the ‘Interior’ part of the Range Rover configuration. Again, these have been finished previously, so nothing has changed here.

Screen Shot 2013-05-18 at 14.20.49

The next stage of the process involves choosing ‘Options’, where I have changed the images as the ones I used before were only quick mock-ups, and were therefore not suitable at conveying the option properly.

Screen Shot 2013-05-16 at 16.48.44

I also re-designed the info panel, changing it like I did with the above screen to show a image on the info panel and streamline the text.

Screen Shot 2013-05-16 at 16.48.51

The next development I made was to design the ‘Accessories’ screen, which stylistically is the same as the ‘Options’ screens, but has different content.

Screen Shot 2013-05-16 at 16.49.00

I also used this ‘info panel’ to highlight the ‘alert’ function of the configurator – to make the audience aware either when:

  • Two options that are incompatible with each other are selected.
  • The addition/removal of one option necessitates other options to be added/removed.

The app proposes a solution, informing the user as to what will be added/removed, as well as the cost change. The user can then either ‘Confirm’ or ‘Cancel’ the changes.

Screen Shot 2013-05-16 at 16.49.08

The next section would be the ‘Summary’ where the audience can see the full set of details for the car they have configured. Swiping left and right reveals the different categories.

Screen Shot 2013-05-10 at 14.19.15

From there, they can press the info icon for more details, and press the ‘Edit’ Button at the bottom to go back to the relevant screen if they want to make any changes.

Screen Shot 2013-05-18 at 12.59.32

After that I felt there needed to be a screen where all the available facilities for the configuration can be presented. I decided to title the screen ‘Next Steps’ as I felt this was relevant to its purpose. On that screen, I took inspiration from the Apple ‘Share’ screen I talked about in my last blog post, but instead of mimicking it, I decided to change it to better suit my design. So there are still the buttons for sharing to Mail, Facebook, Twitter and Pinterest, as well as options to Print, Save to Garage, Edit or Start again.

Screen Shot 2013-05-16 at 16.48.12

The ‘Save to Garage’ button brings up a pop-up dialog box where the user needs to input the name for the saved configuration and press OK to save it. For this design I took the alert box and changed it substantially to suit my needs.

Screen Shot 2013-05-18 at 14.06.24

Garage:

Moving onto the ‘Garage’ part of the app, if you open it after saving a configuration, that will appear there. There are options to open the configuration or delete it, courtesy of some little iOS icons that will be familiar to the audience. I’ve also used one of my own icons to represent the ‘edit name’ function. Pressing the top left button will open the configuration to the summary page, where it can be edited if necessary.

Screen Shot 2013-05-16 at 16.49.25

To delete the configuration, just press the delete app, and an alert box pops up asking if you are sure you want to delete it, as it would be so annoying to mistakenly delete the configuration. Pressing ‘Yes’ will take you back to the ‘Garage’ screen where a car configuration is.

Screen Shot 2013-05-16 at 16.49.30

However, should it be blank, it will show a different screen I have designed, where it informs the user the garage is blank and invites them to start a configuration courtesy of the large ‘New’ icon I have designed in the middle of the screen.

Screen Shot 2013-05-16 at 16.49.36

Locate Dealer:

I have finally finished this part of the app. The first screen remains the same however as that was already finished.

Screen Shot 2013-05-16 at 16.49.45

but the map size has been reduced in the second screen to leave space for the Land Rover logo below. The reason for this being here is that this is the link back to the home screen, which if it wasn’t there, how would the user get back? Especially as pressing the Home button on an iPhone doesn’t take you home on the app, as when you re-enter you pick up from the screen you were last on.

Screen Shot 2013-05-16 at 16.49.51

The Land Rover logo still features on the map, but pressing it now brings up an info panel, which contains a large image of the dealer, the address, a phone number, and a button to ‘Get Directions’ which will link the user into the full Google Maps application.

Screen Shot 2013-05-18 at 12.35.43

Settings:

Unchanged from before, but a really intuitive screen that deals with setting the measurement units for the app, as some people prefer using metric and some prefer using imperial. With two differing units that can be used, I wanted to provide the audience with the option for this.

Screen Shot 2013-05-10 at 14.35.28

Conclusion: So this concludes this section of the project. I am very pleased I have done this, as this is the first time I have specifically explored app design. I have asked around for feedback since and the results have been extremely positive.

Advertisements