Final U.S Caps UX Design

9
U.S. CAPS Concept: Map of the U.S. with states labeled and colored. Clicking on each state provides the capital as well as the state; flag, bird and flower. Each of the three items provides a brief summary of the history and origin of them.

Transcript of Final U.S Caps UX Design

Page 1: Final U.S Caps UX Design

U.S. CAPS

Concept: Map of the U.S. with states labeled and colored. Clicking on each state provides the capital as well as the state; flag, bird and flower. Each of the three items provides a brief summary of the history and origin of them.

Page 2: Final U.S Caps UX Design

User Stories

JimmyFeatures and Characteristics

Features and Characteristics

David

I’m studying for a geography test and I’m looking for an app that can help me

memorize all the U.S. capitals.I also enjoy history and would like to

learn more about each state.

I’m a parent that is searching for an app for my kids that is educational and simple for my kids to use. I want them to enjoy learning while having fun at the same

time.

• I am a 4th grade student preparing for a geography test• I am a visual learner and I’m looking for an app that can

provide fun and interactive learning material• I want an app that is quick and easy to use

• I am the father of a 4 and 6 year old, searching for a new learning app for kids

• I am a history teacher and would like my kids to learn more about U.S. history, while being actively engaged while they do so

• There are a lot of educational apps that I have been searching that would be too difficult for my kids to use, I want a learning app that will be easy for them to learn.

Page 3: Final U.S Caps UX Design

User App:Jimmy

Zooms into selected state revealing

the capital with a star next to it.

Click any state

Clicking state capital opens new window revealing the state; flag, bird and flower.

Flag Bird Flower

COLORADO

Flag

COLORADO

Clicking any of the 3 individual items

provides the history and origin of the

them.

Page 4: Final U.S Caps UX Design

User App: David

Map interface is simple and easy to understand.

Simply click any stateand it will reveal the star next to the state capital

Clicking the state capital prompts you to a new

window with the states; flag, bird and flower.

By simply clicking one of the 3 items, you will be briefed with a short history

and origin summary on the items.

Flag Bird Flower

COLORADO

Flag

COLORADO

Page 5: Final U.S Caps UX Design

Features and Functionalities

Features/Functionality1. 50 interactive states2. zoom in feature for each state3. glowing edges for each state touched4. name of capitals with glowing animated star for each state5. sound for zooming in feature6. Background sound feature when viewing the whole map7. Log in window8. sounds for log in window9. segway animation for touching state capitals that goes into a new window10. sound for segway animation sounds for touching capitals11. animation for each state flag12. text that pops up when touching flag13. flag shrinks and goes to upper left corner when touched14. touching anywhere on the screen creates short animation of flag flying away (text disappears)15. bird goes to left screen as text appears when being touched16. clicking anywhere on the window creates an animation of the bird flying way (text disappears)17. touching bird creates sound feature18. touching flower enlarges image illuminating in the center of the window as text appears19. touching anywhere on the window creates animation of flower blooming as the wind takes it away (text disappears)20. sound feature of flower blooming21. home button menu on each window 22. small animation of all the capitals landscape background23. animations of the oceans around the map 24. animation when touching the oceans25. Testing feature for each state when all three images have been touched

Version 1Version 1 features all the features and functionality listed above, as well as the test feature for each state.

Version 2Version 2 features all the features in version 1 as well

as giving the user to customize the color scheme of all individual states. There will also be new test questions

for each of the test features.

Simple Features/Functionality• glowing edges for each state touched• sounds for log in window• sound feature of flower blooming• sound for zooming in feature• sound for segway animation sounds for touching capitals• Background sound feature when viewing the whole map• text that pops up when touching flag• flag shrinks and goes to upper left corner when touched• bird goes to left screen as text appears when being touched• touching bird creates sound feature• bird goes to left screen as text appears when being touched• home button menu on each window

Advanced Features/Functionality• Log in window• 50 interactive states• segway animation for touching state capitals that goes into a new window• touching anywhere on the screen creates short animation of flag flying away

(text disappears)• clicking anywhere on the window creates an animation of the bird flying way

(text disappears)• touching flower enlarges image illuminating in the center of the window as

text appears• touching anywhere on the window creates animation of flower blooming as

the wind takes it away (text disappears)• small animation of all the capitals landscape background• animations of the oceans around the map• animation when touching the oceans• Testing feature for each state when all three images have been touched

Explanation for Simple Features/FunctionalityFor the simple features/functionality we will need the

graphics team to create a colorful and eye catching design for kids of the map of the U.S. with all 50 states labeled. The graphics team will also need to create a playful typography

for the text of the 3 items. The tech team will need to create basic touch functionalities for touching the states and capitals as well as the three images displaying the text. We will need a home button interaction for each individual state as well as the

capitals landscape window.

Explanation for Advanced Features/FunctionalityFor the advanced features/functionality we will need the graphics team to create an animation for the oceans surrounding the map. We need an exciting zoom in animation after the user after touching the glowing star

next to the state capitals. Each of the three images in the capital’s land-scape window will need separate animations for each. As well we need

an engaging city landscape for all the state capitals. The tech will create the functionality for the login/sign up

menu. Create touch function for the swiping finger across ocean. Quiz functions and grading features for each individual quiz.

Page 6: Final U.S Caps UX Design

User Pathways

User Window

Sign up/ Login Main Menu

Home Menu

Main Menu

Touch State

Touch Capital

Touch Flag

Touch Bird

Touch Flower

Touch anywhere

Touch anywhere

Touch anywhere

Touch anywhere

Touch home button

Touch quiz button

Touch finish quiz button

Text appear/Flag moves up

Text appear/Bird moves up

Text appear/ Flower blooms moves to center

Text disappears/Flag glides away

Text disappears/Bird flys away

Text disappears/Flower blows away

Quiz questions appear

Evaluates and grades user

Graded score disappears

Zoom out animation

Zoom in

Feature/Functionality

Zoom in animation Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Landscape of Capital

Individual State

Map of U.S.

Map of U.S.

Page 7: Final U.S Caps UX Design

Wireframes

Map

Map

FlagFlag

BirdBirdtext

text text

Bird

Bird

FlowerFlower

Flower

Flower

Flower

State

city landscape city landscape city landscape

city landscape city landscape

capital

ocean ocea

n

Sign up/Login

Page 8: Final U.S Caps UX Design

Mockups

Page 9: Final U.S Caps UX Design