UX to UI Project heather waller // hnd digital media// DDX68 35 NEW MEDIA PROJECT - LEARNING OUTCOME 1-4

Project: Developing and Prototyping a mobile application

The project brief

Create an interactive prototype for a Student Rental Accommodation mobile application, local to Glasgow or Edinburgh. Landlords would also need access to update existing and place new lets.

App Proposal

"Base" is an exciting new accommodation app which is easy to use and enables users to find their ideal student accommodation fast and hassle free.

With "Base" you can:

  • Find accommodation close to your College or University.
  • Contact your landlord directly.
  • Get notifications of available rooms.
  • Search and set up alerts for rooms by budget and location.
  • View landlord profiles before committing to a lease.
  • Simple secure payment by direct payment.
  • Give feedback on your accommodation.

Card Sorting // Site Maps

Working in groups, we defined the links required for the app and tested the site map possibilities with three members of the public.

Each person provided a different insight as to which links they deemed important.

The results below show the user's card sorting results

Common groups became apparent through user testing. It helped identify the hierarchy of the app and also which links/ pages were unnecessary.
From the user card sorting data, I began building the site map of the page and link structure. I then used this as a guide to sketching out my paper prototypes.

Paper Prototypes

From my initial site map I sketched out a wireframe layout of each page within the app.

I tried to keep the positioning of interface elements intuitive and easy to use for both left and right handed users.

The paper prototypes were tested with various users which helped refine the structure of the app. It was very helpful to gather their feedback as it helped me to strip down the number of links resulting in a less complicated and more intuitive solution.

Wireframes

From the feedback gained from the card sorting and paper prototype exercises I then developed the positioning of content and the general flow of the user's experience by building wireframes for the main pages of the app.

Wireframes: The user experience differs slightly depending on whether the user is a student or a landlord but the layout and design are the same.

Mood boards

For my first design I wanted to create something bright, colourful and fun!
For my second design I wanted to achieve a clean minimal design.

Style Tiles

Based on my first mood board I chose a warm, inviting colour palette. This influenced the design of my icons and logo design giving my mood board an overall friendly and accessible look.
For my second design I wanted to be more on point with a clean minimal solution, influenced by bold Swiss style design. Although this sort of look is popular with retail clothing apps, I think the strong style works well.

Screen Mock-ups

I wanted an 'epic' introductory page to appear when the user opened the app. I used a suitable royalty free image from pexels.com which I think evokes the sense of newly found freedom that students get leaving home for the first time.
After the introductory screen disappears the app starts to guide the user to the relevant interface.
Hamburger dropdown: I kept hamburger menu simple using the main categories determined by the card sorting exercise. I chose a type based approach rather than an icon based layout because I wanted to use icons sparingly throughout the app to achieve a clean design.
For my second design I wanted the home page to appear almost like a web page. At first I created a button linking to the FAQ, after a little thought I think it may be best to replace this with a 'sign in' call-to-action button.
Once the user has logged in the account area displays the relevant icons to differentiate between the functions. I went for bold, chunky icons to catch the users attention without being lost in the overall design.
I tried to retain the same flat design throughout the screens whilst keeping the elements to the bare minimum to achieve an easy to use 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.