musicstack redesign
TRANSCRIPT
MUSICSTACK.COMWEBSITE REFRESHPROJECT REVIEW
Jennifer Stuart Lesch | IAKM-61098-004 | April 20141
INTRODUCTION
MusicStack.com is a commercial website dedicated to helping music lovers around the world feed their passion by facilitating the buying and selling of items. They specialize in “hard to find music, rare vinyl records and used CDs from thousands of online record stores.”1
MusicStack was created in 1997 by Dave Stack, when the internet had yet to realize its potential for connecting like-minded music buyers and sellers. He has maintained the site for 17 years and seen appreciable growth in in the size, diversity and dedication of his user base.
However, changes in technology and understanding of user behavior over the years have meant the site is due for an update in several areas, and it was for this reason he contacted the UXD program at Kent State University seeking help.
2
1 MusicStack.com home page
OVERALL PROJECT GOALS
Get a better understanding of the site’s audience and competitors Improve user experience for everyone, particularly new/first-time buyers and sellers Determine the best direction for visual design updates Client priority is for
Improving function over revising the visual design Search landing pages over home page (since visitors typically come in from a
search, not the home page)
3
CONTENTS
Review of existing site: what can we learn about MusicStack from an initial review, Google Analytics and how it compares to similar sites? Online analytics Heuristic analysis of competitors
Research: talking to existing and potential users about the MusicStack site as it exists today, and what improvements could be made Remote usability testing User interviews Third-party online forums
Results: what are the common themes from the review and research phases, and what yardsticks can we construct against which to measure future work? User profiles User SWOT analysis
Recommendations General Specific – content, design, usability and technical Use cases and proposed improvements
4
REVIEW5
ANALYTICS – TRAFFIC
6
Client provided access to Google Analytics for MusicStack.com. These numbers were collected in September of 2013, and in February 2014 were not appreciably different. Some of the basic numbers collected: Visitors:
12.6 million visits, 7.3 million unique visitors3:22 average length of site visit46% overall bounce rate56% new visitors v. 43% return visitors
Frequency/recurrence of visits:Significant dropoff between those making 1-2 visits (8.3 million) and those coming back for 3-8 visits (1.6 million); it looks like 9 visits is the threshold for someone to decide the site has something to offer consistently and frequency of visits increases and holds fairly steady.
Traffic sources:Most (90%+) referrals come from Google searches (in various languages) - only 2% come from another website (rateyourmusic.com). Conversion data shows similar success rates coming from organic and direct search (60%+).
Conversions/completions:Of the top 10 completion URLs, the top 2 (making up almost 50% of the total) are from the search function, the next 6 items are variations on the shopping cart/checkout or billing URLs (with one listing URL), all with under 1% completion rate.
ANALYTICS - TECHNICAL
Devices and platform: While desktop usage accounted for the majority of visits,
mobile devices were second, followed by tablets. On average mobile visitors viewed 2.30 pages per visit compared to tablet visitors with 3.48 pages per visit.
Non-desktop usage was significantly dominated by Apple devices with the iPhone being the most popular device, followed by the iPad.
Screen resolution: Resolutions are widely varied; even the most common is only
14.4% of users. Top three are: 1366x768 (14.4%), 1920x1080 (9.8%), 1280x800 (8.0%)
7
75%
11%
8%6%User Platforms
Windows Macintosh iOS Other
ANALYTICS – EXIT POINTS
8
Analytics show that more than half of the users in the past year were new visitors, and that there is a significant dropoff for users after only 1-2 visits. Analytics can show the what/where but not why, so some questions and theories are included here for top exit pages: Main home - What are the reactions to the main home page that would cause them to not look
any further? How could the home page be revised in design or content to lead users into the site?
Unclear site purpose No visual hierarchy
"Sell Your Music" info - What about the Sell Your Music page causes people to leave the site at that point?
Extensive signup process (five steps across five screens) Mandatory fields not marked; some pogo-sticking when blank fields generate error messages
Search results - Why are the search result pages a significant exit point? Lack of detailed sort/filter ability in results Can be lots of information hidden ‘below the fold’ depending on a given results page amount of info Not geared for casual browsing
Seller account pages - This last one may be explained as users checking their own account pages to review activity before exiting
ANALYTICS - SUMMARY
9
Takeaways from this initial review: MusicStack.com has a devoted following among those who spend the time to familiarize
themselves with the site The site has some unique features that could be promoted to provide visual and information
hierarchy and lead to further site exploration from casual visitors There is opportunity to build the return visitor rate if people find a reason to stay for more than a
few minutes or come back more than twice Some processes could be streamlined to encourage site registration and make repeat visits more
user-friendly There may be opportunity for improvement in the cart/checkout process to build
conversions/completions
COMPETITOR REVIEW
10
MusicStack.com’s primary competitors were identified as: CDandLP.com Discogs.com Gemm.com
These were chosen for review because of their similarity in mission, size of customer base and breadth of product offering.
A qualitative analysis was conducted to compare bounce rates and engagement, as well as identify some general demographic characteristics.
A heuristic evaluation was conducted to informally compare MusicStack to these competitors in areas of general importance2; this is a quick high-level overview to identify the most obvious issues that can be addressed to bring the site in line with its competition and improve usability.
MusicStack is losing market share to Discogs in particular: They have a more comprehensive catalog The completeness of their information is better Google reads their greater amount of non-sale content as information rather than
commerce, increasing its search ranking However, Discogs data is available for use; MusicStack can supplement their own content with
that from Discogs, helping fill in gaps for album images and track listings, two things buyers focus on to determine purchases.
2 Using some of Jakob Nielsen’s heuristic evaluation standards from his Usability Engineering
COMPETITOR REVIEW– QUANTITATIVE ANALYTICS3
11
3 Statistics drawn from alexa.com and another custom tool examining site structure and information such as JavaScript and metadata tags. Data retrieved September 2013.
CDandLP.com Discogs.com GEMM.com MusicStack.comBounce rate 48.20% 34.20% 51.70% 49.30% Engagement Daily page views (per visitor) 5.0 9.6 2.9 2.4Length of visit (min:sec) 4:12 6:21 2:44 2:05 Demographics Gender (primary) Male Male Male MaleEducation level College/some Graduate College Some college Some collegeSite (browsing from) School or Work Home Home School Geography (top two countries) France United States United States United States Germany Germany United Kingdom United Kingdom Social network engagement Facebook Facebook Facebook Facebook Twitter StumbleUpon StumbleUpon Google+
The general picture of the MusicStack user here is of an educated male, browsing the site from school in the US or UK. However, nearly half of visitors have a very low rate of engagement with
the site, viewing only a couple of pages for a couple of minutes.
COMPETITOR REVIEW – HEURISTIC EVALUATION
12
Jakob Nielsen's heuristics are probably the most-used usability heuristics for user interface design. As published in Nielsen's book Usability Engineering there are ten areas, but for purposes of this review we have condensed and shortened just six of them into these four sections, with possible examples of each heuristic element.
Match between system & real world/user control & freedom (CONTROL) The system should speak the user’s language, follow real-world conventions, and make information appear
in a natural and logical order; Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue.
Plain English vocabulary versus insider-speak, or access to a glossary of terms Accommodates new and experienced users by allowing custom settings via account login, watch lists,
wish lists Allows for both simple and advanced search and sort/filter options for results
Aesthetic & minimalist design (DESIGN) Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of
information competes with relevant units and diminishes their relative visibility. Also speaks to visual hierarchy, allowing user to identify the most important information presented at any given time.
Visual design – clean, updated, uses current web conventions Visual hierarchy - features items of importance to users, items unique to the site, makes the purpose
of the site immediately clear
COMPETITOR REVIEW – HEURISTIC EVALUATION
13
Error prevention & handling (ERROR) Systems should prevent problems from occurring, either through good design or confirmation options;
when errors do happen, the system should express them in plain language, suggest a solution and allow the user to recover with minimal effort.
Predictive text or suggestions for/recovery from misspellings Marking mandatory fields as such in forms
Recognition versus recall (RECOGNITION) Minimize user’s cognitive load by making options, actions and options visible. The user should not have to
remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Clear call to action buttons Persistence of navigation options between sections Pagination in search results to provide context and orientation
The following chart shows the competitor sites evaluated on a scale of 1-4 in each of these areas, with a total overall score. The scale is:
0=poor 1=fair 2=good 3=excellent
HEURISTIC EVALUATION
14
CONTROL• Plain English or glossary access• Custom account/settings• Simple/advanced search• Sort/filter options in search results
DESIGN• Updated visual design• Clear information hierarchy
ERRORS• Predictive text or spelling suggestions• Error handling in form fields
RECOGNITION• Clear call to action buttons• Persistent navigation options• Orientation in search results
TOTAL SCORE
CDandLP.com Discogs.com GEMM.com MusicStack.com
2223
21
33
222
2.18
KEY: 0=poor | 1=fair | 2=good | 3=excellent
1222
23
12
312
1.90
2222
12
21
211
1.40
2221
12
12
111
1.40
RECOMMENDATIONS FROM COMPETITOR EVALUATION
15
Based on the heuristic evaluations, MusicStack.com has a good baseline site, but substantial room for improvement. Some suggestions based on this initial review: Remove or improve the homepage carousel Provide better ways to browse the site, even when not buying/selling Expand initial search options, with more facet/filter choices Make tooltips more obvious (e.g., for conditions on LP pages) Make the ‘marketplace’ aspect of the site more obvious Feature the unique tools for “Price Guide” and “Just Sold” items more prominently Build contextual navigation into the site where possible, to keep the visitor better oriented (e.g.,
breadcrumbs) Consider adding a glossary to address some of the problems of inconsistent user-generated
content and help educated new users. Cross-referencing terms could be a crowdsourced project later on?
Improve consistency in visuals (color, type – webfonts?– controlling image sizes, standardizing navigation location)
Incorporate predictive text, or suggest alternatives for potentially misspelled terms Paginate search results or provide a better way to divide long result sets for easier viewing Increase options for filtering/sorting in search results
Features and items drawn from competitors that stood out in contrast to MusicStack as things to attract or retain users, or are in common use elsewhere
RESEARCH & RESULTS16
USER RESEARCH OVERVIEW
17
User research for this project took the form of testing the live site and user interviews, and task analysis from the testing sessions Moderated in-person testing - 3 sessions Unmoderated online user testing – via Loop11 tool, 94 respondents Task analysis - from Loop11 survey User interviews – via phone, with 2 novice users, 3 expert users
Taking the perceived strengths of the site (variety of items, access to unique tools) as well as possible challenges (ease of finding items and sorting results, process flow), a testing script was developed to use with Loop11. Loop11 is a remote usability testing tool that enables you to test the user-experience of any website and identify navigational and usability issues. It also allowed us to gather basic background information about computer use, online purchasing habits in general and music purchasing habits in particular.
The Loop11 testing was remote (unmoderated), and three tests were conducted as in-person (moderated) sessions with the same questions. The moderator attempted to keep the conditions mostly the same, with no cues or other assistance to the user with tasks during the session, but did ask follow-up questions at the end of the session. The feedback from those moderated sessions has been incorporated into the Loop11 results and comments.
USER TESTING RESULTS
The initial average task success rate for all tasks was only 12%. While this was a poor success rate, there were some technical issues; manual adjustments were made in the tool after the fact to account for many responses that were marked as fails were in fact successes or abandons.
Some feedback from respondents indicated that a task may have been a fail not because of their ability to complete a task but to complete it easily – thus there were some respondents who may have understood and been able to complete the task under normal use conditions but due to the Loop11 tool causing the site to run slow, abandoned the task.
18
LOOP11 SURVEY – TASK ANALYSIS
19
Introductory Questions Most participants (31.9%) were heavy (40+ hours per week) Internet users. The next group with
the highest percentage (24.5%) were moderate users (21-30 hours per week). All participants have made a purchase online before. All should have prior experience with online
shopping carts. Just over half of participants (55.4%) made 1-5 purchases online per month. Preferred music format among most participants (69.1%) was vinyl. The majority of participants (62.8%) purchase music primarily via a website. Most participants (93.6%) have purchased music online. Only 6 participants have never purchased music online before.
Summary: The profile that appears from the introductory questions is a participant that is a heavy Internet user, comfortable with online shopping, has made an online purchase before, prefers vinyl and primarily makes their music purchases online
LOOP11 SURVEY – TASK ANALYSIS (CONT’D)
Task 1 (Item 7) / Genre Search Many users skipped the search and instead looked up a specific
artist they knew belonged to the blues genre. Users favored the search fields on the left side of the screen over
the one on the top. There is no genre search option in that cluster on the left.
Provide at least some sorting options for search results 13% of users abandoned the task, despite Genre field appearing
in 2 places (global and utility navigation). Majority of participants (43.6%) agreed the navigation allowed
them to complete the task and another 19% strongly agreed. Similar results appear regarding the design.
Qualitative feedback from participants (Item 10) shows that some participants had difficulty finding the Genre search option.
20
SuccessFailAbandon
LOOP11 SURVEY – TASK ANALYSIS (CONT’D)
Task 2 (Item 11) / Artist Search Many users looking at the left-rail search cluster on the start page
(did they regard them as filter options?). The majority of users either agreed or strongly agreed that they
felt the results were easy to understand and that the navigation met their expectations for completing the task. We would need examine the qualitative feedback (Item 14) to discover why. Many appear to like the results are “straightforward”.
Some people thought their search results may have been compromised by misspelling an artist’s name
21
Success
Fail
Abandon
LOOP11 SURVEY – TASK ANALYSIS (CONT’D)
Task 3 (Item 15) / Item Details & Condition Most participants (76.6%) indicated that the item would meet
their qualifications for condition. However, over 20% (a total of 19 participants) were unsure.
Several participants expressed a wish to be able to better sort results overall, in greater detail (by price, condition, format)
Task 4 (Item 17) / Price Guide The majority of participants used the sorting options in results to
determine price, few sought out the Price Guide tool. Despite of this most reported that they found the “tool” useful
and that they would be likely to use the tool in the future. This may indicate that visitors value being able to search/sort by
price, whether or not there is a “tool” that provides this functionality. 22
Success
Fail
Abandon
Success
Fail
Abandon
LOOP11 SURVEY – TASK ANALYSIS (CONT’D)
Task 5 (Item 20) / Return Policy Despite a low success score, users still felt comfortable making a
purchase. Return Policy Had the highest abandon rate, as well as lengthy
completion times. Users relied on other means to determine how comfortable they
felt making purchases (e.g., PayPal protection). This task tests users’ understanding about MusicStack as a
marketplace. They have to know to go back to the item page, which means they must realize there may be multiple return policies if they’re buying from multiple sellers.
Some participants described prior situations where the condition did not match what was described by the seller.
The length of time spent on this task is highly indicative of the participants’ vested interest in return policies.
23
SuccessFailAbandon
LOOP11 SURVEY – TASK ANALYSIS (CONT’D)
Task 6 (Item 23) / Add Album to Cart This task had a high success rate. Fails consisted of mostly people
who just refreshed off of the home page. Users favored left-rail search fields. While the unmoderated test did not reveal a great deal of
qualitative information, the moderated task was interesting to watch because after working through the first 5 tasks the participant instantly executed a search.
Despite the initial learning curve, once familiar with the site users seem to be able to navigate it fairly well. The common theme for most feedback seems to be the visual look of the site.
24
SuccessFailAbandon
LOOP11 SURVEY – TASK ANALYSIS (CONT’D)
Task 7 (Item 24) / Save Item Only a small number mixed up Watch List and Wish List (fewer
than 5) This feature was unavailable during one moderated test. However, the participant seemed to expect it to appear in the
correct place, or where it normally appears.
25
Success
Fail
Abandon
From post-survey questions: Search and filtering options need to be more robust Visual layout cues need to be more prominent; users had specific comments about the lack of items that stood out Design itself could be updated, many users had comments about the visual design, but it didn’t affect their ratings
of the site very negatively There were a few comments directly about making the site more browsable, and others indicating a similar wish
for options that weren’t directly related to making a purchase; this might be satisfied with improving the search/filter options
User experience seems to be equating to the visual appeal of the site for most participants.
RECOMMENDATIONS FROM LOOP11 TASKS
Emphasize genre search to better enable browsing the site and improve search indexing for genre terms
Make item condition more visible, and link to seller’s description of condition if a controlled vocabulary or global conditions cannot be implemented.
Primary complaint is the visual appearance of the results, rather than the results themselves. Maximize effectiveness of search box by making it work as a filtering tool as well. There were a few suggestions about having a spelling correction function available To further convey marketplace concept, consider linking the seller’s name from the cart to their
profile page. Keep the price guide and feature more prominently. Possibly add a link in the utility navigation Make the “wish list” a more prominent feature of the site, either through the My Account link, or
making it more visible on the item details page. Need to clearly differentiate Wish List from Watch List, by naming differently or separating visually; at minimum add tooltips.
26
USER INTERVIEWS
User interviews were conducted with 2 novice and 3 expert users who volunteered to take part, and were conducted via phone. The questions were divided into general computer use and online purchase topics, then asked more specifically about MusicStack.com use – purchasing and selling habits, opinions about site features and usability, with an opportunity for the user to give other feedback that may not have been part of the script.
All five users were experienced computer users (, with some experience in online purchasing. Their stated frequency of use for MusicStack.com was 2-5 visits per week, and two had made purchases.
The summary content of these interviews is below:
LIKES• Huge variety of items
• Using the site for both buying/selling and research
• Price guide tool, especially for research
• Seller statistics
• Ability to search by title or artist
DISLIKES• Lack of visual hierarchy
• Outdated visual style
• Unclear what site is about
• Search function is not ‘direct enough’
• Lack of detail in filtering results
WANTS• New items featured more
prominently (or RSS feed option?)
• More detail/consistency in listings
• Better sorting ability for results (e.g., by price, condition, format, whether item is an original)
Many, if not most, of these comments were also found in the remote online testing sessions.
27
FEEDBACK – ONLINE FORUMS
28
Information was collected from Google Analytics Data Hub Partners, which include: Reddit, Pocket, Disqus, and Delicious, among others. The data represents some general conversation happening around MusicStack.com that was posted to these services. While not exhaustive, it provides a basic look into public sentiment: “Great way to shop through independent stores and sellers” “[…] I find more US sellers on musicstack to buy from.” “[…] also a great way to gauge prices of albums…” “[…] a good place to check real prices for vinyl.” “Looks like a useful resource.”
Sentiment regarding musicstack.com on these services was positive. Users viewed MusicStack.com as a helpful resource for music, vinyl, and vinyl pricing. Users found value in being able to shop independent record stores and valued the number of U.S. sellers. The most common type of link shared were links to specific albums or products. Users grouped MusicStack.com most often with gemm.com and discogs.com. Additional links include gohastings.com and insound.com.
Take advantage of terms like “independent”, “indie”, “independent sellers”, and “independent stores”. This aligns with demographic that appears in Alexa data (page __.
Leverage Price Guide as useful tool to attract new visitors and new traffic to the site.
RECOMMENDATIONS29
RECOMMENDATIONS – USER PROFILES
30
From the review and research phase, two user profiles have been established, with two (overlapping) sets of tasks. To aid these users in generally navigating the site and accomplishing these tasks in particular, recommendations follow.
NEW USERS
Primary Tasks• Browse/explore• Signup• Simple search• Item details• Add to cart• Place an order
EXPERIENCEDUSERS
Primary Tasks• Advanced search• Item details• Sell your item
RECOMMENDATIONS - GENERAL
31
Make the purpose of the site as a music marketplace more apparent Make the site a destination for not just buying and selling music, but for
browsing, education and entertainment Encourage new users with clear navigation, well-executed basic and
advanced search options, and promote the unique features of the site Update the site features to meet current design and usability expectations
(e.g., breadcrumb navigation, using filters to dynamically update search results, global navigation cues)
More specific recommendations can be broken into four areas: Content Design Usability Technical
RECOMMENDATIONS - SPECIFIC
CONTENT• Clearly stated information and whether they apply
sitewide or to individual sellers• Policies (privacy, returns)• Security• Buying/selling guidelines
• Vocabulary• Make it consistent• Mind the diversity of the audience
• Feature site tools• Price guide• Glossary of terms (or simply a link to external
explanations for uncommon terms; largely an issue of user-generated content)
• Social tools• Highlight to increase engagement• Feature social content more prominently?
• Improve home page intro text (who the site is for, what you can find, what’s unique)
32
DESIGN• Update visual design
• Consistency in fonts and colors
• Clean graphics
• More focused layout with better information hierarchy
• Visually emphasize the large variety of items available
• Clearer difference between site content and advertising
• Make site more browsable with low-commitment content to encourage exploration
RECOMMENDATIONS - SPECIFIC
USABILITY• Improve organization of information
• For buyers versus sellers, for different types of music, etc.
• Allow overviews of sections before executing specific searches (in music or price guide)
• Improve orientation for users• Lots of potential for ‘rabbit holes,’ how to keep
users oriented in the site (e.g., breadcrumbs)
• Search• Improve sorting/filtering of results• Make search tool global• Include predictive text/spelling suggestions in
search
• Streamline processes • Signup• Checkout
• Persistent navigation elements to add:• Global navigation in header (rather than footer
only)• Contextual navigation (e.g., breadcrumbs)
33
TECHNICAL• Image size
• Improve consistency of sizing in results
• Localization improvements?• Language• Display of local time
• More consistency in metadata (where not part of user-generated content)
• Create placeholder content where there is information missing
• Make site mobile friendly if not completely responsive
USE CASE #134
USE CASE SCENARIOS
Three use cases can be used to demonstrate many of the current site’s areas for improvement.
1. User begins from MusicStack home page, conducts a Genre search (informational browsing/exploring)
2. User searches for an Artist from the MusicStack home page (searching with or without intent to purchase)
3. User conducts a Google search for a particular album and lands on the Music Stack site at an Item page, moves to an Item Detail page, then selects the item and progresses to the Cart/Checkout process (targeted searching/purchasing)
Each case will be demonstrated with current screenshots, annotated with critiques, then proposed wireframes, with improvements suggested by the previous research.
Since redesign of the home page is not a priority for the client, only general visual improvements will be suggested in the wireframes
Also note: some minor changes have been made to the live site since the interactions illustrated here were captured, but the recommendations remain the same.
35
USE CASE #1: GENRE SEARCH (CURRENT)
36
STEP 1:User wants to discover more about a particular music genre. Genre search can be conducted two ways:
A. Click on the bottom rail link for “Genres” ORB. From the top dropdown select “Genre” and enter one as a search term
By isolating the Genre options at the very top and bottom of the page, users are not encouraged to casually explore
Focus of the homepage stays strictly on buying/selling, leaving out users who may not have decided that they are ‘in the market’ for anything in particular.
1
2
User begins from MusicStack home page, conducts a Genre search for informational browsing/exploring purposes. Facilitating this kind of casual exploration would help new users become familiar with the site’s offerings and provide experienced users with a better way to expand their knowledge.
USE CASE #1: GENRE SEARCH (CURRENT)
37
STEP 2/Option A:From clicking on the bottom “Genres” link, this is the resulting page.
No prominent page title to let user know they have arrived at the correct destination
The four artist images are seemingly random; are they ‘featured’ artists? Based on what criteria (most popular, most recent)? What genres do they belong to?
The text block is similarly untitled, and with very few links or other breaks in the text to facilitate skimming.
1
2
3
User begins from MusicStack home page, conducts a Genre search for informational browsing/exploring purposes. Facilitating this kind of casual exploration would help new users become familiar with the site’s offerings and provide experienced users with a better way to expand their knowledge.
1 2
3
USE CASE #1: GENRE SEARCH (CURRENT)
38
STEP 3/Option A:User selects “Jazz” as a Genre to explore, then selects “Fusion.”
As in previous screens, no page title or breadcrumbs to indicate current site location to user
List of artists is not in any easily discernible order (alpha? By last name? Alpha individuals then alpha by band name?)
As in previous screen, artist images are given no context to assist the user in explaining why they have images and others do not.
1
2
3
User begins from MusicStack home page, conducts a Genre search for informational browsing/exploring purposes. Facilitating this kind of casual exploration would help new users become familiar with the site’s offerings and provide experienced users with a better way to expand their knowledge.
1
2
3
USE CASE #1: GENRE SEARCH (CURRENT)
39
STEP 2/Option B:User has selected “Genre” from the homepage dropdown, and entered “Fusion” in the search box.
As in previous screens, no page title or breadcrumbs to indicate current site location to user
The image at left is what fits on a 1360 x 768 screen display; the first indication of any actual results is near the bottom, i.e., All Items (1836).
The original search term remains at the top, but with no way to further refine the results being apparent as with the other means of search (e.g., lists of artists)
1
2
3
User begins from MusicStack home page, conducts a Genre search for informational browsing/exploring purposes. Facilitating this kind of casual exploration would help new users become familiar with the site’s offerings and provide experienced users with a better way to expand their knowledge.
1
2
3
1
2
3
USE CASE #1: GENRE SEARCH (PROPOSED)
40
STEP 1:User wants to discover more about a particular music genre.
Site accommodates both browsing and targeted search
Basic Artist/Title/Genre search is default, with a link to Advanced Search
“Featured Store” section has direct links to sign up as a seller, as well as a link to the Site Tools
Site Tools is also made part of the global top navigation (currently this might only be the Price Guide, but could also include a Glossary of Terms)
Just Sold items are featured, keeping it from being too text-heavy, and providing dynamically updated content; however, it would be the user’s choice to scroll through the items, rather than an auto-rotating carousel.
Adding a tagline under the logo reinforces the concept of MusicStack as a marketplace, rather than a retail seller themselves
1
2
3
4
5
6
1 2
3
4
5
6
USE CASE #1: GENRE SEARCH (PROPOSED)
41
STEP 2/Option A:From clicking on the bottom “Genres” link*, this is the resulting page.
Basic search box remains at top of page, with term Genre populated
Search box title changes to Refine Your Search, Advanced Search link is also available to refine the search
Page-specific social sharing options are collapsed into a Share This Page button
Random artists are replaced with a carousel of Most Popular artists in the Genre (image + link to Artist info) Recommend setting a limit of 5-10 artists, and allow users to select whether to scroll through or not
Informational text about Genres is kept below the links
1
2
3
* Site was recently updated to eliminate the Genre link in the footer, eliminating one avenue for users to explore more casually.
4
5
USE CASE #1: GENRE SEARCH (PROPOSED)
42
STEP 3/Option A:User selects “Jazz” as a Genre to explore, then selects “Fusion.”
User selection appears in Search box and as part of page title; terms are clickable to enable user to move backwards
Similar to previous page, large image features Popular Artists in the selected sub-genre
Informational text is kept below the links/image section. It can provide an educational element for the user, but the design does not suffer if there is no text available for a given sub-genre.
1
2
3
1
2
3
USE CASE #1: GENRE SEARCH (PROPOSED)
43
STEP 3/Option A:User selects “Jazz” as a Genre to explore, then selects “Fusion.”
Search box expands to accommodate more detailed searches; this is the ‘Advanced Search’ version of the same box
Search can contain as many fields as necessary, but for these wireframes it is limited to six
Results are clarified with number of total results and statement of listing order
Social options and the ability to set an alert are grouped above the results set
Results are grouped into fewer tabs for easier scanning
While clickable headers to sort results would greatly aid usability, the current site structure does not support it; this is being regarded as a Phase II improvement
1
2
3
4
5
1
2
3 45
6
6
USE CASE #244
USE CASE #2: ARTIST SEARCH (CURRENT)
45
STEP 1:User enters the name of an artist in either the topmost search box or the Artist field in the left rail search box.
User begins from MusicStack home page, conducts an Artist search for a favorite performer. They may be looking for a particular item to add to their music collection, or just browsing to familiarize themselves with an artist they only recently discovered.
USE CASE #2: ARTIST SEARCH (CURRENT)
46
STEP 2:User arrives at a results page; at left are shown the different results pages between searching for “Clapton” versus “Eric Clapton.”
Site has no mechanism for improving a search term; no bio text appears for “Clapton”
In both searches, the results set does not begin til the very bottom of the page, where a casual browser may easily miss them
No image is assigned for the populated Artist result; page is very text-heavy and not conducive to skimming
User begins from MusicStack home page, conducts an Artist search for a favorite performer. They may be looking for a particular item to add to their music collection, or just browsing to familiarize themselves with an artist they only recently discovered.
Search for “Clapton”
Search for “Eric Clapton”
1
1
2
2
3
3
USE CASE #2: ARTIST SEARCH (CURRENT)
47
STEP 2a:The results page for this particular search is extensive – the tall image is a vastly reduced size of the full results page
Lack of clear filtering mechanisms makes this an intimidating list to wade into
No artist image is assigned for this result – there should at least be a default image for each artist or, alternatively, a ‘definitive’ album cover image to represent them.
For extensive search results (see the incredibly reduced image at left, showing the full results list of an Artist search for Eric Clapton), there should be more obvious options to further refine the search, e.g.:• Change the title of the search box at this
screen to “Refine Your Results” to make the option clear
• Add explanatory text above the result set to indicate that entries can be made in the search box and applied to the result
User begins from MusicStack home page, conducts an Artist search for a favorite performer. They may be looking for a particular item to add to their music collection, or just browsing to familiarize themselves with an artist they only recently discovered.
1
1
2
3
2
3
USE CASE #2: ARTIST SEARCH (CURRENT)
48
STEP 3:User can attempt to narrow the results set by entering a known album name in the left rail search box
It is unclear from the box title “Search Settings” whether this operation will begin a new search or act as a filter for the current results
This page does not include a stated number of results like the previous page, making it impossible to know how far (or if) the search has been narrowed – the results now begin to be divided by format.
User begins from MusicStack home page, conducts an Artist search for a favorite performer. They may be looking for a particular item to add to their music collection, or just browsing to familiarize themselves with an artist they only recently discovered.
1
2
1
2
USE CASE #2: ARTIST SEARCH (PROPOSED)
49
Same home page; as opposed to current site, only one place to search for artists, but it is more prominent
Search function should be predictive and offer suggestions for misspellings
1
2
USE CASE #2: ARTIST SEARCH (PROPOSED)
50
The extended search bar stays at the top of the page.
Search options populate with the initial search term from the home page, and subsequent info entered would further filter results.
The artist image/bio info is character-limited with option to Read More (either expands the section or goes to a new page)
System should provide a default image for each artist and default text if there is an empty result set
Social and sharing options, plus a link to detailed discography, are condensed under artist name
Consolidating the tabs into sets of letters, rather than one for each letter helps scanability.
Adding the title above the results to match the breadcrumbs is part of the orientation improvement
1
2
3
4
5
6
7
USE CASE #2: ARTIST SEARCH (PROPOSED)
51
Search field is populated with selected album title, and album detail box below is formatted as artist detail box
Set an Alert stays the same, social options are collapsed under Share this Page to conserve space.
Consolidating the tabs into sets of letters, rather than one for each letter helps scannability.
Total number of results is stated at top
Section headers are aligned with results total as jump links; ideally, sorting by format would be an option, but the current site structure does not support it, so this is a compromise to make the result set more easily understood at a glance
1
2
3
4
5
1
2
3
4 5
USE CASE #352
USE CASE #3: ITEM SEARCH AND PURCHASE (CURRENT)
53
The resulting MusicStack page confirms the user’s search, but adds some artifact in the text (‘fsz’). Search terms display in both the top and left rail search boxes
There is no overview text in the box that occupies most of the page’s real estate
A user might still make it to the bottom of the page to the alphabetized tabs and click on J to quickly get to the desired album
System gives no indication whether or not a user is signed in to their account
User conducts a Google search for a particular album, with intent to purchase. They enter the Music Stack site at an Item page (bypassing the home page), find more detail about their selected item, then go to the checkout process.
1
2
STEP 1:For this example, there is a presumption that the user is acquainted with MusicStack and includes the term in their Google search for a particular item.
3
1
2
3
4
4
USE CASE #3: ITEM SEARCH AND PURCHASE (CURRENT)
54
STEP 2:Clicking the ‘J’ tab brings the user to a listing for the desired album
It is unclear why the surrounding results have also appeared in a search for “Journeyman”
User can see the item is available in several formats, and a total number of items is displayed
Clicking on the item name leads to a results page where items are sorted by format, but there is no reiteration of the total results set size
Listing by format is the default and not sortable by other filters of the user’s choosing
Even though there is existing overview text on this item (as seen as part of the artist search (step 3 in Use Case #2), that text does not appear here, indicating (lack of consistent links) in the database, and missing an opportunity to share existing information with users
User conducts a Google search for a particular album, with intent to purchase. They enter the Music Stack site at an Item page (bypassing the home page), find more detail about their selected item, then go to the checkout process.
1
22
3
3
4
4
5
1
5
USE CASE #3: ITEM SEARCH AND PURCHASE (CURRENT)
55
STEP 3:The user has finally arrived at an item listing for one version of the desired item, the Eric Clapton album “Journeyman”
Even if user selects an item with a thumbnail image, the resulting item detail page may not have an image, creating possible confusion for the user
The buttons are all similar and lined up with no indication of any hierarchy
There is no way to select multiple items to compare, making it necessary for the user to ‘pogo-stick’ back and forth between different listings to see any details of interest
User conducts a Google search for a particular album, with intent to purchase. They enter the Music Stack site at an Item page (bypassing the home page), find more detail about their selected item, then go to the checkout process.
11
2
2
USE CASE #3: ITEM SEARCH AND PURCHASE (CURRENT)
56
STEP 4:User has selected the album to purchase, and also added a piece of memorabilia to their cart.
Cart shows total items and total cost, with an explanation that shipping charges will be added
If they choose to continue shopping from this point, and return to the results page, there is no indication of an existing, populated shopping cart (even though “View Cart” button at the top will return user to their correctly populated cart)
User conducts a Google search for a particular album, with intent to purchase. They enter the Music Stack site at an Item page (bypassing the home page), find more detail about their selected item, then go to the checkout process.
1
2
1
2
USE CASE #3: ITEM SEARCH AND PURCHASE (CURRENT)
57
STEP 5:User has progressed to checkout.
Page would benefit from more emphasis on the text stating MusicStack is not the seller
The prices are visually distant from each other
There is no running total on the page
1
2
3
1
2
3
USE CASE #3: ITEM SEARCH AND PURCHASE (PROPOSED)
58
Expanded search options allow user to narrow their results
Main text area contains basic item info that could apply to all results (e.g., year of release, record label, etc.)
“Share This Page” has the item-specific sharing options for Facebook, Twitter and Pinterest in a dropdown
“Set an Alert” option brings up ability to save to either “Wish List” or “Watch List”
1
2
3
4
1
23
4
USE CASE #3: ITEM SEARCH AND PURCHASE (PROPOSED)
59
User selects one item from previous results to arrive at individual item listing
Main text area contains item details for format, condition, etc. ‘More Condition Information’ link goes to comprehensive glossary of terms or compilation of condition abbreviations
Search box reverts to minimal state
Return to Results link provided above item listing
No default image recommended here, since it depends on the individual seller. In this case, if seller does not provide an image, there should be default text to clearly state such
Link in Price allows user to change currencies
Seller characteristics are grouped for easier reading
Add to Cart links to cart; no need for separate Check Out button at item detail level
1
2
3
4
5
6
7
1
2
3
4
6
7
5
USE CASE #3: ITEM SEARCH AND PURCHASE (PROPOSED)
60
Lining up the fields for each seller makes it clearer that shipping and payment options must be selected per seller.
Line up prices in a column by themselves, with a total at the bottom that dynamically updates as shipping options are chosen.
Page title and cart icon at top confirm correct number of items in cart
If user is signed in, username is confirmed
Check out is the main call to action, with a simple link to Continue Shopping
Continue Shopping link would return user to most recent results page
1
2
3
4
5
6
1
2
34
56
PHASE II IMPROVEMENTS
61
The previous section’s recommendations can be considered as “Phase I” of the site redevelopment. Below are suggestions for future improvements: Improving for future growth
Translation to more languages Implementing Facebook graph Cleaner metadata
Building on e-mail/social platform relationships Site already communicates via e-mail for instances such as cart abandonment – are there
other ways to build relationships there?
Marketing updates Polishing text, especially making it clear to new visitors that it’s not a retail site but an
exchange one
Transition plan Communicating with established users (e.g., “Nobody panic, we know it’s been a while, but
the site is going to get some updates.”
Client has plans for: Adding Discogs data (more population of discographies, track listings, etc) will create a
better ratio of information to commerce Revising shopping cart layout
APPENDIX62
APPENDIX ITEMS
63
Loop11 script used for testing User interview questions Details of evaluation heuristics Assorted sketches from working documents
LOOP11 SCRIPT
64
Thank you for agreeing to take part in our usability study. The goal of this evaluation is to learn how the MusicStack site performs for people interested in purchasing music online. Please note that we are evaluating the website. We are not testing you. There are no right or wrong answers. Please use the site as naturally as you would on your own. Your identity will not be revealed, and your contributions to this evaluation will be kept confidential and viewed only by those associated directly with the study. You can expect this study to take between 15 - 30 minutes.
* If the green task box is blocking a section of the website that you need to access, be sure to use the green box's move and/or hide controls.
1. How many hours per week do you spend online? (including on a mobile device or tablet)
2. Have you ever made a purchase online?
3. In a typical month, how many purchases will you make online?
4. What is your preferred music format?
5. Where are you most likely to make a music purchase?
6. Have you ever purchased music online?
7. Thank you for answering our first set of questions. Here is your first task. You are looking for the perfect
birthday gift for a friend. Your friend is an avid blues music fan and vinyl record collector. You decide to search
for your gift on MusicStack. Using MusicStack, find a blues record your friend will like.
8. The navigation of MusicStack allowed you to easily complete this task.
9. The design of MusicStack met your expectations for completing this task.
LOOP11 SCRIPT
65
10. Please explain why you either agree or disagree with the previous statements.
11. Your friend just posted a video of their favorite blues artist, Robert Cray. An album by this artist would
make the perfect gift. Locate albums by this artist."
12. The search results were easy to read and understand.
13. Navigation met your expectations for completing this task.
14. Please explain why you either agreed or disagreed with the previous statements.
15. You decide to purchase a vinyl copy of Midnight Stroll by Robert Cray. Since it is a gift, you want it to look
and sound perfect. Select a copy of this album for sale that meets your requirements for sound quality and
appearance. Finally, add it to your cart.
16. This item will meet your expectations of quality and condition.
17. Before you make your purchase, you want to determine if the price you are paying is fair. Locate the
highest and lowest prices paid for the Midnight Stroll album on MusicStack.
18. How useful did you find this tool?
19. How likely would you be to use this tool in the future?
LOOP11 SCRIPT
66
20. Before you make your purchase of Midnight Stroll, you want to make sure you will get a full refund if you
have to return this item. Determine whether or not you will get a refund.
21. How comfortable would you feel making this purchase?
22. Please explain why would feel comfortable or uncomfortable making this purchase.
23. Now that you have found a great gift for your friend, you want to find one for yourself. Locate an album by
one of your favorite musical artists and add it to your cart.
24. You are not ready to purchase this item just yet. Return to the details page for the album you just added to
your cart. On the details page, indicate that you would like to save this item for later.
25. Now that you've finished the tasks, we have a few final questions to ask you about the MusicStack website.
First one: Overall, how would you rate MusicStack for ease of locating music to purchase?
26. Overall, how would you rate the shopping experience of MusicStack?
27. Tell us about your experience using MusicStack.com. What stood out?
28. How likely are you to recommend MusicStack to a friend?
29. How would you describe MusicStack to a friend who has never used the site?
USER INTERVIEWS - QUESTIONS
About you: How often do you use the site? How many purchases have you made? Do you primarily use the site to purchase or for other reasons (e.g., research)? Have you ever sold anything on the site?
About the site: What do you think about the homepage? How do you feel about the overall look of the website? Are there any features that you would like to be more prominent or easier to find
than they are? How do you use site How do you feel about the presentation of item info in results page? Have you used other music marketplace sites? How did you come across MusicStack? Are there any features from those sites you would like to see on MusicStack? Are there any problems you’ve had with other sites you’d like to see MusicStack
avoid? What would you like to see us change?
Pass onto Dave:
Interviews were conducted via phone with 2 novice and 3 expert users who volunteered to take part. The questions were divided into general computer use and online purchase topics, then asked more specifically about MusicStack.com use – purchasing and selling habits, opinions about features and usability, with an opportunity for the user to give other feedback that may not have been part of the script.
67
HEURISTIC EVALUATION
68
Nielsen's heuristics: Jakob Nielsen's heuristics are probably the most-used usability heuristics for user interface design. As published in Nielsen's book Usability Engineering they are as follows: Visibility of system status:
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Match between system and the real world:The system should speak the user's language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
User control and freedom:Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Consistency and standards:Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Error prevention:Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
HEURISTIC EVALUATION
69
Recognition rather than recall:Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Flexibility and efficiency of use:Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design:Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors:Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Help and documentation:Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
HOME PAGES
70
Project day 1 Client made some updates in the course of the project
HOME
71
HOME
72
HOME
73
HOME
74
HOME
75
GENRE
76
ITEM DETAIL
77
ITEM VIEW
78
Main text would be the detailed listing for the item (not the prose description?)
“Share This Item” has the item-specific sharing options for Facebook, Twitter and Pinterest
“Keep for Later” option brings up ability to save to either “Wish List” or “Watch List”
1
2
3
CART
79
CART
80