Vinyl Go Functional Specification - Tài liệu tham khảo | Đại học Hoa Sen

Team VinylGo Gary Anderson Joe Wilson Kelsey Munsell HCDE 536
Project 5: Functional Specification Lukas Eiermann Table of Contents (1 of 4) General Information Desktop How to Read this Document
6 Desktop Interaction Model Overview 1 Business Opportunity 7 Main Navigation 2 Persona
7.1 Main Navigation with Personalization 3 Context Scenarios 8 Personalized Newsfeed 3.1 Desktop Context Scenarios 8.1 Newsfeed Landing Page 3.2 Mobile Context Scenarios 8.2 Newsfeed Item
3.3 Personalization Context Scenarios
9 Tracking Artists, Genres Curators 4 Concept Model 10 Announcements 5 Site Maps
11 Preorder with Streaming Announcement 5.1 Desktop Overview 12 Search - Filter 5.2 Mobile Overview 12.1 Search - Pagination 5.2 Desktop Detail 13 Home Page 5.2 Mobile Detail 14 Registration/Sign In 5.2 Streaming App 15 Discover Music
15.1 Discover: Genre - Best-Selling
15.2 Discover: Genre - VinylGo Picks
15.3 Discover: Genre - New Arrivals
15.4 Discover: Genre - Curators
HCDE 536 | VinylGo Design Personalization Specification Page 2 of 142 Table of Contents (2 of 4) Desktop (cont.) 16 Curators - Landing 24 My Collections 16.1 Curator Article
24.1 My Collections - Detail Pane
17 Search Results - Valid Results 25 Browse Collections
17.1 Search Results - No Results
25.1 Browse Collections - Detail Pane 18 Product Details 26 My Albums
19 Checkout Process - Sign In, Register, Guest Page 27 Wishlist
19.1 Checkout Process - Shipping Address 28 Help Landing
19.2 Checkout Process - Payment 28.1 Help Article
19.3 Checkout Process - Account
19.4 Checkout Process - Order Overview
19.5 Checkout Process - Order Confirmation 20 VinylGo Player 21 Pop-out Player 22 My Account 23 Band Tracker
HCDE 536 | VinylGo Design Personalization Specification Page 3 of 142 Table of Contents (3 of 4) Mobile
29 Mobile Interaction Model Overview 39 Curator Page 30 Header 39.1 Curator Article 30.1 Footer
40 Browse Catalog & Search Results 30.2 Menu
40.1 Browse Catalog & Search Results - Invalid Search
31 Menu with Newsfeed Personalization
40.2 Browse Catalog & Search Results - 404 Error Prevention 31.1 Newsfeed Landing Page
40.3 Browse Catalog & Search Results - Filters 31.2 Newsfeed Item
40.4 Browse Catalog & Search Results - Product Details
32 Tracking Artists, Genres, Curators 41 Product Page 33 Announcements 42 Cart View
34 Preorder with Streaming Announcement
43 Checkout Process - Sign In, Register, Guest Page 35 Search
43.1 Checkout Process - Shipping Address 36 Home Page
43.2 Checkout Process - Payment 37 Sign In & Registration
43.3 Checkout Process - Account 38 Discover Page
43.4 Checkout Process - Order Overview
38.1 Discover - Specific Genre Page
43.5 Checkout Process - Order Confirmation
HCDE 536 | VinylGo Design Personalization Specification Page 4 of 142 Table of Contents (4 of 4) Mobile (cont.) 44 My Account (Mobile Menu) 44.1 Account Information 44.2 Band Tracker 44.3 Communication Preferences 45 Help Page 45.1 Help Article
46 Streaming App - Home Not Signed In
47 Streaming App - Header & Navigation
47.1 Streaming App - Header & Navigation (cont.)
48 Streaming App - Signed In/Now Playing 48.1 Streaming App - Up Next 49 Streaming App - Library 50 Streaming App - Playlists
50.1 Streaming App - Playlist Detail View
HCDE 536 | VinylGo Design Personalization Specification Page 5 of 142 How to Read this Document “View Prototype” Example
This document is intended to give you an understanding of
the VinylGo project and guidelines for implementation. It is
divided into four sections: General Information, Desktop
View, Mobile View, and Streaming App.
The General Information section provides an illustration of
the business need for the site, persona, context scenarios, concept model and site maps.
The Desktop and Mobile View sections begin with
universal interaction models and move into distinct page interactions.
The Streaming Companion App section provides a page-by- page interaction model.
Use the View Prototype link found on each page to visit the
appropriate part of the site and see the implementation of
the interaction model specified.
HCDE 536 | VinylGo Design Personalization Specification Page 6 of 142 1 | Business Opportunity
While the vinyl record market is well-served by many retailers - both large (e.g. Amazon, Wal-Mart) and niche
(Discogs, Collector’s Choice Vinyl), there lacks an organization that services the unique wants and needs of existing or aspiring vinyl collectors.
Today, it is intimidating to enter into the world of vinyl, since the purchase of vinyl means you are “locked” into the
use of a turntable to enjoy your music. Additionally, while there are plenty of fan-driven communities, there is no
location where fans of vinyl can engage with respected musicians who appreciate and celebrate vinyl products and
culture. VinylGo serves the vinyl community in a way that does not yet exist today by:
▪ Enlisting high-profile musicians or musical authorities to serve as curators within the community. These
respected tastemakers cut through the chaff that swells in unregulated and/or amateur forums.
▪ Offering users the ability to listen to any purchased album (including many pre-orders) via streaming media,
effectively lowering the barrier-of-entry and ensuring that the owner’s music collection is accessible even
when their preferred medium, the turntable, is not.
▪ Allowing users to determine the information, articles, and products in which they are interested. VinylGo
establishes the spirit of a community in a way that doesn’t feel like a half-hearted attempt at developing yet
another social network. VinylGo’s goal is to get the user back to enjoying music in the real world.
HCDE 536 | VinylGo Design Personalization Specification Page 7 of 142 2 | Persona Age: 45 Occupation: Apartment Manager James Primary Persona Education: BA Status: Divorced
Biography: James manages Crescent Square in Redmond. There are 220 apartments in his
building. He rents the apartments, fixes problems, and is the primary point of contact for
tenants. He’s often working on routine maintenance around the building. He’s usually alone for
several hours while finishing up the projects.
He was in a band in his 20’s and 30’s, but left to get a “real job.” He misses playing music but still
loves listening to new artists and also his favorite bands from the past. He’s really proud of his
vinyl collection and has spent more money on his home audio setup than his car. “Even though I’m not in a
His wife left him, so he is alone with no kids and a fair amount of surplus income. Listening to band anymore, music is still
great albums on his high-end system while drinking a beer is one of his loves. a huge part of my life.” Goals Key Behaviors
• Celebrate music, both new and old.
• Listens to music during work on mobile device, and after work on a
• Continue to build his existing music collection and proudly
high-end turntable/audio system. show it off to friends.
• Shops for vinyl online, but likes to support local shops if possible.
• Use music to kill boredom and inspire.
• Supports music he likes by attending live shows/concerts and
buying the artists’ albums (instead of streaming via subscription).
HCDE 536 | VinylGo Design Personalization Specification Page 8 of 142 Desktop | Context Scenarios
HCDE 536 | VinylGo Design Specification Page 9 of 142
3.1 | Desktop Context Scenarios
1. First-time visit to make a purchase
James loves to support independent musicians and
also loves to buy music on vinyl when possible.
Unfortunately, it is oftentimes difficult to find
records for smaller artists outside of the Seattle
area. A local retailer recommended a new site,
VinylGo, that curates a large collection from artists
both big and small. James goes to site to locate and
purchase a specific album of interest. Luckily, his
search yields an immediate result and James makes a quick purchase.
This Context Scenario Addresses: Search, Purchase as Guest
• James hears about a new website, VinylGo, from a local retailer.
• He goes to the website to search for an album by an artist he’s always liked.
• He uses the search field to type in the artist name.
• James sees a list of albums by the artist, including the one he wanted.
• He clicks on the album and reads the description, seeing other recommended albums on the page.
• He decides he wants to buy the album.
• He puts the album in his cart and checks out, completing his purchase.
HCDE 536 | VinylGo Design Personalization Specification Page 10 of 142