FMP: The app design so far…

For this blog post I want to talk about how the app design is progressing. Obviously all I have shown so far is some wireframing concepts as well as some sketches of icons as I had some ideas I wanted to act on immediately.

I wanted to start designing on-screen instead of wasting time with sketches couldn’t realistically show the style of the app design. So I searched for an iPhone 5 GUI psd file, which would save enormous amounts of time when I am designing, and I came across an amazing file by Teehan + Lax, which you can access here on their website. I really can’t recommend it enough, I am so impressed with it!

However, before I started designing properly, I needed to flesh out the main structure of the app, which is as follows:

Home screen with options for:

  • Configuring a new vehicle.
  • Recalling saved specifications.
  • Viewing the e-brochure.
  • Finding a dealership.
  • Settings.

Configuring a new vehicle:

  • Engine.
  • Model.
  • Exterior. (Paint, Wheels, Roof, Accents)
  • Interior. (Colourways, Seating, Finishers, Headlining)
  • Options.
  • Accessories.
  • Summary.

Designing: Finally, I could design! I chose to go for a dark colour scheme that I was exploring in earlier experiments, and I also thought it would have the advantage for an app design of being easier on the eye being black, being ‘invisible’, focusing attention more on where it needs to be, which is the content. I asked around for some feedback on this from other people in the graphics group, and they agreed with me that a darker background was needed.

I started with the home screen, bringing in the home icon I had made in Illustrator, and creating four large square buttons for the options. Beneath that would be the icon for the app settings but I never got around to that, as I decided I didn’t like this design, as the harsh gradient and thick border did not give it a quality feel I was aiming for. So this idea was scrapped.

Screen Shot 2013-04-08 at 14.51.42 As can be seen in the image below I changed it to conventional buttons from the GUI kit I downloaded, changing the colour to black so it fitted in. This made room for a fifth button, and the space gave me an idea of filling the lower area with a Land Rover logo I had found and edited in Photoshop to match the monochrome colour scheme.

As for the screen on the left, I realised I would need a launch screen while the app loads. My idea is to have the front of the Range Rover, to match the experiment for the brochure front cover, with the text below. The typeface has since been replaced because ‘Eurostile’ did not have a premium feel, and I am also thinking of animating the car so it appears it is driving towards the audience.

With the ‘Engine’ screen, I managed to design a basic structure which works well as a starting point to allow me to create a visual hierarchy for pages.

Screen Shot 2013-04-09 at 11.18.58For the exterior ‘Paint’ screen I had to decide whether to copy low quality colour swatches from the Land Rover configurator, or create my own. With some experiments, I found that I could create my own, which is great as the quality is excellent and it gives me more design flexibility. I have chosen so far to use an style of scrolling users will be familiar with from iTunes, meaning the design is more intuitive to the audience.Screen Shot 2013-04-09 at 11.19.17 The next big revision to the design layout came when it became apparent to me the information in the bottom half of the screen was not clear enough, as there was a lack of definition between rows of text. To correct this I placed white boxes behind alternating rows of text, lowering the opacity to make a table, but one that didn’t clutter up the interface. I also added in reveal and hide buttons for the ‘Model’ screen where there was surplus text to streamline the interface.Screen Shot 2013-04-14 at 16.22.17 I was still not happy with the home screen, as I knew it was not premium enough for the audience I was targeting with the ‘buttons’. I took inspiration from the ‘soft-key’ controls either side of the main touchscreen the Range Rover has, and removed all the ‘buttons’ that were there, just leaving the text. From there I realised the text size needed to be larger for greater aesthetics and legibility, so I made the wording far more concise, only choosing just one or two words to summarise the function. I then added some faint dividing lines to add some structure to the screen.

Screen Shot 2013-04-23 at 10.49.14

It was also the first screen I tried the Nexa Light typeface on, and I was really impressed with how it appeared. The trick I have found is the light stroke means the text size needs to be large so it doesn’t get overwhelmed by the black background. The reason why I changed from Helvetica was that, as I wondered during the typographic research I did, was that it was too clinical, and not projecting a premium feel. However, I think it will still be used for copy text in the app.

