Developing and Prototyping a mobile application New Media Project

Week 1

On the first week, in groups we began to talk about what users would need in the app. The app we were asked to create is a letting app that both Students and Landlords can use to Rent and Advertise properties. From this we went on to research what people struggle finding in current apps and what people would generally look for in an app for finding accomodation.

I then took the information we found an developed two personas of people that would use the app often. This gave me a better idea of the target audience and also what would be most important for creating the app.

This is the persona's I created for both a Landlord & Student.

Week 2

I then created a wireframe/sitemap, to begin with in a group we looked at a simple website and broke it into different pages looking at what was on each of the pages. From this we then started to write down what pages we would need in a letting app that has to apply for both Landlords and Students.

I then wrote down all the headings for each page I would like to include in my app, then seperating these pages onto small bits of paper. I took the bits aof paper to 3 different college students and asked them to sort them into the order that they would navigate through the app, removing any of the pages they fealt were unnecessary.

3 different students placed them in the order they fealt relevant.

Paper Wireframe Example

I then made wireframes from the information I gathered from other students.

Final Wireframe made in Illustrator

Next I made a paper prototype of how each screen will have the buttons on it, this gave me an idea of how you would move through the app. The paper prototype helped me see what was needed and what wasn't necessary.

Week 3

Week three I combined my wireframes and paper prototypes and made it into a Digital wireframe with each screen on illustrator using no graphic design, just each button that will be on each screen.

Week 4 & 5

Now I know what pages I am going to have on it, I then created two A2 Moodboards thinking about 2 individual styles that my app could finally look like. To make these I thought about colour, pattern, texture and button style.

2 different A2 moodboards

From my moodboards I then created 2 A3 style tyles defining both different style for the two ideas. From my moodboards I took colour, texture, created adjectives, button styles, different type and background styles.

2 Different A3 Style Tyles

Week 6

I created 3 mockup screens for both designs from the style tyles I created, looking at how the layout would be with buttons and images.

Different Screen Mock ups

Week 7 & 8

From my chosen design layout I then created my screens for each page in the same style. Once all the screens were created in Illustrator I moved them into Invision and creted each button to move between the screen for the final app. This making it a working app prototype.

App screens on Invision

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.