UX/UI DESIGN College project

The Brief

Project: Developing and Prototyping a mobile application

The project brief is to 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.

There are four Learning Outcomes and at the end of the project you will be able to:

1. Evaluate the purpose of storyboards in the creation of a new media solution.

2. Produce a series of storyboards to a given new media brief/s

3. Select storyboard concept/s for a final prototype

4. Create a screen-based prototype for a new media design solution to a given brief/s.

You will research, design and prototype a mobile application. You will use Adobe Spark Page to document your process and post your Spark URL on MyCity, along with your digital files.

Site map

initial idea for the layout and pages that will be in the app.

Paper Prototypes

First idea for app layout, includes hamburger icon and allows user to login or browse as guest.
Second idea for app. Does not feature a hamburger icon and requires user to login at start. Has a "dashboard" style home page theme instead of hamburger menu. Logo at top takes user back to home page where they can access the other menu items.

Wireframes made in illustrator

Navigation map

Create a mood board

The visual style for the Interface will involve researching imagery. This is to be in the form of two A2 mood boards, each should be a collage consisting of images that evoke the feel and look of the interface, include your name in each moodboard.

Moodboard 1

This moodboard shows a student accommodation bedroom. I chose to use an image of a room which was gender neutral and would suit a majority of tenants. There is an image of a train and train tickets. This is to show that the student may travel to uni or between their dorm and home. They may use the app at home or on the go while commuting. I included an abstract pattern i liked and a desk space that shows how the student may personalise their space.

Moodboard 2

Below is my second mood board. It shows apps and devices which a student will likely use frequently. I have included 4 different icons from top apps, they are all instantly recognisable but all very different. A bedroom and desk space has been included again to show how a student may use these spaces and personalise their room. Several geometric patterns have been included as these are very "on trend" in modern spaces. They are gender neutral and would work well in the app for a background.

Create a style tile

The next step is to develop two A3 Style Tiles. Each in response to your mood boards. Your style tile should show consideration of colour palette, textures, fonts, interface elements and a logo. Developed for use in the completed app. Include your name in each style tile.

Style Tile 1

This is my first style tile which shows a logo concept for my app along with various other identifying features. I chose strong but muted colours that are not too hard on the eye and have used a lot of rounded buttons and icons in this design to make it more friendly and inviting. This is in contrast to the logo which uses angular and sharp lines, however i have made the mobile app icon round as it may appear on the phone.

Style tile 2

This is my second style tile, which is the style i went with for my app. I chose a reduced colour palette but with a bold mustard/yellow which makes it stand out. I used a dark grey instead of black in the design to make it easier on the eye and less high contrast but it is still striking. This design is more industrial than the previous one using a distinctive, striking font and featuring heavier and sharper icons. There is also a smaller icon which will show what the app looks like on the device before opening. This features the yellow and grey colours that will hopefully stand out on a phone, reminding the user to open the app more frequently.

Two different visual mock-ups

Below are the two apps visualised on real phones. This shows what the final product will look like and helped me decide which design to chose. After seeing both i decided to use the yellow and grey theme from the second style tile as i feel it looks more relevant to design trends now and what users expect from this type of app.

These are the final, coloured artboards of my app design in illustrator.

The final, working app.

This is my final, working app. The design was made using adobe illustrator and the working version was made using InVision. The final app can be found at the following link: https://invis.io/729DRS1XY

Credits:

Created with images by LoboStudioHamburg - "twitter facebook together"

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.