Screen Shot 2013-04-17 at 09.52.30 I also applied this new typeface to the launch screen, and used the bold weight of the Nexa typeface to be the new heading on the screen. The bold weight works well with smaller titles, giving strong colour to the type. This typeface gives the app design a unique characteristic but again, still fits in with the iPhone interface elements users are familiar to. Screen Shot 2013-04-17 at 09.53.26

After that, I wanted to make the icons for the menu bar. The reasonings behind the exterior designs I mentioned in the last blog post. I am really pleased with the way these have turned out, being simple, yet attractive.

Screen Shot 2013-04-23 at 11.08.02I also needed to design some interior icons. For the main interior choices section I chose a steering wheel as it’s a recognisable, key part of the interior, especially in the dual-tone finish with most interior choices. For the seating icon, I chose to make a simple side-on view of a seat. For the icon that would represent the ‘finishers’ (veneers) I needed something to represent the variety of finishes and patterns available. I had the idea of creating a pattern that looks similar to a basic stencil template. For the headlining I was really confused about how I would represent this, as they are so large, and can either be fabric or leather, which bought me neatly to the leather icon, which also has connotations of the large size/shape of the headlining.Screen Shot 2013-04-23 at 11.07.42

These are the other screens I designed for the exterior part of the app, and I was pleased with the way these turned out. It looks a bit basic currently, but I’ll improve the designs later on.

Screen Shot 2013-04-23 at 11.09.38

For the ‘Roof’ screen I needed to edit an image to make it suitable for use. To do this I found the image I needed in the press pack, opened it in Photoshop, and brushed out the background with a white brush, changed the colour to orange using an orange brush with the blend mode set to Multiply, and did the same for the roof, but with a black brush, before adding a Gradient Overlay so the back of the roof is lighter. More about the techniques I used can be read here.Screen Shot 2013-04-23 at 11.08.41 I am very pleased with the end result, and the feedback I have received has been extremely positive, with people surprised to hear the image is edited by me. This gives me confidence in my editing skills to ensure the app looks as good as possible.Screen Shot 2013-04-23 at 11.08.48

I then moved onto creating a settings page, which I wanted to be as simple and intuitive as possible. As there are two options for each measurement the audience may want to see for the vehicle information, I used the toggle switch in the GUI pack I downloaded and edited it to fit the intended purpose. I am pleased with the end result.Screen Shot 2013-04-17 at 13.42.30 I then started working on the interior, using all the design touches I had previously implemented, so this was quite smooth progress, and able to be realised in a concise timeframe. The first screen was logical enough, but the second screen needed some thinking about as there was only one option, which the user would either select or leave. This made me think about the style of icons I could use, and tie that into the options screens which would be in this format. I chose to use two icons, the green ‘add icon’ in the pack and changed the blue ‘arrow icon’ into that of an info icon where the user can find out more information about the option.Screen Shot 2013-04-23 at 10.18.14 Below is the other interior screens, where I tried a new style of scrolling. Instead of the iTunes style I had used for the exterior colour swatches, here I was thinking it might work in a circular style instead, as I feel this looks slightly more sophisticated and perhaps, more individual to the app, rather than mimicking the iTunes format?

I also designed the structure for the Options page, which is designed to be very easy to use, with an image of the option, the name and price, a add/remove icon and an info icon, which I guess will bring up a pop-out panel with the information when I get around to designing it.Screen Shot 2013-04-23 at 10.18.28 I had also just started work on the locating a dealer part of the app, which was getting there very slowly when I needed to stop all app development for the next couple of weeks, as the brochure suddenly became top priority, with an urgent deadline I need to meet, which I’ll talk about in the next blog post.Screen Shot 2013-04-23 at 10.18.37

So what does this mean for the app design? Well, I’ll return to the app design once the brochure is completed, and there may be design changes needed depending on the design of the brochure, but I am pleased with the progress I have made, and that when I return to it, I know I have the vast majority of the app’s structure in place.


One thought on “FMP: The app design so far…

Comments are closed.