{"id":1301,"date":"2021-11-12T00:00:07","date_gmt":"2021-11-12T05:00:07","guid":{"rendered":"http:\/\/timtanhuynh.com\/ux\/?page_id=1301"},"modified":"2023-09-12T18:39:33","modified_gmt":"2023-09-12T22:39:33","slug":"website-special-olympics","status":"publish","type":"page","link":"http:\/\/timtanhuynh.com\/ux\/design\/website-special-olympics\/","title":{"rendered":"Website: Special Olympics"},"content":{"rendered":"<ol>\n<li><a href=\"#overview\">Overview<\/a><\/li>\n<li><a href=\"#process\">Process\n<ol>\n<li><a href=\"#empathize\">Understand: Empathize<\/a><\/li>\n<li><a href=\"#define\">Understand: Define<\/a><\/li>\n<li><a href=\"#ideate\">Explore: Ideate<\/a><\/li>\n<li><a href=\"#prototype\">Explore: Prototype<\/a><\/li>\n<li><a href=\"#test\">Materialize: Test<\/a><\/li>\n<li><a href=\"#iterate\">Materialize: Iterate<\/a><\/li>\n<li><a href=\"#finalize\">Finalize<\/a><\/li>\n<\/ol>\n<\/li>\n<li><a href=\"#deliverables\">Deliverables<\/a><\/li>\n<li><a href=\"#takeaways\">Takeaways<\/a><\/li>\n<\/ol>\n<h2 id=\"overview\">Overview<\/h2>\n<figure>\n<div><a href=\"\/ux\/wp-content\/uploads\/healthy_at_home.jpg\"><span><img decoding=\"async\" src=\"\/ux\/wp-content\/uploads\/healthy_at_home.jpg\" alt=\"Healthy at Home, home page\" width=\"596\" \/><\/span><\/a><\/div>\n<\/figure>\n<p>Five colleagues and I recommended improvements to <a href=\"https:\/\/sohealthyathome.ca\">Healthy at Home<\/a>, a Special Olympics website. This project was done for a course in collaborative user-experience design. We partnered with Special Olympics Ontario to understand the site\u2019s users. Then we used the design-thinking process to make information easier to find, which was the main issue. We made recommendations for global navigation, page layouts, and content authoring.<\/p>\n<p>Roles:<\/p>\n<ul>\n<li>Information architect<\/li>\n<li>Moderator<\/li>\n<li>Project manager<\/li>\n<li>Technical consultant<\/li>\n<\/ul>\n<p>Skills:<\/p>\n<ul>\n<li>Critical thinking<\/li>\n<li>Group-activity facilitation<\/li>\n<li>Leadership<\/li>\n<li>Wireframing (Balsamiq)<\/li>\n<li>WordPress<\/li>\n<\/ul>\n<h2 id=\"process\">Process<\/h2>\n<h3 id=\"empathize\">Understand: Empathize<\/h3>\n<h4>Meet with product owners: Learn about users and social-technical systems<\/h4>\n<p>We met three Special Olympics Ontario employees who led the site\u2019s creation and upkeep. They gave insight about their organization and stakeholders. They also gave access to user-research findings about their services. For the Healthy at Home site, one important theme was that its content was hard to find.<\/p>\n<h4>Identify and articulate users\u2019 needs<\/h4>\n<p>Thanks to our partners, we started with solid understanding of the users. The primary group were Special Olympics athletes. Their abilities and situations varied, but we had to consider their special needs:<\/p>\n<ol>\n<li>Technical accessibility: Older devices and slower connections<\/li>\n<li>Readability: Reading-levels at Grade 3-4<\/li>\n<li>Non-verbal clarity: Reliance on colors and imagery to discern content<\/li>\n<li>Prominent content: Limited capacity\/tolerance for browsing and searching<\/li>\n<\/ol>\n<h4>Visualize relevant components of systems<\/h4>\n<p>We mapped the relevant people, processes, and products onto template canvases. We made educated guesses and did cursory research as needed. Later, we met with our partners and got feedback for our visual summaries of their business model and value proposition. The activity was useful because it reinforced our understanding of the larger context.<\/p>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-business-model-canvas.pdf\">View the business-model canvas<\/a> (PDF, 52 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-value-proposition-canvas.pdf\">View the value-proposition canvas<\/a> (PDF, 533 KB)<\/li>\n<\/ul>\n<h4>Do heuristic evaluation: Highlight problems and probable causes<\/h4>\n<p>We independently browsed the site and made notes about our experiences. We had consensus about the following persistent issues:<\/p>\n<ol>\n<li>Slow loading: Content was slow to load<\/li>\n<li>Limited categories: Some content didn\u2019t fit one, or any, main category<\/li>\n<li>Limited wayfinding: Lack of breadcrumbs, current-location indicator<\/li>\n<li>Vague descriptors: Titles and summaries didn\u2019t communicate useful info<\/li>\n<li>Complex descriptors: Some terms had simpler alternatives<\/li>\n<li>Undiscernible thumbnails: Images were faint or generic\/repeated<\/li>\n<li>Irregular layout: Content blocks had varying dimensions<\/li>\n<\/ol>\n<h4>Prepare for primary research: Set goals, select methods, and develop tools<\/h4>\n<p>Our goal was to test the usability of the site\u2019s navigation and organization. We needed both qualitative data (\u2018how?\u2019 &#038; \u2018why?\u2019) and quantitative data (\u2018how many?\u2019). We created a <em>usability test<\/em> that consisted of information-finding tasks. We also created <em>semi-structured interview<\/em> questions for users to describe their experiences.<\/p>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-script-1.docx\">Download the moderator&#8217;s script 1<\/a> (DOCX, 36 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-script-1.pdf\">View the moderator&#8217;s script 1<\/a> (PDF, 98 KB)<\/li>\n<\/ul>\n<h4>Do user-evaluation<\/h4>\n<p>Our partners connected me with athletes, coaches, caregivers, and volunteers. I set up appointments for four sessions that involved seven users. I moderated three of the sessions while my colleagues recorded observations.<\/p>\n<h3 id=\"define\">Understand: Define<\/h3>\n<h4>Analyze and summarize findings of primary research<\/h4>\n<p>My colleagues and I met to review our observations of the user-evaluation sessions. In general, the users echoed our heuristic evaluations. We paid attention to how they browsed and searched for content.<\/p>\n<h4>Establish awareness and agreement of problems to solve<\/h4>\n<p>Some pain-points and pain-relievers were beyond our control. We focused on themes that were feasible to address:<\/p>\n<ol>\n<li>Navigation and organization<\/li>\n<li>Clarity and utility of descriptors<\/li>\n<li>Clarity and utility of thumbnail images<\/li>\n<\/ol>\n<h4>Articulate users\u2019 needs for others to understand<\/h4>\n<p>My colleagues and I envisioned a <em>persona<\/em>, or hypothetical and archetypical user. We named her Ashley the Athlete. First, we produced an <em>empathy map<\/em>. This artifact expressed the plausible activities, feelings, and thoughts with the site experience. Then, my colleague developed a summary of this persona.<\/p>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-empathy-map.pdf\">View the Ashley empathy map<\/a> (PDF, 850 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-persona.pdf\">View the Ashley persona<\/a> (PDF, 804 KB)<\/li>\n<\/ul>\n<h4>Articulate typical user\u2019s journey within larger systems<\/h4>\n<p>Ashley served as the protagonist of our <em>storytelling presentation<\/em>. One other colleague made an <em>experience map<\/em> that summarized her journey, including pain points. The map also showed parts of the larger system that affected her journey. (We received feedback that the map depicted an unrealistic number of different emotions.)<\/p>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-experience-map-1.pdf\">View the &#8216;As Is&#8217; experience map<\/a> (PDF, 2 MB)<\/li>\n<\/ul>\n<h4>Articulate users\u2019 desired outcomes: Create high-level statements to guide (not offer) solutions<\/h4>\n<p>We made statements that implied user-needs being met. These statements focused on the destination, not the journey.<\/p>\n<ol>\n<li>Ashley can read and understand all text in the global navigation menu, <em>without any help from her caregivers<\/em>.<\/li>\n<li>Ashley can get to the website content that she is looking for, <em>with no more than three clicks<\/em>.<\/li>\n<li>Ashley can understand any piece of content on the website, <em>without selecting the content itself<\/em>.<\/li>\n<li>Ashley can find any particular content using multiple pathways, <em>according to her preference<\/em>.<\/li>\n<\/ol>\n<h3 id=\"ideate\">Explore: Ideate<\/h3>\n<h4>Review (causes of) problems and ideate solutions<\/h4>\n<p>We established solutions that would eliminate, or at least mitigate, the problems that we had identified:<\/p>\n<ol>\n<li>Slow loading: (Not focus of project)<\/li>\n<li>Limited categories: More categories and clearer labels<\/li>\n<li>Limited wayfinding: Breadcrumbs, current-location indicator in global navigation<\/li>\n<li>Vague descriptors: Tips for content authors<\/li>\n<li>Complex descriptors: Tools for content authors<\/li>\n<li>Undiscernible thumbnails: Tips for content authors<\/li>\n<li>Irregular layout: Uniform dimensions for content blocks<\/li>\n<\/ol>\n<h4>Refine solutions into simple directives addressing users\u2019 desired outcomes<\/h4>\n<p>The next logical step was summarizing the main actions that we would take. Each directive addressed one or more of the users\u2019 desired outcomes that we had already established.<\/p>\n<ol>\n<li>Revise global navigation: Create logical categories and clear labels<\/li>\n<li>Develop guidelines for authors: Ensure descriptors and images are useful<\/li>\n<li>Research tools for authors: Find checkers that evaluate simplicity of text<\/li>\n<li>Research WordPress themes: Experiment with frameworks to make pages less complex<\/li>\n<\/ol>\n<h4>Diverge to create solutions and converge to gain consensus<\/h4>\n<p>To revise the global navigation, we independently proposed more categories. (The user evaluations showed that some users favored the four main ones.) Then, we collectively mapped all content to sticky-notes and arranged them on a whiteboard. Next, we re-organized the content based on our findings and understanding of users. The process was arduous because of its inherent uncertainty, but it was important.<\/p>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-sitemap-1.pdf\">View sitemap ver 1<\/a> (PDF, 23 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-sitemap-2.pdf\">View sitemap ver 2<\/a> (PDF, 21 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-sitemap-3.pdf\">View sitemap ver 3<\/a> (PDF, 170 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-sitemap-4.pdf\">View sitemap ver 4<\/a> (PDF, 170 KB)<\/li>\n<\/ul>\n<p>For other navigational features, I suggested tags and a sidebar for non-home pages. Our partners had built the site with WordPress, and I had experience with this <abbr title=\"Content-management system\">CMS<\/abbr>. I knew that implementing tags and sidebars would be workable and desirable. A few of us sketched page-layouts that included these features.<\/p>\n<h3 id=\"prototype\">Explore: Prototype<\/h3>\n<h4>Develop prototypes to make ideas real and showable<\/h4>\n<p>Our partners set up a clone of the live site for us to use. We re-organized the global navigation to reflect the <em>information architecture<\/em> that we modified. One colleague created medium-fidelity prototypes for pages that fit the existing design. The home page featured a carousel and uniformly-arranged blocks of content. The non-home pages featured tags and a sidebar with menus. Thus, we had two prototypes to test with users:<\/p>\n<ol>\n<li>Cloned WordPress site with revised global navigation (limited interactivity)<\/li>\n<li>Medium-fidelity Figma mockups of revised page layouts (no interactivity)<\/li>\n<\/ol>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-page-layouts.pdf\">View the page layouts<\/a> (PDF, 6.1 MB)<\/li>\n<\/ul>\n<h3 id=\"test\">Materialize: Test<\/h3>\n<h4>Develop research (evaluation) goals and appropriate tools<\/h4>\n<p>Our goal was to test the intuitiveness of our global navigation and page layouts. We created a usability test that was similar to the first one. The information-finding tasks only involved the global navigation. So, these tasks could be described as a <em>tree-testing<\/em> activity. We also created a semi-structured interview to ask about the mockups of the revised page-layouts.<\/p>\n<h4>Test prototypes with users to (in)validate solutions<\/h4>\n<p>I re-connected with users from the previous round of user evaluations. Our partners also connected me with other users. I set up appointments for four remote sessions with seven users. Two users were people whom we hadn\u2019t already met. I moderated one session and observed the other ones.<\/p>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-script-2.docx\">Download the moderator&#8217;s script 2<\/a> (DOCX, 26 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-script-2.pdf\">View the moderator&#8217;s script 2<\/a> (PDF, 94 KB)<\/li>\n<\/ul>\n<h3 id=\"iterate\">Materialize: Iterate<\/h3>\n<h4>Analyze test findings and modify prototypes as needed<\/h4>\n<p>We summarized the findings and feedback from the second set of user evaluations. Some of the new categories and labels weren\u2019t as logical or clear as we had believed. The order of the categories needed modification, too. Again, we used our findings and understanding to revise the global navigation. One colleague modified the page-layout mockups based on users\u2019 suggestions.<\/p>\n<h3 id=\"finalize\">Finalize<\/h3>\n<h4>Articulate solutions for others to understand<\/h4>\n<p>We created a presentation that featured Ashley the Athlete. With her as the protagonist in a story, we compared the as-is (before) and the to-be (after) experiences. One colleague produced a project report that we all reviewed.  Another colleague produced an experience map that summarized the to-be scenario.<\/p>\n<h4>Add value for product owners<\/h4>\n<p>Still another colleague produced guidelines for content authors. These guidelines suggested ways to write descriptors, select images, and organize content. I produced a set of wireframes that served as instructions for developing the revised page-layouts. Later, we met our partners to debrief them and provide the deliverables.<\/p>\n<h2 id=\"deliverables\">Deliverables<\/h2>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-report.docx\">Download the Healthy at Home design report<\/a> (DOCX, 29 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-report.pdf\">View the Healthy at Home design report<\/a> (PDF, 84 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-experience-map-2.pdf\">View the &#8216;To Be&#8217; Healthy at Home experience map <\/a> (PDF, 5 MB)<\/li>\n<\/ul>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-information-architecture.docx\">Download the information architecture<\/a> (DOCX, 20 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-information-architecture.pdf\">View the information architecture<\/a> (PDF, 46 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-sitemap-5.pdf\">View the final sitemap<\/a> (PDF, 29 KB)<\/li>\n<\/ul>\n<ul class=\"artifacts\">\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-wireframes.pdf\">View the page wireframes<\/a> (PDF, 1MB)<\/li>\n<li><a href=\"https:\/\/www.figma.com\/proto\/OJmJw7A3R7apr0UL0eOvnE\/2192-SOHAH-version-2-clickable?node-id=5%3A2&#038;viewport=16%2C88%2C0.08061086386442184&#038;scaling=scale-down&#038;page-id=0%3A1\">View the page prototypes<\/a> (Figma)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-recommendations.docx\">Download the authoring recommendations<\/a> (DOCX, 19 KB)<\/li>\n<li><a href=\"\/ux\/wp-content\/uploads\/Healthy-at-Home-recommendations.pdf\">View the authoring recommendations<\/a> (PDF, 77 KB)<\/li>\n<\/ul>\n<h2 id=\"takeaways\">Takeaways<\/h2>\n<h4>Presentations need to be story-based and visual<\/h4>\n<p>Our first presentation started with the Ashley persona, but the focus shifted to the site\u2019s issues. At the very least, we could&#8217;ve put Ashley\u2019s picture on every presentation slide. We could&#8217;ve noted how each issue hindered her experience on the slides as well.<\/p>\n<h4>Websites need to be both browsable and searchable<\/h4>\n<p>Browsing and searching are related, but they\u2019re distinct activities. Users do the former when they have less understanding of the information that they want. Content needs to have descriptors and signifiers to help users make decisions.<\/p>\n<h4>Test with real users whenever possible<\/h4>\n<p>We were lucky to have partners who had willing contacts. Otherwise, we wouldn\u2019t have been able do testing with this population. User evaluations revealed notable flaws of our revised global navigation.<\/p>\n<h3>Acknowledgements<\/h2>\n<ul class=\"credits\">\n<li>Dr Olivier St-Cyr<\/li>\n<li>Special Olympics Ontario<\/li>\n<li>Reem A<\/li>\n<li>Debbie C<\/li>\n<li>Riley P<\/li>\n<li>Prottoy P<\/li>\n<li>Sabrina Y<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview Process Understand: Empathize Understand: Define Explore: Ideate Explore: Prototype Materialize: Test Materialize: Iterate Finalize Deliverables Takeaways Overview Five colleagues and I recommended improvements to Healthy at Home, a Special Olympics website. This project was done for a course in collaborative user-experience design. We partnered with Special Olympics Ontario to understand the site\u2019s users. Then [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":896,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1301","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/pages\/1301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/comments?post=1301"}],"version-history":[{"count":110,"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/pages\/1301\/revisions"}],"predecessor-version":[{"id":1757,"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/pages\/1301\/revisions\/1757"}],"up":[{"embeddable":true,"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/pages\/896"}],"wp:attachment":[{"href":"http:\/\/timtanhuynh.com\/ux\/wp-json\/wp\/v2\/media?parent=1301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}