UX to UI PROJECT HND digital media

Project: Developing and Prototyping a mobile application

The project brief was 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. This process involved researching into our target market and the existing application market.

My App Proposal

  • A user friendly experience that is functional for all tech levels
  • Clear crisp design that works in the current design and application market
  • Easily navigated plan that can be used with great ease
  • Friendly design that works for both the landlord and the student
  • Dual functions such as payment and housing search capabilities
  • A clear design that is clutter free and straight to the point visually

Persona Creation

This process required us to create personas for both our landlord and our tenant. This was to figure out a suitable design for our application that works for all technical levels and is simple and easy to follow with a friendly interface.

Tenant and Landlord Persona

Persona's one and two

Sitemap Development

Here you can find my sitemaps. Initially I planned it out based on how I felt it should be arranged and work, however after our paper prototypes and delving deeper into our research we refined our first sitemap and came up with a revised finalised sitemap.

Initial Sitemap

Sitemap one

Finalised Sitemap

SITEMAP TWO

WIREFRAMING

To begin and further our design we had to create wireframes using our sitemap, the wireframe was crucial for our design as it was essentially the basis of our design and a very important part of our development.

My Wireframes

MY A2 MOODBOARDS

At this stage we developed moodboards to get a feel for what we were going to design and how we were going to approach creating a visual for our application. This began with researching into design styles and other visual elements.

Moodboard One

This moodboard focuses on a very homely earthy colour pallete with lots of earthy tones and textures, things such as wood, coffee, wolves and sand are all included within this moodboard.

Neutral Moodboard

Moodboard two

This Moodboard focuses on bright vibrant colours such as sea blues and the bright vividness of raspberry's and flare smoke. I like this moodboard for the sheer variety thats included.

Vivid Moodboard

My Style Tiles & Brand Logo

After creating our moodboards we were asking to further develop this process into creating a more refined visual style in the form of two very different style tyles that would later be used in creating our concepts. The Thing I did first however was create a logo that would be used for my application, I decided on the name "UNITE"

Style Tile One

Neutral style tile

Style Tile Two

Vivid style tile

Application Logo

Created this logo as part of my application because I felt it needed a nice brand to go along with the design, I am really happy with how it turned out and the subtle aspects of it work really well in my opinion.

Mockup Designs

At this stage of our process we now had to create a few mockups for each design style to find out which style would be most effective for our project. Three mockups were required for each and then feedback was given to us by our course lecturers in order to find out which design would be most effective for our application.

Mockup Designs

Some of the mockups I created for my project

Feedback

After getting feedback from one of my course lecturers and taking their advice into consideration I decided to go with my second style of design which features the Futura family as my typeface and a contrasting blue, red and white design pallete with a very minimalistic style which I felt worked extremely well.

Final Screen Creation

So at this point I was now onto finally designing my final application design, I was aiming to create 10 to 12 screens maximum. This was effective as it meant I could create a strong design that was effective and answered the brief while looking professional and clean. I also had to keep in mind the size of my design and to work this out I used InVision to constantly test my design. Remember this design is considered a Beta version and thats why not all buttons and widgets are functional. the design is just to show the basis and effectiveness of the design.

Splash Screen, Register and Log in Screen.

Please take into account spark has cut off the bottom of my screens. Full screens can be seen in InVision. Link at the bottom of the page!

Home Screen, Profile and Payment.

Remaining Screens

InVision Prototyping

InVision Prototyping and Fixing

This part of my design was final testing, using InVision we animated the application and were able to see how it looked on screen and if it was functional. This process was very tedious as we had to account for every aspect of the design and figure out what screen should link to what and how it should look when transitioning. Overall I am happy with my final design. Below you can find the InVision link to test it for yourself. I would recommend testing this via the InVision application as the desktop site is very slow and laggy.

Please note: InVision does not have a back screen function that I could find. To go back on any of my screens simple double tap and you'll be directed to the home page!
Created By
Craig Murray
Appreciate

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.