Music Stack Redesign

MUSICSTACK.COM
WEBSITE REFRESH
PROJECT REVIEW
Jennifer Stuart Lesch | IAKM-61098-004 | April 2014
1

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

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 visitors
3:22 average length of site visit
46% overall bounce rate
56% 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.com
Bounce rate 48.20% 34.20% 51.70% 49.30%
Engagement
Daily page views (per visitor) 5.0 9.6 2.9 2.4
Length of visit (min:sec) 4:12 6:21 2:44 2:05
Demographics
Gender (primary) Male Male Male Male
Education level College/some Graduate College Some college Some college
Site (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
2
2
2
3
2
1
3
3
2
2
2
2.18
KEY: 0=poor | 1=fair | 2=good | 3=excellent
1
2
2
2
2
3
1
2
3
1
2
1.90
2
2
2
2
1
2
2
1
2
1
1
1.40
2
2
2
1
1
2
1
2
1
1
1
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

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
Success
Fail
Abandon

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

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

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
Success
Fail
Abandon

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
Success
Fail
Abandon

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.

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
EXPERIENCED
USERS
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 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” OR
B. 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.

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
1 2
3

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
1
2
3

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
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

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

42
STEP 3/Option A:
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

43
STEP 3/Option A:
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 4
5
6
6

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.

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
Search for “Clapton”
Search for “Eric Clapton”
1
1
2
2
3
3

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

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.
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

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

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 #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

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
checkout process.
1
2
2
3
3
4
4
5
1
5

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
checkout process.
1
1
2
2

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)
checkout process.
1
2
1
2

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

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

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
3
4
5
6

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

Music Stack Redesign

Recommended

Recommended

More Related Content

Similar to Music Stack Redesign

Similar to Music Stack Redesign (20)

More from JSLKent

More from JSLKent (6)

Recently uploaded

Recently uploaded (20)

Music Stack Redesign