musicstack redesign

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

Upload: jslkent

Post on 29-Jun-2015

307 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: MusicStack Redesign

MUSICSTACK.COMWEBSITE REFRESHPROJECT REVIEW

Jennifer Stuart Lesch | IAKM-61098-004 | April 20141

Page 2: MusicStack Redesign

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

Page 3: MusicStack Redesign

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

Page 4: MusicStack Redesign

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

Page 5: MusicStack Redesign

REVIEW5

Page 6: MusicStack Redesign

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.

Page 7: MusicStack Redesign

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

Page 8: MusicStack Redesign

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

Page 9: MusicStack Redesign

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

Page 10: MusicStack Redesign

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

Page 11: MusicStack Redesign

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.

Page 12: MusicStack Redesign

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

Page 13: MusicStack Redesign

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

Page 14: MusicStack Redesign

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

Page 15: MusicStack Redesign

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

Page 16: MusicStack Redesign

RESEARCH & RESULTS16

Page 17: MusicStack Redesign

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.

Page 18: MusicStack Redesign

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

Page 19: MusicStack Redesign

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

Page 20: MusicStack Redesign

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

Page 21: MusicStack Redesign

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

Page 22: MusicStack Redesign

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

Page 23: MusicStack Redesign

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

Page 24: MusicStack Redesign

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

Page 25: MusicStack Redesign

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.

Page 26: MusicStack Redesign

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

Page 27: MusicStack Redesign

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

Page 28: MusicStack Redesign

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.

Page 29: MusicStack Redesign

RECOMMENDATIONS29

Page 30: MusicStack Redesign

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

Page 31: MusicStack Redesign

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

Page 32: MusicStack Redesign

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

Page 33: MusicStack Redesign

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

Page 34: MusicStack Redesign

USE CASE #134

Page 35: MusicStack Redesign

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

Page 36: MusicStack Redesign

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.

Page 37: MusicStack Redesign

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

Page 38: MusicStack Redesign

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

Page 39: MusicStack Redesign

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

Page 40: MusicStack Redesign

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

Page 41: MusicStack Redesign

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

Page 42: MusicStack Redesign

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

Page 43: MusicStack Redesign

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

Page 44: MusicStack Redesign

USE CASE #244

Page 45: MusicStack Redesign

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.

Page 46: MusicStack Redesign

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

Page 47: MusicStack Redesign

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

Page 48: MusicStack Redesign

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

Page 49: MusicStack Redesign

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

Page 50: MusicStack Redesign

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

Page 51: MusicStack Redesign

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

Page 52: MusicStack Redesign

USE CASE #352

Page 53: MusicStack Redesign

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

Page 54: MusicStack Redesign

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

Page 55: MusicStack Redesign

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

Page 56: MusicStack Redesign

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

Page 57: MusicStack Redesign

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

Page 58: MusicStack Redesign

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

Page 59: MusicStack Redesign

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

Page 60: MusicStack Redesign

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

Page 61: MusicStack Redesign

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

Page 62: MusicStack Redesign

APPENDIX62

Page 63: MusicStack Redesign

APPENDIX ITEMS

63

Loop11 script used for testing User interview questions Details of evaluation heuristics Assorted sketches from working documents

Page 64: MusicStack Redesign

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.

Page 65: MusicStack Redesign

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?

Page 66: MusicStack Redesign

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?

Page 67: MusicStack Redesign

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

Page 68: MusicStack Redesign

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.

Page 69: MusicStack Redesign

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.

Page 70: MusicStack Redesign

HOME PAGES

70

Project day 1 Client made some updates in the course of the project

Page 71: MusicStack Redesign

HOME

71

Page 72: MusicStack Redesign

HOME

72

Page 73: MusicStack Redesign

HOME

73

Page 74: MusicStack Redesign

HOME

74

Page 75: MusicStack Redesign

HOME

75

Page 76: MusicStack Redesign

GENRE

76

Page 77: MusicStack Redesign

ITEM DETAIL

77

Page 78: MusicStack Redesign

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

Page 79: MusicStack Redesign

CART

79

Page 80: MusicStack Redesign

CART

80