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
File Aug 08, 5 25 33 PM.jpeg
ui-sketch 1.jpeg

Sketching

I begin every project with a pencil, because I can draw with lightning speed. I chose to focus mainly on the visual organization of the main page. I implemented 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 titles of Favorites and Reporter to be more intuitive. 

 

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. 

 
atx311-icon.png

Icon Design 

I used a template with Apple's golden ratio grid system to quickly knock out a new icon. 
 

 
 
atx311_websmall.png

The Mock-up

Although I favor a maximalist visual aesthetic, when it comes to digital products, I tend to consolidate and condense as much as possible. This homescreen saves a lot of time compared to the redundant and cluttered original. This version was created in Adobe XD. The illustration and icons were created in Illustrator.

I kept my previous version of this project below, because I'm proud of the progress I've made so far. 

 

For the re-design, 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.