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.
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.
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.
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.
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.