FMP – Inspiration – New Balance NB1 Customiser

I found this really interesting shoe customiser on the New Balance Website. I love how the shoes really pop from the background, and the use of shadow underneath gives a realistic feel to the design.

I also like how the user is able to have complete control over each element of the shoe, and has a variety of different views and materials to choose from. I also like the option to share the design with your friends, showing everyone your identity through shoes.

Another feature I like is the users ability to start from scratch on a blank canvas shoe, or adapt a featured design. As the user scrolls down the page, they are able to view more details about the product and materials. The site also suggests other shoes they may like based on what they’ve been looking at on the site.

Reflections

This has given me loads of inspiration for my app. Although this is a desktop design, there are tonnes of elements that I can take away from this, and adapt and strip back for a nice mobile design.

 

Screenshot 2018-06-01 19.42.02Screenshot 2018-06-01 19.39.57Screenshot 2018-06-01 19.39.04Screenshot 2018-06-01 19.42.11

Advertisements

FMP – Button Style Development

In my original designs, I started off thinking very blocky, rigid rectangles that just felt too stiff for the purpose of the design. I wanted to excite, and I think the tone of voice should be loud and exciting and playful. With this in mind, I decided I wanted to use a pill shape for my button style. It has that bubble feel to it, adding to the playful vibe of the customisation shoe app.

Keeping the continuity of the design, I used Roboto, a popular web typeface and sourced from google fonts. Using a google font allows for wider compatibility for different browsers.

I created outlines of the type, which then allowed me to user a gradient fill, the same as the pill button.

The vibrant colours chosen throughout the design, show energy, from a warm pink/red to a cool blue colour. These contrasting colours were inspired by my initial research. I feel the colours really pop on a white background too, which is perfect for my button styles.Screenshot 2018-06-01 19.06.19.png

Screenshot 2018-06-01 18.55.53Screenshot 2018-06-01 18.56.17Screenshot 2018-06-01 18.56.27Screenshot 2018-06-01 18.56.53Screenshot 2018-06-01 18.57.22Screenshot 2018-06-01 18.57.33Screenshot 2018-06-01 18.55.07

FMP – App Scamp Sketchs

I was eager to jump straight into the digital design, feeling excited to learn the new software, Sketchapp. However, I wanted to plan the users journey through my app. I wanted to quickly plot ideas down on paper, so I could make any changes quickly. Although very rough, I know exactly what I wanted to get from each screen, showing features of the app that allows personalisation. The first screens allow the user to create an account. Each screen asks questions to allow the app to learn about the user, and target content according to their interests, gender, shoe size, and availability.

Moving through, I want to show how the shoe could be personalised, showing a blank canvas shoe, in white, and a customised shoe. This first screen has to entice the user, so I intend to show a large shoe, drawing the focus to the vibrant, exciting shoe.

 

img_20180601_1813094331695616054170657.jpgimg_20180601_1813144104623399133858729.jpg

FMP – Rough Storyboarding – Promotional Video

In my mind, I already knew how I wanted to compose the promotional video I intended to produce, but before I dive into the digital design, I wanted to create a rough plan for each screen, considering the user journey and experience.

This allowed me to test compositions quickly, and also gives me something to refer to if I get confused or lost during the digital design process.

Below is an image of the sketches I produced:

FMP – Imagery Research

I have a fairly good idea of the type of imagery I want to use in my design. Appealing to a younger audience, I want to excite them by using imagery that may cause controversy, break social norms, innovating, showing urban landscapes.

Imagery is an important part of my design, as it deImage may contain: shoesImage may contain: shoesfines the audience I’m trying to target. Get the imagery right, and the feeling of the app completely changes.

I follow some good instagram channels for shoes, that helped me gather inspiration for my app.

Image may contain: shoesImage may contain: shoesImage may contain: shoes

Above are just a select few that I looked at. Often, the shoes are photographed on plain backdrops, or blurred urban scenery. This is to draw focus to the main focal point, the bright, vibrant, pristine shoes. Speed and sport is often a common theme running through the imagery I’ve looked at. This is to encourage the idea of competition, endurance, and having a competitive advantage over everyone else.

FMP – Considering The End User

This step is pivotal to the success of the design and the app. Not only in app design, but design in general, considering the end user needs, and what they want to get out of the design.

My research has lead me to identify the audience as having the following attributes:

  • Optimum age – 16-28 – A young demographic looking to give themselves identity and stand out from the crowd.
  • Interests – Sports. Appearing cool. Being different / unique. Popular music. Selling the high life, American style.
  • Colour – Big, bold vibrant colour. Dynamic gradients.
  • Interactions – Instead of design still images, and creating a static prototype that has some small, clunky interactions, I want to experiment with animation, creating dynamic interactions and transitions between screens to try and stimulate excitement from my audience.

The structured analysis of my target audience helps me to understand what they want to see from the design. Moving forward into the digital design process, it’ll be easier to exploit the audience, targeting their needs as a consumer, introducing signifiers that the audience can identify and, by association, link the brand to the “cool” vibe.

FMP – App Mood Board – Inspiration

I made the age old mistake of getting so excited and jumping straight into the digital design, without really doing much research for inspiration or experimenting with ideas. I quickly became frustrated, and one afternoon, nearly threw my macbook out the window. I took myself off and sat in the garden at a pub, flicking through Pinterest, Behance, and Dribbble to gather inspiration, and dissect design, identifying what I did and didn’t like.

The link below shows the mood board produced in this process.

https://projects.invisionapp.com/boards/PQ3N6AIWR4K/

This helped me massively, and was an important part of my development phase. I often become frustrated and quickly look to doubt my own ability, when actually its because I’ve missed a crucial part of my design process that leads me to hit dead ends.