Transcript
Page 1: Briefer: UX design process

Briefer

17/04/2014, by Andriy Vaskiv

Page 2: Briefer: UX design process

Agenda

• Task• Research• Requiremens• IA• Wireframes• UI• Demo

Page 3: Briefer: UX design process

Task

Due to the discontinuation of the Google Reader design alternative RSS reader for iOS.

Page 4: Briefer: UX design process

Research

• Survey

• “Competitors” analysis

Page 5: Briefer: UX design process

Research: Survey

25

6

4

0

Used RSS reader,IT – 80%

Use RSS-reader now, IT – 50%

Used Google Reader

Women

Page 6: Briefer: UX design process

Research: Target user

20-40 y.o.

average computer skills

man (most likely)

Page 7: Briefer: UX design process

Research: “Competitors” analysis

Google reader

Pros

• Rich functionality with Categories and feeds• ability to star item w/o opening it

Cons

• messy UI with duplication of controls• starring and keep unread?

Page 8: Briefer: UX design process

Research: “Competitors” analysis

Feedly

Pros

• Almost perfect• Various views• Context hints

Cons

• no categories editing functionality• can’t star item w/o opening it• UI for iPad and iPhone versions is not consistent• iPhone - menu icons are rather confusing

Page 9: Briefer: UX design process

Research: “Competitors” analysis

FeedDemon

Pros

• ??? (Rich functionality?)

Cons

• Visually extraoverloaded

Page 10: Briefer: UX design process

Requirements

• Content rules– Typography– Different views– Grid

• Navigation– Categories– Feeds

• Search for feeds

• Sharing

Page 11: Briefer: UX design process

IA

Entities: Category Feed ArticleRelationship: hierarchical

View modes

Article Category -> Feed -> Articles -> Article

Feed Category -> Feed -> Articles

Category Category -> Articles for all feeds within Category

All updates All new unread articles regardless the Category and Feed

Starred All articles marked as starred regardless the Category and Feed

Recently viewed All articles viewed recently regardless the Category and Feed

Page 12: Briefer: UX design process

Typography

Sans serif Lato

Serif Georgia

Page 13: Briefer: UX design process

Typography: The 3 Fundamental Dimensions

Font size: 16px -> line height: 26px, line width: 685px

Page 14: Briefer: UX design process

Typography

Lato

Times New Roman

Georgia

685px

Page 15: Briefer: UX design process

GridiPad Landscape

Page 16: Briefer: UX design process

Views

•Tiles

•Details

•Headers only

Page 17: Briefer: UX design process

Wireframes

Page 18: Briefer: UX design process

UI

Page 19: Briefer: UX design process

Demo

http://a0441w.axshare.comiPad landscape

Page 20: Briefer: UX design process

Thank you

?


Top Related