template research

Template researchFor windows 8.1

Education | Music & Video | Photo | Travel

Educational app

TED application

OutlineA platform for ideas worth spreading from science until global issues, in 100 languages. TED organizes events all over the globe.

GoalEducate and bring multicultural people together through science.

Target groupAll ages

Feelings Trust, seriousness

Interface and navigation design

Splash screen: simple | light background color | logo

Font: bold-capital titles | light-thin descriptions | up to 3 fonts

Controls: bold-capital titles | light-thin descriptions | up to 3 fonts

Navigation: scroll from top-bottom and left-right

Layout: grid oriented

App type: rational

Splash screen

Main Screen | large images and bold titles

Discrete next-previous buttons |Button bar to indicate the page number

Grid layout | organized in sections | separators

Video screen (distinct dark section | large play control | bold title)

Two video layouts

Back | Play button

Suggested links have a grid layout

Navigation

Scroll right | left Scroll up | down

Article links open explorer

Mouse hover-over title, reveals information

Right click introduces a specified search panel

Main page

Video selection

Wireframes

Promoted style

• Bold, beautiful, readable

• Content focused

• Fast and fluid

Accessibility

• Scroll’s up and down with keyboard controls and space bar

• Doesn’t play video with keyboard controls

Quality feature (solution)

• Visible interactive transcript

Guidelines

• Structure consistent

• Immersive & responsive

• Content focused

Evaluation & Feedback

• Good UI

• Great Content

• Well designed

Music & Video app

Shazam application

OutlineAn app which recognizes music and TV, while connects 500 million people with each-other.

GoalHelp people recognize and engage with the world around them.

Target groupAll ages

FeelingsAppealing, fun

Interface and navigation design

Splash screen: dark-blue background color | name-logo

Font: light-thin descriptions

Navigation: scroll from top-bottom and left-right

Layout: simple | left and centered orientation

App type: emotional

Splash screen

Main Screen (large logo | instructions)

Mouse hover-over triggers a low opacity box selection indication

Grid layout | organized in sections | separators

Result screen (distinct dark section/large play control/bold title) Layouts for tags, lyrics, search

Back button

Suggested links have a grid layout

Motion Design

Navigation

Scroll right | left Scroll up | down

Right click brings up an app bar for alternative tagging

Main page

Song results

Wireframes

Promoted style

• Modern

• Fast

• Responsive

• Color consistent

• Functional

Accessibility

• No scroll up and down via keyboard

on main screen

• Scroll up and down/right-left in

results screen

• Doesn’t select the shazam search button

Guidelines

• Color consistent

• Responsive

• Less control elements

Evaluation & Feedback

• Simple design

• Fast responding

Photo app

Adobe Photoshop express applicationOutlineAn app which enhances the user’s images.

GoalHelp people edit their photographs.

Target groupAll ages

FeelingsProductive, fun

Interface and navigation design

Splash screen: white-light background color | name-logo

Font: light-thin typeface | windows typeface

Navigation: scroll from top-bottom and left-right

Layout: simple| left and centered orientation

App type: emotional

Main screen (main three options)

Splash screen

Controls | back button | undo-re-do buttons

Search image screen

Simple controls click-on selections

Edit screen (distinct grey background | low opacity | controls on app bar)

Back button Editing controls on app bar

Navigation

Scroll right | left

Right click hides all the controls-enlarges the image

Main page

Image Editing Screen

Wireframes

Promoted style

• Modern

• Fast

• Simple

• Functional

Accessibility

• No scroll up and down via keyboard

on main screen

• Doesn’t select editing tools

• Keyboard only selects images in the

search page

Guidelines

• Responsive

• Simple

• Picture focused

Evaluation & Feedback

• Simple design

Travel app

Travel application

OutlineAn app which offers advice, planning and booking features for a perfect trip or outing.

GoalEnables travelers to plan and have a great trip.

Target groupAll ages

FeelingsTrust

Interface and navigation design

Splash screen: green background color | name-logo

Font: regular-medium typeface

Navigation: scroll from top-bottom | left-right

Layout: numerous panels and sections

App type: rational

Main Screen (three main stack panels at the top)

Splash screen

Search hotels screen

Grid layout

Simple controls, click-on selections

Edit screen (distinct grey background | low opacity | controls on app bar)

Drop down menu

Navigation

Scroll up and down Next and previous controls

Main page

Picture Gallery

Wireframes

Promoted style

• Informative

• Responsive

Accessibility

• Scroll up and down via keyboard

• Doesn’t select editing tools

• Lack of separate home button

Guidelines

• Responsive

• Search focused

• Provide feedback

Evaluation & Feedback

• Informative

• Awesome

GoalEducate multi-cultural target group

Design enables:

• Readability

• Structure consistency

• Immersive & responsive experience

• Focus on content

GoalHelp people recognize and engage with music

Design enables:

• Fast/ Responsive outcomes

• Color consistency

• Functionality

• Simplicity

GoalHelps people edit and enhance their photographs.

Design enables:

• Focus on images

• Simple controls

• Responsive experience

• Fast editing

GoalOffers travelers advice on planning and booking

Design enables:

• Informative

• Responsive

• Focus on the search and provide feedback

Conclusions

Education (TED) Readability |rational

Music & Video (Shazam) Simplicity |emotional

Photo (Adobe Photoshop express) Focus on images |emotional

Travel (trip advisor) Focus on search and feedback |rational

General and mutual conclusions

• Consistency

• Simplicity

• Immersive

• Responsive

• Specific focus (by category)