Rollup Banner

The rollup banner concepts for the exhibition have been designed in Photoshop and presented on Photoshop Mockup representations. I decided to design to a two banner concept design, this was due to looking other inspirational concepts. Two banners allow for more content spread and a good design. For both banners, I included a top banner strip which includes the logo, app name and block colour. Then in the bottom of the banner there is a download on the app store icon, website address for the project and social networking icons: Facebook, Twitter and Snapchat. In the first banner I used a Photoshop Mockup of the home page of the app. Then for the second banner I used Instagram fashion imagery, concept overlays representing features in the app as well as loading style squares highlighted in a block blue.

Please see my rollup banner Pinterest board for my inspiration thoughts.


Buisness Cards

In designing the ‘I’m Wearing This’ Business Cards, I started developing ideas in Indesign. For the front of the card I chose to utilise the symbolic view of the app icon with the title as underlaid text. The front of the card is a matte black design with a light blue shiny gradient. The back has a gradient blue full background. Font styles include: Futura Bold, Futura Condensed Medium and Helvetica Neue Thin. In the blurb, I have my name, industry defined areas, course title, mobile number, email address and website address. The back of the cards blurb is aligned to the bottom which gives a clean look to the design. A Photoshop Mockup was used for the presentation of the designs.

Business Card Mockups2Business Card Mockups3Business Card Mockups4

I took inspiration from the following designs:

I’m Wearing This – App Design

Splash Screen

When developing the splash screen for the app, I utilised the logo icon design as a central image within the splash screen and applied the app icon colour gradient to its’ background. Alongside this, I placed the text ‘I’m Wearing This’ to the page and developed two separate designs with the font style Sans Serif in a variant of size and capitalisation.  The designs were developed to the iOS 10 iPhone GUI on Photoshop and it was constructed onto the white iPhone 7 smart object. I have chosen to utilise the second layout  design for the project, due to the text coming across clearly and being separated with extra padding from the logo.

Home Page

The Home page for the app consists of a large search bar which is situated at the top of the screen, a news feed of trending images of fashion represented by the consumer taken from Instagram, like buttons along with brief Instagram user profiles. Moreover, there is a navigation menu at the bottom of the screen with four individual icons. The navigation menu includes a home page icon (house), an explore  icon (magnifying glass),  a clothing search icon (hanger) and a user icon (silhouette of a person). The navigation menu is designed as a translucent blue bar which fits with the specified colour scheme and the icon images themselves were founded on

Explore Page

The Explore page incorporates two images on one corresponding line repeated vertically down the page. These images, are pulled from Instagram to the app through a variety of received and searched fashion related hash tags. When an image is tapped once, it will show the image title, relative tags, quantity of likes, like button as well as a share button. After tapping a second time, it will then take the user through to that specific image page. The search bar and navigation menu is designed and displayed as per the home page.

Clothing Search Page

The below image presents the user pathway once the user has selected (tapped) the hanger icon. The user is first presented with a screen of selection criteria which includes: categories, colours, occasions, seasons and trends. From there, once the user has tapped on a selection the selected field will blur and have a blue overlay effect on top. It will then take the user to the selected search and present the user with more selections of tags so the user can narrow their search further, this can be used through swiping to the left to reveal further tags and selected by tapping on a tag. Furthermore, the search tags will list images from Instagram which are contained within the specific search tags. Again a small user profile will be shown, a like button, the quantity of likes, a share button as well a user follow icon. Lastly, once the user has selected a particular image it will take you to the specific image page, which will display all the tags associated to that image conveying users information such as #topshop #playsuit.


User Profile Page

The User Profile page will present the logged in users Instagram profile photo,  personal information taken from Instagram and a private information section which the user can fill in once in the app by clicking on edit profile at the top of the page. In edit mode the text will highlight and users will be able to edit the text and then tap the ‘done’ button to complete the edit.


App Showcase


I’m Wearing This – Logo Design

