FMP: Revisiting the app design

Before I needed to change my focus to designing the brochure so I could get it printed in time for the deadline, I decided to work mainly on the app design. Now that the brochure has been designed and sent off, I felt it made sense to return and finish it.

Here is the next stage of the app design. Since I have designed the brochure, the design style I wish to see used throughout the project has been established to a far greater extent. I must admit I thought I had most things pinned down, but soon realised the aesthetic of the app needs to change.

So gone is the dark black background with white text, to be replaced with the grey theme seen throughout my brochure design. So I started with the home screen, changing the background to pale grey, and the text to dark grey. I also made the home icon thinner and replaced the old Land Rover logo with the new vector logo I have made for the brochure, placing a color overlay on it in the layer styles to turn it from white to dark grey. I am really impressed with this screen now.

As for every element on the page, I removed the bevel and emboss I placed on it, the reason being I felt the faux sense of depth is not in keeping with the brochure, and also flat design is very popular at the moment, with rumours that Apple’s iOS 7 is going to move to a flat aesthetic, which can be read here on the Techradar website, my favourite website incidentally for keeping up to date with technology.

Screen Shot 2013-05-10 at 14.32.40 Looking at the different screens throughout my app design, I was concerned that it all looked a bit flat, in the sense that text was just placed against the background, with no structure. Therefore I decided to address this by adding some rectangle ‘boundary’ boxes behind the titles. Below is my first test, the new design being on the left, and immediately it is clear that there is an improvement. I asked the opinion of some people as to what they thought, and they all liked the newer version.Screen Shot 2013-05-09 at 10.09.35However, I felt more could be done, in both matching the style of the brochure, and making the text more legible, so I changed the background box to a dark grey, and changed the text to the light grey of the main background. This helps to provide a strong contrast to the design, making information pop out far more clearly than before.

Screen Shot 2013-05-09 at 19.48.04

I decided to apply some changes to the app in a logical order, so I will go through the ‘Configure’ stage step by step, and highlight what is new and why I have done it. For the ‘Engine’ screen, and all screens from now on, the main central piece of text has been changed from Helvetica Neue Bold to Nexa Bold, so it is in keeping with the majority of the text. The only thing I have decided to leave as Helvetica Neue Bold is the ‘Back’ and ‘Next’ buttons, so it is in keeping with the rest of iPhone apps.Screen Shot 2013-05-10 at 14.32.45 For the ‘Model’ screen, I have, in addition to the changes I have previously discussed, changed the style of the table for the information. Again, this matches the brochure, and I have kept the text in the bold weight so as to make it more readable. I have also moved the hide and reveal buttons from the left margin to the right, as there is more space.Screen Shot 2013-05-10 at 14.32.54 The first ‘Exterior’ screen focuses on the paint swatches. Unlike the brochure, every colour will be represented as a tile so as to fit the space better. I have also progressed from the iTunes mimicking style of scrolling through swatches to a more circular based system. The other change from the brochure is that the colours will be displayed in a sequence that matches a colour wheel. This is made possible as the information can be displayed directly above, informing the audience as to the name, type of paint, and cost if necessary. The size of this text is now 6pt to make it easier to read, with the Bold and Light weights being used to assign priority.

Something that can be seen across all exterior screens is that I have cut the car and shadow out from the background, so instead of it being white, it sits on top of the background. I think this is a huge step forward, as it looks more integrated.Screen Shot 2013-05-10 at 14.33.00 Again, for the ‘Wheels’ screen, I have used the circular style of navigation, and because I now have a pale grey background, it allows me to carry across the idea I had with the brochure to show the tyre around the wheel as to give a better design context.Screen Shot 2013-05-10 at 14.33.06 For the ‘Roof’ page I have removed the white background from the ‘option image’ at the bottom of the screen for the same reasons as the main image. Because the circular  scrolling option does not really work for this style of option, I am using the little icons seen on the home screens of an iPhone that indicate how many options that can be scrolled through. Swiping left and right shows the variety of selectable options.Screen Shot 2013-05-10 at 14.33.14 The design changes made here for the ‘Accents’ screen are the same as the one above.Screen Shot 2013-05-10 at 14.33.21

