The Hive: Flat Rental App There and back again through development stage

Stage 1: Building propable user personas

After thinking and writing down problems user may encounter while using the app (experience based on other rental apps currently on the market) I have made two user personas to understand the social background of the users and what they may be interested in.

Stage 2: Card sorting

The next thing I had to do, was to think over what features I would like to include in the final app. I printed them off and asked three random people to link features that they think should be on the same page/are in the similar category. This stage helps to realise how people are connecting things and what do they expect to see on separate pages.

Stage 3: Site map

After realising what people are expecting when it comes to navigation through the app, I have created a site map. Making it helps to plan how many pages should I prepare and to once again think about the navigation itself.

Stage 3: Prototyping

With my site map ready, I had a vague idea of how my site will be navigated so I moved to the next stage. I have built prototypes of the app without any graphic design involved. I focused on where the buttons where situated, how the menu would work etc.

Stage 4: Wireframe

With my prototypes tested by some potential users, I had to put together all the complaints and things that had been pointed out during the testing phase. For that purpose wireframe was created. Still without any graphic design involved, simple screens representing pages of the app improved and ready to be implemented in the final screens.

Stage 5: Moodboards

Before implementing any colours, patterns or designs to the wireframe, I first had to discover and carry out research into the possibilities. I first started with a mind map to link some words to the to flat renting topic and I decided The Hive would the strongest idea for the name and design. I have also looked into a possible colour schemes and font faces.

Stage 6: Mockups

By combining wireframe and style tiles I came up with a rough idea of how the screens will look, created them in Photoshop and implemented them in a real life scenario. Creating real life mock ups is more to have something to show to the client rather than a part of an actual development process.

Stage 7: Final screens & invision

For the final stage, I had to gather everything I have gathered during the whole process and design my final screens. Taking all the complaints written down during the paper prototyping phase and creating a final menu and a button layout. After an interview with the client, we decided what design we wanted to use. Creating those had been useful for the prototyping in the invsion app. Having completed a set of screens I was able to create web-based prototype ready to click through and to show it to the client.

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.