briefer: ux design process
DESCRIPTION
The showcase presentation of the UX design process for the RSS reader for iOS.TRANSCRIPT
![Page 1: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/1.jpg)
Briefer
17/04/2014, by Andriy Vaskiv
![Page 2: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/2.jpg)
Agenda
• Task• Research• Requiremens• IA• Wireframes• UI• Demo
![Page 3: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/3.jpg)
Task
Due to the discontinuation of the Google Reader design alternative RSS reader for iOS.
![Page 4: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/4.jpg)
Research
• Survey
• “Competitors” analysis
![Page 5: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/6.jpg)
Research: Target user
20-40 y.o.
average computer skills
man (most likely)
![Page 7: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/9.jpg)
Research: “Competitors” analysis
FeedDemon
Pros
• ??? (Rich functionality?)
Cons
• Visually extraoverloaded
![Page 10: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/10.jpg)
Requirements
• Content rules– Typography– Different views– Grid
• Navigation– Categories– Feeds
• Search for feeds
• Sharing
![Page 11: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/12.jpg)
Typography
Sans serif Lato
Serif Georgia
![Page 13: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/13.jpg)
Typography: The 3 Fundamental Dimensions
Font size: 16px -> line height: 26px, line width: 685px
![Page 14: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/14.jpg)
Typography
Lato
Times New Roman
Georgia
685px
![Page 15: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/15.jpg)
GridiPad Landscape
![Page 16: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/16.jpg)
Views
•Tiles
•Details
•Headers only
![Page 17: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/17.jpg)
Wireframes
![Page 18: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/18.jpg)
UI
![Page 20: Briefer: UX design process](https://reader033.vdocuments.site/reader033/viewer/2022061223/54c4c3894a7959f7438b463d/html5/thumbnails/20.jpg)
Thank you
?