Moving onto the ‘Interior’ screens, the same style has been carried across. A change from the brochure is that instead of showing all the variations possible for an interior choice in very close proximity, the app design can break down the process into a more logical manner, an advantage of a digital media over a print one.Screen Shot 2013-05-10 at 13.50.49 For the ‘Seating’ screen, as there is just one option, to either select or deselect, I decided to make the image bigger to fill the height of the space it had. From there, I moved the ‘add or remove’ button to the left and the ‘info’ button to the right. I still need to design the pop-out panel for the info section yet.Screen Shot 2013-05-10 at 13.50.58 For the ‘Finishers’ screen I am using the circular style of scrolling, which works here as there are three options, helping to keep the symmetry. If there were just two options, I would have thought about a different way of displaying them.Screen Shot 2013-05-10 at 13.51.06 Again, with the ‘Headlining’ screen the changes that I have made have been discussed elsewhere. However, one change I have made is to add in the fabric headlining to the scrolling mechanism, which previously just had the options for the leather headlining.Screen Shot 2013-05-10 at 14.27.53 The ‘Options’ screen has changed to match the colour scheme, with the new contrast making options much clearer to read, also helped with the type size increased. Scrolling left or right takes you through the different options lists, such as ‘Exterior Features’ or ‘Information, Communication and Entertainment’ for example. The same process carries through from my previous design as in how to add/remove options, as well as source information about it. I still need to design the info panel for this however, as well as get some images together that truly reflect the options I show on the screen.

Screen Shot 2013-05-10 at 14.11.56

I will also need to design an ‘Accessories’ screen, which will be the same style as the Options screen.

An advancement I have made is to design a ‘Summary’ screen which at the end of the configuring process, shows the audience what they have selected. Scrolling left to right shows the different main stages (Model, Engine, Exterior, Interior, Options, Accessories) and the grey bars show the main information. Pressing the info button will allow bring up a pop-up box for further information when I have designed it. There is still some development to come on this screen.Screen Shot 2013-05-10 at 14.19.15 Instead of the ‘Next’ button on the ‘Summary’ screen, I will replace it with a button that states ‘Share’. Pressing this button will bring up a screen style dedicated for sharing, which is something Apple uses in its Safari web browser. It is something that will be familiar to iOS users, so they will intuitively know how to navigate. From there, there are a range of options, to save to the ‘Garage’, print the configuration, or share it via mediums such as Facebook, Twitter and I’ll probably put Pinterest on there as well for the design mock-up.

I still need to create an icon to represent adding a saved configuration for a Range Rover to the ‘Garage’. At the moment, the Teehan+Lax icon is there, as they are the people that made the downloadable iPhone PSD template, which has been essential to this project. It can be downloaded from their website here.Screen Shot 2013-05-10 at 14.23.28

With the settings screen, I am still happy with the design so it was just a case of changing the colour scheme. Screen Shot 2013-05-10 at 14.35.28 The only other change I’ve made is to place a metal finish to the ‘toggle switches’. It looks more realistic and of a much higher quality than just being a flat, pale grey.Screen Shot 2013-05-10 at 14.35.43 With the ‘alert’ dialog box that appears at the start of the ‘Configure’ process, all I have done is to change the colour scheme, as well as the typography to Nexa Bold and Light.Screen Shot 2013-05-10 at 14.35.34

So what’s next for the app design? Well, I obviously want to finish the ‘Configure’ section, as well as start and finish off the remaining sections of the app that are visible on the home screen.

During this process, I will want to ask around for feedback, to ensure my designs are suitable for the intended audience. To do this, I shall ask around on Monday at an interim crit I have, as well as consult the audience members who were so helpful for the brochure design and gave me a lot of extra insight.

Advertisements