UX to UI Mobile Application Project New Media project

Week One

Identify possible issues, develop solutions.

Task 1- Group Activity

For this task, we were asked to get ourselves into groups of at least four and together, identify any potential problems/issues facing the users and figure out the best ways to overcome them. From these solutions, we then had to think how they could be turned into physical features on the mobile application.

Task 2- Individual Activity

The next stage of the process was to create two personas, showcasing the average user that would use the application. This helped us establish what the key features/functions of the app were. One of my personas was a mature student named Jennifer Williams, she was an aspiring midwife in full-time education with a small family.

Week Two

Create Site map.

In week two my task was to create my application navigation/structure plan. This started off as my first draft but as the project continued, I would revisit it and make changes as necessary. The main aim of the navigation/structure plan was to visually show how a user would move around and between the pages of the app. I used a free website called Lucidchart to build my plan as it is really quick and simple to use as well as looking professional.

Card Sorting Excercise

After referring to our notes from week one, I had to decided how many screens/categories will be in my application. I then went onto writing these on post it notes and had to find three random students (people who have no idea about the project) to "user test" the app. The results of this simple exercise formed yet another draft site plan layout.

Paper Prototype.

After completing the card sorting exercise, the next stage I carried out was developing a paper prototype for further user testing. I found a wireframe sketch of an iPhone 6 and printed these off for a template. Once I had sketched out my rough app screens I had to get another three users to test it out and provide feedback on its layout, if pages are where they should be. I took a note of the feedback and made some changes as a result, this now provided the information for a final site plan layout.

Week Three

DEVELOP DIGITAL WIREFRAMES.

Individual Task

The next part of the project was to develop digital wireframes of our apps. For this stage I decided to use Adobe Comp, an IOS application available to Creative Cloud subscribers. The use of this Adobe Comp made this stage a lot less time consuming as it is very simple/easy to use, it also meant I could be developing wireframes whilst on move! Once I had created all the screens I then had to send them all to Adobe Illustrator to place them all into artboards... this stage was a massive pain. In total I developed 28 digital wireframes but Adobe Comp doesn't let you send all the screens to Illustrator at once, instead, you have to send each screen one at a time. However, I got there in the end!

Week 4/5

DEVELOP A VISUAL STYLE.

Individual Task

Next, I had to create two A2 mood boards for two different design concepts.These were basically a collage of different images that depict the look and feel of the app interface.

Once these were completed, two A3 style tiles had to be created. Each following the feel of the two mood boards. These style tiles had to show consideration of colour palettes, textures, fonts, interface elements (buttons etc) and a logo. As a result, this allowed me to quickly place elements from the style tile into my final app design.

Week 6

Develop presentation mockups.

Using my new mood boards and style tiles, the next stage was to generate two presentation mockups. For each concept I had to design three screens and place these into an image illustrating an environment. In total there would be six A3 pages (in a single PDF). I also had to add annotation to provide information on why came up with each concept. Once I had generated the mockups I then presented them to David and in this presentation, the concept to take forward was chosen.

Week 7/8

Create a working prototype.

Final Screen Layouts

For the chosen concept, the next stage was to design my finished screen layouts for a minimum of ten screens. I ended up developing 12. Once I completed the layouts I exported the psd. file as a png and brought these into Invision to begin the actual prototyping of the app.

Invision Prototype

The last stage of the project was to actually develop a working prototype for a minimum of ten screens, I developed 17. I drag and dropped my exported png files into Invision and started to prototype them. I created buttons to link each page together as well as choosing the transition animation. However, due to limitations with Invision, my landlord section has been cut short to only the two pages limited to landlords. In the full developed application, landlords would have access to the rest of the app.

Link to invision prototype

https://invis.io/6K9H58SXD

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.