The Brief

The project brief was to create prototype for a Student Rental Accommodation mobile application, local to Glasgow or Edinburgh. Landlords would also need access the app as they can post properties for sale and keep in contact with applicants.

Week One

The first thing we were to do was a group task. We had to discuss what problems the users might have already and see if we could make our app a solution to these problems. We first outlined areas of the app that the students would need, along with the areas that landlords would need. We had to always keep in mind that the app was to be used by both sets of users.

Once we had finished the group task it was onto the next stage, developing personas. This was to be done individually. I took on the role as a student and came up with a persona outlining problems I would have when moving to Glasgow from another city.


Week Two

Creating a Site Map

This week we were starting work on our app site map. This is where we consider how the user will navigate through the app and to get a general structure as to what pages will be linked.

Group Task - Deconstruct a website

This group task consisted of deconstructing a website and drawing a site map for it. We had to begin on the homepage and click on the pages we could see along the top. We then had to follow where that linked us to and draw the page structure.

This was a really good task as it got us thinking about what aspects of the website we liked and what we didn't. There was a lot of 'Sign Up Now' buttons throughout the website that really annoyed us and it was definitely too over used. It was also good to see how the final structure turned out. We could see the hierarchy of the website and how they grouped certain pages together into common categories. I feel it was definitely a beneficial task.

Individual Task - Card Sorting

This task was reflecting back to what we done in Week One. Referring back to the group task of outlining the app features, we were to write these out on bits of paper and find 3 different people around the college to sort them into categories that they thought went together. We were asked to photograph each result so we could then compare them and see what features kept being paired. The feedback would then in turn make way for our app site map.

User A
User B
User C

Week Three

Paper Prototyping

At this stage we were to begin creating a paper prototype of the app. This was just to gain an understanding of where elements would be placed on the page, there was to be no colour or design to be done at this stage.

Once the paper prototype was finished we then had to get three different people to test it. This was to make sure we had the correct pages and to see if the users could navigate through the app correctly. If they got lost or asked where something was I then took a note so I could add these in after the test.

I realised that during this process I was missing a few pages so I had to add them in. This of course changed my original site map so I had to finalise a new one at this stage.

Developing the digital wireframes

Once I was happy with the final paper prototype and sitemap it was time for me to make the digital wireframes. I decided to use Adobe Comp on my ipad to draw each page in one project. I then exported them out as pdf's and into Illustrator where I placed them onto separate artboards. At this stage there was still no design or colour, it was just black, grey and white shapes.

Week Four and Five

Developing a visual style for the app

Up until now I have taken on the role as a UX Designer where I've been looking at the app from a functional point of view. This week I switched to the UI Designer approach on how the app is going to look. My job now is to take my digital wireframes and begin to experiment with colour, texture and typography etc.

First Task

My first task what to begin my research into existing apps and begin to build 2 A2 mood boards. Each mood board was to consist of a collection of images that evoke a certain feel and look of the app. I included images that used a common colour scheme that I liked along with textures/patterns. I also included images of existing apps that I liked the design of.

Mood Board ONE

Mood Board TWO

The next step for me was to create two A3 Style Tiles that explore the different colour schemes I could use, textures, fonts, button layouts and also a company logo.

Style Tile ONE

Style Tile TWO

Week Six

Develop a presentation mockup

Now that I had finalised two different mood boards and style tiles, it was time to actually design some pages of the app. I had to design three pages for both concepts and then present them professionally in an iphone mockup, ready for a client presentation.

Concept ONE

Concept TWO

Client Presentation

I had to talk through each concept with my lecturer, outlining key areas of each concept that I liked and my reason for doing so. We then decided on what concept was the strongest and what one I would take further to develop. My agreed concept was concept TWO, which I was more than happy with. I definitely feel like this was the strongest concept and is the most professional looking. I particularly like my use of flat colours that further helped me achieve the 'flat design' that I was going for.

Week Seven and Eight

Invision Prototype

This week I began to explore Invision, an online prototyping platform. I firstly had to export each of my app screens separately and import them into Invision. Once I had arranged all my screens in order I was now ready to start in build mode. This is where I could link buttons to pages so the user could get a feel of how to get around the app. I really enjoyed using Invision, it was really easy to understand and use. I was expecting it to be a lot more complicated than it was. I was really satisfied with how my app ended up. I was able to get the app onto my mobile as well. I was able to interact with it properly in the environment that users would be accessing it on.

Overall, I really enjoyed this project. UI and UX design was something I hadn't tried before but was really interested in. I really enjoyed the research into the different user interfaces and learned a lot from that. I now appreciate mobile apps a lot more as I can see the amount of work and time that has to be spent on it, even just to complete a prototype and not even a complete functioning app.

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.