Mobile App UI Re-design Concept

After familiarizing myself with the iOS human interface guidelines and best practices, I chose a simple app that (in my opinion) would benefit from a re-design to practice my planning, sketching, and mock up skills. 

 
 
austin311-original.jpeg

The Original

A little poking around reveals that Austin's 311 app is built using the Spot Reporters framework. It's a humble little thing that gets the job done... but it's not particularly elegant or delightful to use. 

 
File Aug 08, 5 25 33 PM.jpeg
ui-sketch 1.jpeg

Sketching

I begin every project in my sketchbook. Because the object of this exercise is to become more familiar with user interface design, I didn't sketch out the entire flow of the user experience, choosing instead to focus mainly on the visual organization of the main page. I did brainstorm a few UX tweaks, such as adding a button to call 311 on the front page, since the option appears only on the "new request" submission page. I also changed the wording of Favorites and Reporter to be more intuitive. 

 

 
atx311-icon.png

Icon Design 

I used a template with Apple's golden ratio grid system to quickly knock out a new icon. 
If time permitted, I would have designed an iconic symbol to represent the app, rather than just using the title – however, when it comes to portfolio exercise pieces, I'm embracing the 'work smarter, not harder' philosophy. 

 
 

The Finished Mock-up

For the re-design, I added visual interest by inserting an image of Austin's skyline for the background (something I would obtain and use legally if this were more than an exercise). I created a new button to directly call 311, which only appeared on the 'Submit' screen in the original app – some people, believe it or not, still like to get things done by talking to strangers on the telephone. 

I used stock icons, but if this were my project, I would most likely create my own icons in Illustrator. 

Favorites changed to Watching, and Reporter changed to My Info. I moved the FAQ button to the top navigation bar, as well as the app info button. 

This mock up was created with Photoshop.