Case Study - The Sandbox Project
- 1. The Sandbox Project Aline Conde Ben Lam Krystal Gayle
- 2. Meet Ted Teacher & caring father 32 years old Widow, 2 kids (1 son & 1 daughter) Family history of obesity User goal: Wants information
- 3. Meet Meredith Chief of Pediatric Surgery 38 years old Married, 1 birth child, 1 adopted Developing project with pediatric team User goal: Wants to get involved & become a leader within community
- 4. Meet Olivia VP of Marketing of Pampers 43 years old Married, no children Actively searching for emerging non- governmental organizations to collaborate with User goal: Wants to be more socially responsible by engaging with the community
- 6. Their First Impressions “Bold colours” “Friendly” “Professional looking” “Visually attractive”
- 7. “Congested, looks really busy” “Social media on the side is cool but some find it confusing” “Unsure about purpose/message of the site” “Unclickable icons/links” But...
- 8. What We Did
- 10. Content Audit Organization-centric instead of user-centric Text heavy Repetitive, inconsistent & missing information Outdated & irrelevant Information Too many links & broken links Links to external environment (i.e. third-party sites, documents, PPTs, etc)
- 11. Competitive Analysis SBP SickKids CAMH Use of Content ✓ ✓✓ ✓✓✓ Design ✓✓ ✓✓✓ ✓✓✓ User Experience ✓ ✓✓ ✓✓ Social Media ✓ ✓✓✓ ✓✓✓ Voice & Tone ✓ ✓✓✓ ✓✓✓
- 13. Usability Testing Task 1: Learn about The Sandbox Project and register for the upcoming conference. Task 2: You have heard about The Sandbox Project initiatives and are interested in learning more about how obesity affects children & youth within Canada.
- 14. What We Learned
- 15. Core Issue: Inconsistent & Missing Content What is the Young Canadian Roundtable of Health Members? Who are they? What do they do?
- 16. All links to slide decks AND PDFs Where is the descriptive information? What is this about? Core Issue: Inconsistent & Missing Content
- 17. Implications on Users ● Difficulty grasping key messaging ● Unable to find desired information within the first few attempts, leading to frustration ● No visible use of consistent guidelines/structures for website content ● Lack of recognizable and intuitive language reflective of real world expectations ● Many subpages (e.g. About Us, Forms) were text-heavy and unengaging for users.
- 18. Recommendations ● Perform complete content audit in order to determine the relevant and irrelevant information ● Recreate content based on a refined content structure & guidelines to ensure consistency with content production
- 19. Core Issue: Disorganized Layout Does not follow the “F” formation. This is distracting for the user. Where do they look first? Why is this on this page? Is it clickable? What does this say about these corporations?
- 20. Core Issue: Disorganized Layout Again, where does the user look first? The elements are distracting and overwhelming.
- 21. Core Issue: Disorganized Layout Users love the agenda, however, the design is again very cluttered. Where did the colouring come from? Positioning of social media feed vs. recent articles
- 22. Implications on Users ● Website layout does not employ minimalistic aesthetics ● Cluttered design elements (e.g. carousels), combined with excessive use of widgets (e.g. social media feeds), were distracting for users trying to accomplish a simple task ● Users are unable to find the info they are looking for without proper layout organization and prioritization ● Loss of interest to continue exploring website
- 23. Recommendations ● Design 3 distinct portals with tailored content, catering to the specific interests of that group: 1. Public 2. Professionals 3. Partners ● Generalized content (e.g. About, Projects, Get Involved) that can be accessed through all pages and are applicable to our 3 target audiences ● Design streamlined layout so users will not be distracted by unnecessary cluttered content on the side panels
- 24. Tailored content Partners Professionals Public How to help, campaigns, sponsor an event, donate How to get involved, develop projects General information, tips, lists, recipes Interactive content: videos, tutorials, presentations, images, infographics, etc.
- 25. Core Issue: Navigation Difficulties Nav Bar is unresponsive Menu options are not intuitive
- 26. Too many things to navigate. Unsure where to begin. Very cluttered and busy. No navigation trail & location signal.
- 27. How do we know that they received the email? Image, not an interactive map. Once again, why is this here? Relevance?
- 28. Implications on Users ● User experiences did not match real world expectations for a charitable website ● System status was not visible at all times, so users were not able to pinpoint their exact location on the website ● Some users were unable to distinguish between clickable and non-clickable items (e.g. icons were not clear)
- 29. Recommendations ● Create consistent and intuitive headings and reorganize the navigation bar. ● Reorganize the location of specific subpages based on their relevant content. ● Design more intuitive buttons that reflect today’s web standards. ● Create global navigation indicators to allow users to identify their relative location within the website.
- 30. How We Can Solve It
- 31. Wireframes
- 32. Home ● Refocused global navigation menu ○ Donate ○ Get Involved ■ Volunteer ■ Become a Roundtable Member ■ Join the Community ● Introduction of theme statement ● Tailored portals ● Community forum ● Simple, clean footer
- 33. ● Section for content tailored for the general public, with videos, articles and posts of the community forum ● FAQ's are main topics that users are concerned with ● When users are on a specified portal page, the navigation button will be enlarged Public Portal
- 34. ● Brief description of page's content and video with founder’s message ● Suggested new about me text ● Clicking on the arrow will update the content in the section below About
- 35. Projects Landing Page ● Subject matter is clear and concise for each project ● Allows users to have an overview of all projects before selecting one particular ● Join the Community feature brings users to the forum to join the conversation
- 36. Projects Page Template ● Header section ○ Project Summary ○ Featured Video/Image ● Search Bar ● Tailored Content ● Low level featured area
- 37. ● Three main sections ○ What’s coming Up ○ Interactive calendar ○ Past events Events
- 38. Design Style Guide ● Branding consistency ● Implementing bold secondary colours ● Imagery guidelines ○ Public ○ Professionals ○ Partners
- 40. Social Media Our goal is to foster SBP’s social media presence to bring awareness to the need for improved child and youth healthcare policies within Canada. +
- 41. Governance 1. Ensure consistent visuals, voice and tone across all platforms and devices (profile page, descriptions) 2. Cross-platform promotions (reuse content whenever possible) 3. Embrace hashtags to strengthen SEO 4. Create collaborative campaigns with partners (ensure cross promotion) 5. Take advantage of ads & promoted posts - target audience 6. Engage with community in a timely manner 7. Always incorporate visual content (images & videos) and resources 8. Take advantage of peak times for posting and engagement
- 42. The Community Forum Engaging community where people can learn & share passion for children healthcare A place for public, professionals & partners to connect and network Account registration for added credibility, networking, private messaging Submit, Like, Comment & Share
- 43. Community Forum ● Intuitive search function ○ topic ○ keywords ○ audience type ● Filter side panel ● Account registration & sign in
- 44. The Next Steps
- 45. Project Phases Discovery (15%) Definition (15%) Iteration 1 (P1) (25%) Iteration 2 (P2) (20%) Iteration 3 (P3) (20%) Maintenance (5%) ✔ ✔ Research Analyze Synthesize Document insights Propose solution options High level issues Low level issues Core issue: Inconsistent & missing content Plan Design Development Testing Deployment Document Core issue: Disorganized layout Plan Design Development Testing Deployment Document Core issue: Navigation difficulties Plan Design Development Testing Deployment Document Project review Report of analytics and findings Closing documentation SLA agreements
- 46. Conclusion ● Content/Design impact the efficiency and effectiveness of key messaging ● Our suggestions ○ Perform content audit to reveal instances of misinformation, duplication and inaccuracy ○ Formulate content structures and guidelines ○ Design layout supports the content structure ● Opportunities to engage audience, grow following and develop your platform
- 47. Thank You!
- 48. Questions?