Table of Contents Concept Brief Requirement Specifications Project Timeline Personas Sitemap Conceptual Sketches User Scenario Technical Specifications 1st Iteration Prototype 1st Iteration Screen Shots 1st User Testing Report High-Fidelity Screen Shots High-Fidelity Prototype High-Fidelity User Testing Final High-Fideltiy Prototype
3 3 4 5-6 7 8-11 12 13 13 14-16 17-18 19-21 22 22 22
Concept Brief MusicPax: this is a website that is like Spotify or Pandora; it gives you the advantage of listening to music for free without the annoying ads and gives you unlimited amount of skips. There is a certain part of the website that I will be working on for my project and that is MusicPax Pearls. This is a part of the website that will want users to do more. MusicPax Pearls works by giving people offers that they will get after taking a survey. The user of the website has to take so many surveys to get the free music. After each time the user takes a survey they click on MusicPax Pearls, then it shows certain offers that they will be offered to be able to purchase from what they liked in the survey. If they want to perchase they can click on the offer and perchase it (e.g. buy one get one free.) The other thing that MusicPax Pearls has is a free offer notification on the page. So for a person that is filling out their surveys, they fill out more than they need to do a month. (e.g. if the user has to fill out 200 surveys a month to get their music for free and they fill out 500 surveys they will get to enter to win a free IPad).
Requirement Specifications Java script Html Databases: Host the ads Incentives Surveys
Project Timeline
Personas
Site Map
Sketches The user will be able to access pearls when clicking on the pearl link once clicked they will come to the main screen that will show them the offers that they got from taking the surveys. The offers that they have will be available for purchase when they roll their mouse over the offer. Once they roll the mouse over the picture they have two options to buy the offer now or they can get more info about the offer. Another thing on the main screen is the notification pearl on the top right of the main screen, this is where if the user does so much more surveys then they are supposed to do then they will get free things that they can redeem.
User Scenario
Technical Specs - PHP: Managing pages and special offers. - HTML: Create web pages. - CSS : Styling pages.
1st Iteration Prototype The 1st iterations can be found at http://5f5dv8.axshare.com
1st Iteration Screen Shots
Low-Fidelity User Testing Before starting the tasks each participant was explained what the player does and what all is offered to the player. They were given a series of tasks. Once the tasks were over they were asked a couple of questions: - What did you like the most in the website? - What did you like the least in the website? - Do you have recommendations for improvement? - How easily could you navigate through the information? - If you could get your music for free by doing the ad shuffle, would you do it?
Results All the participants successfully completed most of the tasks. The only task that was hard for people to do was looking for the free offers; they did not know that it was under the pearl. I found out that all the participants thought it was easy to navigate through each page. All the participants told me that if they could do the ad shuffle to get free uninterrupted music they would do it. With the participant questions at the end; most of the responses were about the same, the participants thought there was nothing that they did not like about the website. They liked when you’re able to roll over the offer and can see a little bit of
the offer details. After the user testing I received recommendations that I am going to use in making my final design: - User should be able to know that the free offers are under the pearl. - The user should be able to click on the free offer and make it blow up on a pop up page. - Should add a link to a map on the more info page to show the user where the place is located.
High-Fidelity Screen
2nd Iteration Prototype
The 2nd iterations can be found at http://r86clp.axshare.com
High-Fidelity User Testing The user testing for the final design was done by the same people that were in the first user testing group. After the final testing participants thought that all the changes looked good and the final design was good. The users did notice the changes in the design from the recommendations they made last time. I told them all after the testing what has changed if they didn’t already notice it.
Final Iteration Prototype
The Final iterations can be found at http://r86clp.axshare.com/