UX to UI Project Nicole waters

Week One - Developing Personas

We worked in a group to define the problem then worked individually to create our personas.

This is Joey, he is an international student looking for accommodation.

This is Monica, she is a new landlord and is looking to let out her flat for the first time.

Week Two - Creating a site map

I created sticky notes of pages and asked students to arrange them the way they would navigate through the app.


After this task was completed I then created a sitemap based on which page was put in the same place the most. I also removed pages that people felt were unnecessary to create this final sitemap.

Paper Prototyping

I created a paper version of the complete app. There was no graphic design at this stage nor did I add colour. I used this to help the myself and several users test that it worked and what pages I could still eliminate.

Week Three - Developing digital wireframes

After getting 3 people to test my paper prototype I then created a wireframe on adobe illustrator. This gave me an idea of layout and time to create my own logo, illustrations and ideas for layout.

I kept to using basic shapes and no colour for these wireframes so that I could develop them further at a later stage and add colour after the appropriate research was done.

Week Four and Five - Developing a visual style

For this task I was to create TWO A2 Moodboards and TWO A3 Style tiles.

Moodboard One - Using purple as my colour scheme

Moodboard Two - Using Blue as my colour scheme

Style Tiles

This is my first style tile based on Moodboard One

This is my second style tile based on Moodboard Two

Week Six - Developing a presentation mock-up

I was to create a 6 page PDF of A3 images and annotate them accordingly

At this stage, I created my mockups using a copyright free images of an iPhone and placed my screens on them using photoshop. I done this by using layers and distorting shapes and adding layer effects. I also decided from here which idea and colour scheme I liked best. Purple was my choice as the colours are gender neutral and the idea behind it with the folded paper effect is to subtly show that the app has been created to prevent all unwanted paper work for renting or letting a flat.

Week Seven & 8 - Create a working prototype

This was done on Invision and had to have a minimum of 10 screens. Through Invision I could also make my prototype interactive and test it on my phone when completed.

Once put into Invison as PNG's I was then able to edit them and add gestures, interactions and navigation. This process was made simple with the Invision programme as you could add these things with the click of a button.

The eye meant PREVIEW and the screen image is for BUILD MODE

The highlighted blue box is where I added the navigation to and the green is the same except it is a template so I can use it on several pages if I wish to.

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.