UX to UI Freshman Letting - New Media

App Proposal

Problems

  • Finding flat mates
  • Location
  • Price
  • Rent type/what is included
  • Parking
  • Bad landlord
  • Flat mates

Priorities For Landlords

  • Pay rent on time
  • If employed or not
  • Tidy
  • Pets
  • Room occupancy

App Issues

  • GPS
  • Filter options
  • Images from people who stay there/professionals
  • Profile (landlord & tenant)
  • Log In (email, facebook, gmail)
  • In app chat
  • Tutorial
  • Help section (FAQ)
  • Regular updates

App Persona

Student Specific Landlord & Mature Student

In week one we had to create two personas that would give us a rough idea of how what our target audience would be. I chose to write as a landlord and as a mature student. I feel this was a useful exercise as it allowed me to get into the mindset of my target audience, it also helped me to come up with some key features that i would need to include in the app to make it a great user experience.

Card Sorting

In this exercise i had to create categories that would then be put into my site plan. Once i had chosen my categories i decided to test the structure on 3 people to see if they would come to the same conclusion as myself on the app structure. They did.

Site Plan 1

Once i had decided on my headings i created a site map for my app detailing which information i would have and where you could access it from.

Paper Prototype

To ensure that my user experience was good, i created paper prototypes to try out on another 3 people. This exercise allowed me to see where i was going wrong with my user experience.

Site Plan 2

Following the paper prototype exercise i made a more detailed site plan.

Wire Frame Using Adobe Comp

I used the Adobe Comp app to make my wire frame. This helped me visually see where i would be placing buttons etc in a quick and efficient manner.

Mood Board & Style Tile 1

My inspiration for these came from the feeling of freshness, cleanliness ad sophistication.

Style Tile Mood board

Mood Board & Style Tile 2

My inspiration for these came from all things vintage.

Style Tile Mood Board

App Design 1

My first design created by my vintage inspiration. I used my style tile and mood board for inspiration, looking closely at colours and texture.

This was my first splash screen design idea. I decided i didn't like it and developed it further. Still keeping the triangle look.
I chose the splash screen, search page and the profile page to show how my design would be carried through out the app. For the app layout i went for one i decided on my own rather than going for what people are used to with current applications. There are also subtle design hints that relate back to previous versions of apps e.g the top of the profile page is how the old Instagram looked before a recent revamp. Keeping with the vintage theme.

App Design 2

My second design followed the structure and design of my more modern style tile and mood board. I focused more on how the app was presented in this design.

My first splash screen looked at the use of texture and how colour could convey this. I decided not to choose this as the final because it does not represent the sophisticated, fresh look i wanted.
I chose the same 3 pages to represent my design. In these pages i looked to more modern applications for inspiration such as Facebook, Twitter etc. My aim for this design was for users of the app to be familiar with the layout. Meaning they would know how to use the app before they had even had a chance to go through it. This lead me to introduce a menu to the bottom, and make some stylistic changes to the way information is presented.

Photoshop Mock Ups

I created these photoshop mock ups to show what my app would look like in a real life environment. These were then later shown as part of my presentation.

Created using Adobe Photoshop

Presentation

Once i had created my 6 mock ups i was inited for an interview with Paul where he asked me questions. I then presented him with my 2 app designs and pitched them to him as if he were a client. We both agreed that i should develop the more modern app further.

Site Plan 3

When creating my modern app i added in a few features which would resulted in the removal of some pages, altering my site plan.

Final App Design

Continuing with my design concept i created a the rest of my pages; the final outcome shown below.

Developing A Working Prototype

Using Invision i created a working prototype for my app.

https://invis.io/MY9H3LXTD

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.