UX Examples

Oscar AcostaUX Examples

I’ve spent some time collecting a few wireframe examples of my previous work. It is all student work (with some real clients like Dell and 3M). Since I haven’t directly worked with developers, my interfaces don’t contain the level of detail that you have shown me in your examples. I am, however, eager to improve.

DAVE!

Canon MP 480Printer UX

Recap

• Analyzing current system functions

• Redesigning four main flows:

1. Photocopy2. Scan to SD card3. Print from SD card4. Print Settings

• Rethinking the physical buttons

• Testing new wireframes

• Finalizing UI

New Physical Remote Design

Function Mapping

Start Screen

Main Menu 1

Main Menu 1

Print Settings Menu 1

Quality 1

Quality 2

Print Settings Menu 3

PhotoSelection Screen 1

Print or Settings Page Printing

Done

New Scan 1

New Scan 2

Scan Menu 1

Data Format 1Scan Menu 3

Main Menu 2

Main Menu 3

Copying

Reading Card

Scanning

Saving

Done

Done

UI Stage

Same Stage Movement

Transitional Stage

Copy

Scan to SD

Function

Print Photo from SD

BlackMain Menu

Main Menu

OK

OK

OK

OK

OK

BackOK

OK

Print Settings

OK

Back

Down

Down

Down

Down X2

Down X2

Down X2

OK

OK

OK

Color

Physical Button

Leads to

Options

Wireframes

Dell’s College Ecosystem

Recap

• Searching for a unified UI to aid the disconnect between student/teacher/class.

• The following two examples show some elements of the UI across a tablet and phone

Phone Elements

1

1 4 6 8.1

2 4.1 7 9

3 5 8 10

4

2

3

4.1 5

6

7

8

8.1

910

Closed Main Apps

Easy Access Bar

Phone Apps and Settings

Main Apps Opened

Button Feedback

App Tittle Bar

Title Subsections

Icon Location

SubHeading

Subheading Staking

Class Options

Map Location

Home Screen Main Apps Opening

AppUniversity

HubSemester Classes

Semester Classes

Informative Screen

Slide Tap Tap Tap Tap Tap

Tablet Elements

1 4 6.1

2 5 6.2

3 6 7

Hidden Apps

Favourites App Bar

Open App Tab

Preview when “tapped”

Opened Apps when “slide out”

Opened App

Opened App

Opened App

Favourite Apps opened “slide out”

1

5

2 7

6.1

8

6.2

6

3

4

3M Multitouch Table

Recap

• Designed a collaborative UI within an educational setting for a multitouch computing table

• Example Flows Include 1. Login navigation 2. Main hub navigation

Login Navigation

1. Student I.D recognized by table

2. ID Menu Appears

3. Pull Down Menu Reveals Planner

4. Planner Access

1

3

4

2

Personal Hub Elements1. Student Hub and Logout

2. Content Aware Main Menu

2.1 Main Menu

3. Timeline

4. Content Filter by Type

5. Shared space - drag content and share with other students

6. Timeline Spot

7. Content Maximized

8. Documents fade into background as they are being filtered

1

3

4

5

6

7

8

2.1

2

More Basic Wireframes

iPad Photo App

Left thumb shift button,Right hand multiple selections

Five finger grab to group selected photos New group has been created!

Pulse App

Triangulate Position and Control Speaker output

Connect Music with friends

Stream Music to Speaker System

Gather Music from the cloud

Pulse App

Thank You

Oscar Acosta [email protected]