UX/UI Project Boodle application design process


Following the brief, two personas were created as shown above, each explaining what a potential user of the app and what issues they may face when using the app.
A number of potentially handy application screens, that I knew would be included into the final design no matter what the layout, were scribbled onto iPhone templates following the completion of the personas. I then roamed the upper floors of the college and found three people to sort the cards in to a layout they felt was suitable. I then highlighted the similarities and moved into my initial ideas.
I then sketched a number of key pages and their potential layouts and took to the upper floors of the college once more, this time asking students to test my paper prototypes. I gained a knowledge of what buttons were expected to be in what places and redesigned the app to suit my findings.
Two separately themed moodboards were then generated, plucking inspiring images from the internet and placing them into a structured layout on an A2 Adobe Illustrator canvas. These moodboards would go on to inspire certain aspects of my design.


Digital wireframes were then developed taking into consideration the feedback given to me by other students from the paper prototypes. Each wireframe accurately represents the final layout of the design aside from colours and some other visual components.
Six mockup presentations were created in order to present them to my lecturer, each showing the legibility of text, images and other visual components on screen.
In total, 18 screens were created during the development of the application. Overall, I feel that my design suits the brief well in the sense that it is very easy to navigate and even those with little technical knowledge would be able to use it. It's colour scheme provides a high contrast which helps to distinguish each section making it clear to the user what they are looking at. Each body of text, heading and caption has been tested on an iPhone 5C, which has a considerably smaller screen than the newer iPhone models, to ensure the legibility of the text is clear. The weaker pages of this design, in my opinion, are the profile pages due to the basic content box provided below the sub navigation bar.

Test the prototype!

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.