FMP – Final Prototype

Below is a link to the final prototype, designed in Sketchapp, and made in Invision.


My final major project has really developed my skills as a designer, opening new opportunities to learn new software skills to push my designs even further. My ability to use After Effects to animate screens has opened new opportunities for me, and look forward to new projects I can use these skills in.


FMP – Prototype Development – Invision

Working in an organised fashion, I created order between the screens in the dashboard, making it easy to understand the userflow, and not getting confused between screens.

Screenshot 2018-05-31 16.00.58.png

During this process, new ideas sparked about how to transition between screens, and animate, increasing the user experience to a new level. This is evident in the take a selfie screens, where I animated a white screen between two other screens. This was done by creating a new artboard in Sketchapp, and filling it with white and reducing the opacity slightly. I then exported this element as a PNG file, maintaining the transparency effect, and created a timer in Invision, transitioning quickly to the next screen “continue”.

Screenshot 2018-05-31 16.04.17Screenshot 2018-05-31 16.04.28

FMP – Prototype Development – Sketchapp

Now normally I’d be panicking about leaving the prototype to the final day to complete. However, I already had the bare bones and structure to the design, so really, all I had to do was follow the story, and create links between the screens I had created in Sketch.

After animating my screens in After Effects, my Sketch app file was all over the place, and had been dissected and moved around to export all the elements. So I decided to create a duplicate file, and tidy up the screens, showing the user journey from start to finish.

Screenshot 2018-05-31 15.54.11Screenshot 2018-05-31 15.54.15

Using Invision and the Craft plugin, I was able to quickly make changes to the design file in Sketchapp, and sync the changes directly to my prototype, allowing fast workflow.

Screenshot 2018-05-31 15.58.01.png


FMP – Prototype – Animating Intro Screen

I’m prototyping my screens in Invision, and this is good in some ways, however, it doesn’t support video which is quite annoying for animating. However, the way round it is to create a GIF in Photoshop after creating the animation in After Effects.

To do this, I exported the elements of the design I needed from Sketch app, like the background plane, and the animated elements that lie on top as layers.

Screenshot 2018-05-31 15.45.07Screenshot 2018-05-31 15.38.18Comp-1.gif

I created key frames for scale along time to create a pop effect, and then moved the position of the enter button from below, creating interest to the call to action.

I rendered the video as normal, and then imported the video composition into photoshop, where I was then able to export as a gif, ready to put into my Invision prototype.


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 – Existing Shoe Companies Research

To further understand my audience, I wanted to look at what other established shoe brands are doing to target their specific audiences. This will give me an insight into what other brands are doing well and not so well, and attempt to design a better platform for the end consumer.

Nike App

Although the app is incredibly easy to navigate, it feels very sterile, not very exciting, and too clinical. These ideologies represent the Nike brand well, showing speed and efficiency.

The imagery used is very “cool”, showing you males in provocative, moody poses, highlight the shoes, but providing the audience with an aspirational image that, by association, makes the brand “cool” and youthful.


The user can easily navigate through the app, finding product ins specific categories. These categories funnel the user down, to show them products they really want to be seeing.


Again, the product detail page is very stripped back, simplistic, but serves a purpose and ties in well with the brand. The navigation is consistent throughout the design, making it easy for the user to navigate through the app. The price of the product is always visible at the bottom of the screen, making it easy for the consumer to purchase the product at any point of the during scroll.


Nike Running Club App

Like many apps I’ve looked at, intro screens usually help the user understand the conventions of the app. It shows the user how to use the app, whilst also setting up an account to store personal preference data, such as specific interests, show size, location services etc. This information is then stored, and can be used to push specific products to consumers based on their personal interests.



A more stylised approach, giving a bespoke, designed feel to the app and brand. To the consumer, this gives a sense a personalisation, something the consumer craves. The sharp diagonal lines encourage the notion of speed, something performance sports brands seem to have in common.


I like how many of the apps use a very neutral colour, such as whites, greys, and blacks, that draw focus to the shoe its self. Other colours could distract the consumer from the main focal point, and this could translate into a mis sale.


Infographics and reviews provide the consumer with previous customer experiences with the product, providing justification and reassurance about to the consumer.

The consumer can choose from the following categories to score out of 5 on the scale:

  • Size
  • Quality
  • Width
  • Comfort

Overlapping elements provide a further stylised feel, reducing the opacity to draw importance to the darker text.




This process has been really useful to see what’s already been done. Recently, I watch a TED talk about the development of ideas. Many ideas are usually solid, for example, the concept behind MySpace, Bebo, was actually a great idea. Social media boomed around this time, but facebook didn’t jump straight into the social media market. They saw what Myspace and Bebo were doing, and looked to improve on the platform to try and appeal to the mass audience. The UX of MySpace wasn’t the best. If you understood MySpace, you were considered a social media genius. Facebook developed their platform, changing an idea that had already been invented. Today, Facebook is the largest social media platform that has continued to innovate and grow as an organisation.

My point is, their are sure to be a huge amount of shoe apps out their doing a similar thing, but how can this be improved upon. What can I do differently to the my other competitors that will make me stand out. These questions are to be considered in the early stages of the design process.

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.