In designing the logo for my app the key perception I wanted to portray was ‘I’m wearing this’ but as an image and icon. is a site which was utilised within the development as a resource for icon selection. On the site I looked at a variation of imagery including: dresses, shoes and hangers. After testing, I decided that the hanger icon worked best with the overall concept of the project and the addition of a snap like square overlaid on top of the hanger demonstrated the action of taking a photo/snapshot of a particular clothing outfit. This presents the idea of ‘I’m wearing this and here is a photo of me wearing it’, clothing presented by the consumer. Furthermore, in the design of the logo I configured the app icon to a assortment of sizes to exhibit the composition per dimension of device and each app icon was developed on Photoshop utilising the standardized icon template for Apple mobile. The icon itself, incorporates a blue gradient light to dark (top to bottom) corresponding to the specified project colour scheme.



I’m Wearing This App


An online fashion outfit performance stage, the ‘I’m Wearing This’ app consists of an integrated Instagram API, which feeds live images to a page through selective search criteria. These clearly defined images vary across fashion brands and products bought by the customer and represented by the customer, through personally owned photography. Influential pieces which have informed the project include and Pinterest, the broader concept of todayimwearing is to be expanded to allow users to compare contrast and examine fashion much in the way that Pinterest allows users to collate content. However, while Pinterest allows the static comparison of content, ‘I’m Wearing This’ will pull categorised feeds from Instagram. Furthermore, in narrowing the user search, the considered utilisation of tags through genres (gothic, vintage) and emotions (angry, romantic, prim, demure) will be implemented.

The materials that will be used within the project that I don’t possess license to, include the hash tagged fashion Instagram images. These images are live on social media (Instagram) and my aim is to pull these images onto my site as a live feed direct from Instagram. Therefore, no ethical issues should arise, as I will be adhering to all Copyright and Protection laws.

Time Management

A Structured timeline will be adhered to throughout the project and updated on an ongoing basis for the duration of the project.


Target Audience

Female gender, age groups  21-25, target profile self confident individuals, fashion led, have key interest in fashion blogs, financially secure with disposable income a frequent user of both her mobile and or laptop.

Desirable why?

Allows for the exploration of fashion through customer performance, previewing pieces of fashion that have been bought and styled by the consumer. I will modify my work to fit the target audience through style, colour design, contextualization of themes and genres in narrowing the user search.

Adyen Payment Gateway

In moving onto UX design, my first initial task was to re-design and develop the Adyen payment gateway on the checkout of the River Island Website. This was to ensure that the journey for NL (Netherlands) customers who use the iDeal/Adyen payment path is consistent with the current RI checkout design.

Below is the current Adyen Payment Gateway:


This gateway needs to flow and be consistent with the previous check out system step, which is demonstrated in the below:


My final design for the Adyen payment gateway was created in Photoshop and is presented in the below graphic:


In development of this I ensured that the colour scheme (green, black, grey) and style of the checkout was consistent and carried right through to this final step. Key aspects included in the design were box icon buttons, payment bank icons and a clean drop down menu.

Gooseberry Hair Salon Website

I was given the following brief to create a visually exciting site that highlights Gooseberry’s prices and details but in a unique, creative way. Gooseberry Hair Salon is a unisex establishment which cuts for 90% women, 50% of which are between 30-50 years old and around 25% are in their 20s. The desire is to be seen as creative and deliver a non-standard ‘experience’ without hiding important information or alienating the older customers. To attract new clients from primarily the Tony & Guy in town and reflect their stylish salon online. The website sections and functions should include latest news, contact with map, treatment room details, the team, promotions, price list, products and careers.

A week was given to answer this brief to see how I would not only approach the brief but also my process of idea development. My first step was to research various high-end hair salons within the London area to find inspiration and create a moodboard which highlights these various concepts of web design. My key focus was to create a clean, simplistic design which ties into the target audience and corresponds to Gooseberry’s logo colour scheme. Below is my inspirational moodboard which I created in illustrator:


My second step was then to take this inspirational thought to create and develop my own structural web design wireframes, I did this through firstly drawing my ideas and layouts into a sketchbook and then developing these further by finalising the structures in Photoshop.


In addition I edited the photography which was given by the salon in Photoshop to help demonstrate the proposed ideas of flash animations and photographic layouts as shown below:

03 02 01

My next step was to develop in Photoshop the proposed page designs for Gooseberry Hair Salons home page, salon page, team page etc. Below are the various designs I created; I looked at mobile designs and layouts to suggest suitable responsive alternatives to the proposed pages. Overall I believe this project was a success and these ideas could be developed even further to create a final proposal for the Gooseberry Hair Salon website. If developed further I would look at typography designs as well as overlapping layers to create a strong final concept.