Re-design an app based on iOS7 design and usability standards

Introduction

Download Slides
Here are the lecture slides for the Introduction.
Check these out
In the slides, I provided some examples and chatted a bit about UX and UI. Here are some links that you can check out recapping those examples:
- Instagram Screens: http://www.pttrns.com/p/134
- Foursquare Screens: http://www.pttrns.com/p/72
- AirBnb Screens: http://www.pttrns.com/p/115
- Vine Screens: http://www.pttrns.com/p/241
- Generally http://www.pttrns.com is great and updated all the time with tons of app updates
- Not the most updated at all, but at the bottom, it shows quite a few of the early redesigns. Shows how people were thinking through redesigns when iOS 7 first came out in Fall 2013. Tumblr for redesigns: http://ios7redesigns.tumblr.com
- Older web-based but great article on UX vs. UI: http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/
- Another UX vs UI explanation: https://centerline.net/blog/ux-vs-ui-whats-the-difference/
- This is the best explanation of UX vs UI in the most strict language: http://www.helloerik.com/ux-is-not-ui
- Apple's intro to iOS 7: https://www.apple.com/ios/ios7-basics/
- Attached below is a poster explaining the difference between UX and UI.
Start picking an app
Choose a few apps that you either use frequently, know quite a bit about or have an interest in. It doesn’t need to be an app that has made the iOS 7 transition. It’s also okay if it has made an iOS 7 update. What’s important is that you pick apps that you think may need updates based on usability or design.
Play around
Play around with the apps. Use these apps for their intended purpose. If the app is for taking photos, take a bunch of photos. If it’s for posting blogs, use it heavily to post blogs. Basically, your homework is to be an avid user. Get to know the apps you’ve chosen inside and out.
Make your selection
Now that you have chosen several apps and have gotten familiar with them, narrow your focus down to a single app you’d like to work with.

Researching, Reading User Reviews and Note Taking

Download Slides
Here are the lecture slides for this unit.
A few links
- iOS 7 Walkthrough: http://www.idownloadblog.com/2013/09/18/ios-7-walkthrough/
- A delightful/funny older post on “skeuomorphism” http://mantia.me/blog/skeuomorphism/
Start taking notes
Based on the process from the video, print screenshots of the one or two screens you’d like to improve upon and begin taking notes on what does and does not work.
Read reviews
Use the app store (as well as feedback from friends and family) to provide pertinent user feedback in your note taking.

Don’t just focus on what’s unsuccessful. Make sure you make what is working, because you don’t want to lose that during the redesign process.
1st post time!
Prepare your initial notes and selected screens for redesign and post them in the class project section for everyone to see.
- You'll be posting photos of your printouts with your sketches, notes and thoughts written on them
- Include the digital screenshot of the actual app for a better view
- If the app HAS been redesigned for iOS 7 already, please include the iOS 6 screenshots for this post, too
Please review at least two other students’ initial posts. You’re likely to learn quite a bit in seeing how other people approach UX and UI problems.

Turning Notes Into a Plan: Sketching Ideas

Download Slides
Here are the lecture slides for this section!
Read Apple's HIG
Get familiar now with iOS 7 once and for all by reading through the updated Apple Human Interface Guidelines. There's really no way around this and no substitute for the basics: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

Here's the link for the entire toolkit in case you want to check into more specifics: https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289

Links
- Sketching Importance: http://www.dnnsoftware.com/blog/cid/425654/Why-Sketching-Is-An-Important-Part-of-The-Design-Process
- Great, printable iPhone sketching template: http://d13yacurqjgara.cloudfront.net/users/12721/screenshots/728257/attachments/69276/iphone5-templates.pdf
Review and select
Review your notes carefully and select the most important changes you’d like to make. Make two lists: what to keep and what to change.
Start sketching
Using the final printouts/notes from the last unit as well as your list of improvements and design elements you’d like to keep intact, start sketching how you imagine the app will look.

Don’t worry about being too detailed here, just work quickly to get out all of your ideas. The more you sketch at this point, the more resolved your final designs will be.
Keep looking at other apps
Don’t be afraid to look at other apps. There’s no reason to reinvent the wheel. For example, if you’re wondering how to improve upon a basic text input field, check out how the top 20 apps do that type of text input field. You’ll likely come up with one of the following two scenarios: there is a very definite convention or you’ll see that it is open to interpretation. Either way, you can learn the rules and then start to iterate on a new way to break them by getting creative.
Post final sketches
Your homework at this point is to sketch a bunch! Work from your general ideas until you’ve come to a fairly resolved version of the screen(s) you will be redesigning.

Then, post your final, cleaned up sketches in the class project area for everyone to critique. Please include an example of the current app as it is designed as well as an explanation of what you changed and why you’ve chosen to do what you’ve done. Also review and comment on at least two other students’ sketch posts.

Using Illustrator for Wireframing

Download Slides
Here are the lecture slides for the 4th unit.
Apply feedback
Using your final sketches from the previous unit, apply any feedback you received from other students in the class. Add in notes on how you may be able to improve your final sketch using this feedback.
Start wireframing
Using Illustrator and tips from the lesson, start creating clean and simple wireframes of your ideas.

A few things to think about as we move into wireframing:

http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/

Downloadable Illustrator Template: http://miketheindian.com/2012/09/28/iphone-5-wireframe-sketch-template/

Amazing Wireframe Resource: http://ui8.net/wireframe-kit

Simple mobile wireframe kit: http://ui8.net/wireframe-kit-v2

In-depth discussion on why wireframing matters: http://www.seguetech.com/blog/2013/12/31/importance-wireframing-responsive-design
Keep iterating
Don’t be afraid to do a bunch of versions for each screen at this point. Now that you’re working digitally, it may become clear that certain design ideas aren’t working. That’s totally fine. It’s great to keep iterating here.
Time to post again
Once you feel that you’ve got some nice, clean robust wireframing done, post your sketch and your final wireframe(s) side-by-side for each screen you’ll be redesigning in the class project section.

Comment again on at least 2 students’ posts of the same content.

Using Photoshop for Final Design Mockups

Ben Hsu

16

8

Company

Community

Teaching

Mobile

Company

Community

Teaching