A music label specialized in music from South America asks you to improve the user experience. This quest is about heuristics and content organization!
- Upload the document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Pay attention to the global aspect of the documents. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
- [What you really get from a heuristic evaluation](https://uxmag.com/articles/what-you-really-get-from-a-heuristic-evaluation)
- [Heuristic analysis for UX: How to run a usability evaluation](https://uxdesign.cc/heuristic-analysis-for-ux-how-to-run-a-usability-evaluation-12c86d43936f)
- [Heuristic analysis in the design process](https://uxdesign.cc/heuristic-analysis-in-the-design-process-usability-inspection-methods-d200768eb38d)
- [A new usability heuristic evaluation checklist](https://uxplanet.org/a-new-usability-heuristic-evaluation-checklist-259f588da308)
Stick to the website you have chosen in the previous exercise "heuristics" and design a site map. The site map should include all the pages of the website as well as the connections and hierarchy.
- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
"The organization, search, and navigation systems that help people to complete tasks, find what they need, and understand what they’ve found’ Peter Morville | Information Architecture for the WWW.
Let's practice Jobs-to-be-done to be more specific about how a music label website could be improved.
Read about Jobs-to-be-Done and the psychologic dimension behind this tool.
Then, find someone (your "user") around you who likes music a lot.
Ask them about what they would do on a music label website. Ask them why, why and why to understand the emotion behind an action, and the purpose behind a simple visit on a website.
Complete the JTBD template below including the true purpose of your "user".
And remember: You are not your user!
- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the document.
**Deliverable:**
- A complete Jobs-to-Be-Done on a PDF document.
- Complete this sentence and include it on the document "When **\_\_**, I want to **\_** So I can **\_**"
**Tips:**
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don"t overload your design with too much details!
**Resources:**
- [What is a job to be done?](https://jobs-to-be-done.com/what-is-jobs-to-be-done-fea59c8e39eb)
- "When we identify user stories early in the design process, we let them dictate the design decisions. Rather than let our preconceived ideas of how the product should be or should look do it." UX Booth
- "Documenting the what and why of each element promotes organization and makes the handoff to the development team much smoother." UX Booth
- "When we buy a product, we essentially "hire" something to get a job done. If it does the job well, when we are confronted with the same job, we hire that same product again. And if the product does a crummy job, we "fire" it and look around for something else we might hire to solve the problem." Clayton M Christensen
In the present situation, the websites are not ideal to complete the Jobs-to-be-Done your user has in mind. So let's practice card sorting to rearrange the content of the website!
Organize a card sorting workshop with the content of the website you chose in the exercise "Heuristics".
To do so:
- Define your research goals.
- Prepare the material.
- Find participants.
- Run a card sorting workshop on 5 people.
- Suggest a new taxonomy (content organization).
Don't forget to:
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within all written documents.
**List of websites:**
- [Universal Music Latin America](https://www.universalmusica.com/)
- [Delta Records](https://deltarecords.net/)
- [Zoho Music](https://www.zohomusic.com/)
- [Luaka Bop](https://www.luakabop.com/)
- [Rimas Music](https://rimasmusic.com/)
- You can choose another one, as long as it is a South American music label.
### Deliverables
- A card sorting workshop script with the research goals (PDF document).
- Pictures of the ongoing workshop.
- A document to show the new content organization (it can be a picture of the board with sticky notes or the digital version).
**Tips:**
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
- [Basics on how to conduct card sorting](https://uxdesign.cc/basics-on-how-to-conduct-card-sorting-6e4ccc7cc261?sk=cafd49e16c71a72c3fad93e63c1998f1)
- [Card Sorting — what, how & the perks](https://uxdesign.cc/card-sorting-what-how-the-perks-29f6cb020270)
- [10 things to know about card sorting](http://www.measuringu.com/blog/card-sorting.php)
- [Card sorting: a definitive guide](http://boxesandarrows.com/card-sorting-a-definitive-guide/)
Pick a product (a record, a song or an album) from your music label website.
Based on the new taxonomy (content categorization), show the different paths a user has to take to reach the product with a series of wireframes.
**List of websites:**
- [Universal Music Latin America](https://www.universalmusica.com/)
- [Delta Records](https://deltarecords.net/)
- [Zoho Music](https://www.zohomusic.com/)
- [Luaka Bop](https://www.luakabop.com/)
- [Rimas Music](https://rimasmusic.com/)
- You can choose another one, as long as it is a South American music label.
Don't forget to:
- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.
### Deliverables
- Wireframes (6 to 12 screens) from the home page to the product page, on Figma.
**Tips:**
- Drawing a user journey first might be helpful before rushing into wireframes
- Drawing paper prototypes before going digital might save you some time.
- Several paths are encouraged
- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
Vocabulary:
- Low-Fidelity: Paper Prototypes - [Example here](https://miro.medium.com/max/1400/1*5nUfqqA2gjdAYHagjbHA5w.jpeg)
- Mid-Fidelity: Wireframes - black and white, only the main elements, on digital prototype tools - [Example here](https://miro.medium.com/max/1400/1*eGSfaxwYbxUFomYbyO6GWw.png)
- High-Fidelity: Wireframes with color, styles, graphical details, and micro-interactions - [Example here](https://miro.medium.com/max/1400/1*Xn0HSKAvhr4TZzC9lN5udw.gif)
**Resources:**
- [How to start sketching and wireframing](https://uxdesign.cc/how-to-start-sketching-and-wireframing-84a821f092e2)
- [Why should product teams use wireframes more often?](https://uxdesign.cc/why-should-product-teams-use-wireframes-more-often-60e34a2bc55)
- [The 5-pass reduction wireframing: A minimalist UX technique](https://uxdesign.cc/the-5-pass-reduction-wireframing-a-minimalist-ux-technique-aa415aad9ce2?sk=a218ac4db9d1049249bd381fbc5edeee)
- [The art of designing good wireframes](https://uxdesign.cc/the-art-of-designing-good-wireframes-8a2a9c10a95b)
**Recommended tools:**
- Figma.
## Test protocol
### Instructions
Prepare a protocol for usability testing.
Recommended steps:
- Define the scope of the test.
- Recruit 5 users.
- Identify objectives: What are you proving?
- Establish metrics: How are you proving your design is efficient?
- Describe the steps and the instructions.
- Write an introduction to greet their user.
- Write a conclusion to thank the user.
Don't forget to:
- Upload the PDF document on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the document.
**Deliverable:**
- A PDF document with a test protocol.
**Tips:**
- Pay attention to the global aspect of the document. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources**
- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
- [Usability testing: what is it and how to do it?](https://uxdesign.cc/usability-testing-what-is-it-how-to-do-it-51356e5de5d)
**Quote:**
- You need to detect: How many errors do users make? How severe are these errors? How easily can they recover from the errors?
- Upload the documents on Github, in a zip folder named “ProjectTitle_Name_FirstName”, with all project deliverables as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, the first deliverable can be named as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within all written documents.
### Deliverables
- Pictures of the ongoing test.
- A PDF document with the conclusions from each test and 3 major ideas to improve the prototype.
**Tips:**
- Pay attention to the global aspect of the deliverables. They must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!
**Resources:**
- [Running a usability test](https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html)
- [How to do a user interview (tutorial from Google Ventures)](https://www.youtube.com/watch?v=Qq3OiHQ-HCU)
- [The art of guerrilla usability testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)
- [How to write a user testing report that people will actually read](https://uxdesign.cc/how-to-write-a-user-testing-report-that-people-will-actually-read-652d15d2f92e)
**Quote:**
- To get trustworthy results in your test, you can’t ask your customers to use their imagination. You’ve got to show them something realistic. If you do, their reactions will be genuine.
