UX to UI Project By declan paterson

Defining the problem

Students need a mobile application for viewing and renting student accommodation, local to Glasgow and Edinburgh. Landlords also need access to the application to update any existing lets and to place new lets.

Features Included

Notifications, map of area(places to eat/drink), search filter, direct messaging, sign up, profile page, login/logout, rating scheme, create account, Prices, list of properties(post properties/edit).

Developing Personas

We were asked to develop 2 personal personas of the average user who would access the app. This was done to give us a better understanding of what the main functions of the app would be.

Creating a Site map

During week two we were asked to develop a site navigation map for our app. This was developed to show how the user would move around the application.

Our first task was to get user feedback from 3 people. for this we wrote each part of our site map on to sticky notes and asked 3 people to sort them into categories of their choosing. We would use this feedback to develop our final structure.

arranged by common grouping.

Using our feedback we created our final app navigation map using Adobe illustrator.

Paper Prototype

We created paper prototypes of our app to get users to test it out. We would use any feedback to make any changes to issues that may need to be addressed.

Digital Wireframes

After we had our final navigation, we then created digital wireframes to show where our final elements would be within our app. this was done using Adobe Illustrator.


We then had to develop two A2 moodboards that would help us develop the overall look of the app. Looking at different imagery to inspire our final look.

A3 Style tiles

We created two A3 style tiles looking at different color palettes, textures, fonts etc. this would help to define our final look for our app

Presentation Mockups

after creating our mood boards and style tiles, it was time to create two presentation mock-ups of two different Ideas. Both concepts are based on flat UI design with some different features and navigation system. I also experimented with two very different color palettes.

Landing Page
Home Page
Direct Messaging Page
Landing Page - Concept 2
Notifications Page - Concept 2
Direct Messaging Page - Concept 2

Feedback for both concepts were good so I decided to choose the best features from them both and make it into one.

Finished Screen Layouts

Thanks for viewing!

Created By
Declan Paterson

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.