sunbrella.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<!-- Primary Meta Tags -->
    <title>Sunbrella Case Study</title>
    <meta name="title" content="Shardé Heim - Sunbrella Case Study"/>
    <meta name="description" content="Designing and building a working prototype for a UV detecting, interactive outdoor umbrella" />
    <meta name="keywords" content="Portfolio, Design Portfolio, Product Designer, UX Designer, UI Designer, Interface Designer, London Designer, Sunbrella, UQ, Case Study">
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.shardeheim.com/sunbrella" />
    <meta property="og:title" content="Shardé Heim - Sunbrella Case Study" />
    <meta property="og:description" content="Designing and building a working prototype for a UV detecting, interactive outdoor umbrella" />
    <meta property="og:image" content="images/metaphoto10.jpg" />
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://www.shardeheim.com/sunbrella" />
    <meta property="twitter:title" content="Shardé Heim - Sunbrella Case Study" />
    <meta property="twitter:description" content="Designing and building a working prototype for a UV detecting, interactive outdoor umbrella" />
    <meta property="twitter:image" content="images/metaphoto10.jpg" />
    <!-- Links -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,500,500i,700,800" rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600;700&display=swap" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
	<script src="js/javascript.js" type="text/javascript" defer></script>
</head>
<body>

   <!-- nav one for web -->
   <nav>
      <div class='fade-in-element'>
         <div class="topnav">
            <div class="topNavLeft">
               <div class="navleftwidth1"> <a href="/#work">Work</a> </div>
               <div class="navleftwidth2"> <a href="/#experience">Experience</a></div>
            </div>
            <div class="logo">
               <div class="LogoIcons">
                  <a href="/"><img class="activeLogoIcons" src="images/logo.svg" alt="Logo"></a> 
                  <a href="/"><img class="hoverLogoIcons" src="images/HLogo2.png" alt="HLogo"></a>
               </div>
            </div>
            <div class="topNavRight">
               <div class="navrightwidth3"><a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a></div>
               <div class="navrightwidth4"><a href="about">About</a> </div>
            </div>
         </div>
      </div>
   </nav>

   <!-- nav two for mobile -->
   <div class="topMobilelNav fade-in-element">
      <nav class="mobile-nav">
         <a href="/#work">Work</a> <a href="/#experience">Experience</a> <a href="about">About</a> <a href="https://www.shardeheim.com/images/sharderesume.pdf" target="_blank">Resumé</a>
      </nav>
      <div class="mobileNavbLogo">
         <a href="/"><img height="40" src="images/logo.svg" alt="moiblelogoimage"></a>
      </div>
      <button class="hamburger" aria-label="Hamburger Menu">
         <div class="bar"></div>
      </button>
   </div>

   <!-- above fold content -->
   <div class="caseStudyTopContainer fade-in-element">
      <div class="companyInfo">
         <h1>Sunbrella</h1>
         <img height="30" src="images/UKLogo.png" alt="UKImage">
      </div>
      <div class="caseStudyDescription">
         <p>Designing and building a working prototype for a UV detecting, interactive outdoor umbrella</p>
      </div>
      <div class="rollandtimeleft">
         <h3>Roles</h3>
         <div class="roleTags">
            <div class="UXTag">
               UX Design
            </div>
            <div class="ProductBuildTag">
               Product Build
            </div>
         </div>
      </div>
      <div class="rollandtimeright">
         <h3>Time</h3>
         <div class="tableDate">
            Feb 2017 - Jun 2017
         </div>
      </div>
   </div>

   <!-- rest of case study content -->
   <div class="fullwidthphoto fade-in-element"><img src="images/sunbrellainfotitle.jpg" width="100%" alt="ShardePostItNotesImage">
   </div>

   <!-- Entire Wrapper-->
   <div class="container-wrapper fade-in-element">
   	<nav class="sidebarNav">
        <div class="container">
            <div class="sidebar">
                 <li class="section-1">
                     <img src="images/book.svg" width="17"height="17" alt="Context"/>
                     <a href="#section-1">Context</a>
                  </li>
                  <li class="section-2">
                     <img src="images/weight.svg" alt="Overview" width="17"height="17"/>
                     <a href="#section-2">The Challenge</a>
                  </li>
                  <li class="section-3">
                     <img src="images/star.svg" alt="UserFeedback" width="17" height="17"/>
                     <a href="#section-3">Inspiration</a>
                  </li>
                  <li class="section-4">
                     <img src="images/layer.svg" alt="DefiningRequiremnts" width="17" height="17"/>
                     <a href="#section-4" >Initial propsal</a>
                  </li>
                  <li class="section-5">
                     <img src="images/glass.svg" alt="Requirements" width="17" height="17"/>
                     <a href="#section-5">Testing</a >
                  </li>
                  <li class="section-6">
                     <img src="images/search-status.svg" alt="Research" width="17" height="17"/>
                     <a href="#section-6">Early design exploration</a >
                  </li>
                  <li class="section-7">
                     <img src="images/pen-tool.svg" width="17"height="17" alt="Wireframe"/>
                     <a href="#section-7" >Prototype build</a>
                  </li>
                  <li class="section-8">
                     <img src="images/note.svg" alt="testings" width="17"height="17"/>
                     <a href="#section-8">Feedback</a>
                  </li>
                  <li class="section-9">
                     <img src="images/ruler&pen.svg" alt="Design" width="17" height="17"/>
                     <a href="#section-9" >Exhibition build</a>
                  </li>
                  <li class="section-10">
                     <img src="images/mobile.svg" alt="testing" width="17" height="17"/>
                     <a href="#section-10" >Geolocation</a>
                  </li>
                  <li class="section-11">
                     <img src="images/medal-star.svg" alt="Implementation" width="17" height="17"/>
                     <a href="#section-11">Exhbit</a >
                  </li>
                  <li class="section-12">
                     <img src="images/teacher.svg" alt="Learnings" width="17" height="17"/>
                     <a href="#section-12">Improvements</a >
                  </li>
                  <li class="section-13">
                     <img src="images/arrow-up.svg" alt="Top" width="17" height="17"/>
                     <a href="#section-1" >Top</a >
                  </li>
            </div>
        </div>
    </nav>
      <!-- content-->
      <section id="section-1" class="sectionImage">
         <div class="container-content">
            <h4>Context</h4>
            <p> In Australia, the sun is damaging. Two thirds of Australians will be diagnosed with some form of skin cancer by age 70. For our final year university project, my teammate Melissa Nguyen and I decided to tackle this issue
               <br><br>
               In 13 weeks we investigated, tested, built and presented a working prototype at our end-of-semester <a href="https://www.eventbrite.com.au/e/uq-interaction-design-exhibit-2017-tickets-34451098162#" target="_blank">exhibition</a> at Southbank's 'The Edge'.
            </p>
            <br>
            <br>
            <br>
         </div>
      </section>
      <section id="section-2" class="sectionImage">
         <div class="container-content">
            <h4>The Challenge</h4>
            <p>
               As a team, our main objective was to bring awareness and help change people’s behavior towards sun safety and skin cancer, specifically UV.
               <br><br>
               <b>Project responsibility:</b> My roles in the project were to explore other technologies being used in this field, concept development, pitching, storyboarding, video creation, testing and prototype build.
               <br><br>
               <b>The Team:</b> Co Research, Design and Build with Melissa Nguyen
            </p>
            <br>
            <br>
            <br>
         </div>
      </section>
      <section id="section-3" class="sectionImage">
         <div class="container-content">
            <h4>Inspiration</h4>
            <p> We began by considering enjoyable aspects of existing projects that we could incorporate into our project. These included the <a href="https://www.youtube.com/watch?v=bl_0BfPlJYc" target="_blank">Drink-Up</a> fountain. It was vitally important that our project had a strong purpose and we felt as though Sun awareness and protection was particularly relevant for everyday users in sunny Australia.
               <br/>
               <br/>
            </p>
            <p> We found this video by Thomas Leveritt on <a href="https://www.youtube.com/watch?v=o9BqrSAHbTc" target="_blank">How The Sun Sees You</a> and were inspired by how people were able to visualise how their skin looked under the sun. We wanted to create the same effect with our installation.
            </p>
            <div><img src="images/howrhesunseesyou.gif" width="100%" alt="placeholderimage"></div>
            <br>
         </div>
      </section>
      <section id="section-4" class="sectionImage">
         <div class="container-content">
            <h4>Initial proposal</h4>
            <p>Ultraviolet Rays (UV) cause skin cancer. Our problem was that they are invisible. We wanted to turn the invisible visible. The standard measurement for UV in Australia is the UV Index, a coloured scale from 0 - 11.
               <br/><br/>We came up with the idea of a beach shack filled with black light, the walls covered by mirrors. There would be two doors and no windows. Users would walk through the shack, looking at how the sunscreen we provided blacked out parts of their body as they applied it. Coloured lights inside the hut would indicate the severity of the UV index for that day.
            </p>
            <div>
               <img src="images/InitialProposalImage.jpg" width="100%" alt="placeholderimage">
            </div>
         </div>
      </section>
      <section id="section-5" class="sectionImage">
         <div class="container-content">
            <h4>Testing and initial issues</h4>
            <p>This initial pitch received a mixed response from our cohort. While many thought that the idea was unique and utilised the technology really well, there were concerns that the overall scope was too big. We may have been aiming too high, but we really wanted to keep our theme of sun safety and making the invisible visible.
               <br>
               <br>
               <br>
         </div>
      </section>
      <section id="section-6" class="sectionImage">
         <div class="container-content">
            <h4>Early design exploration</h4>
            <p>
               Moving on from our shack idea, we decided on an interactive circular café umbrella. The ‘Sunbrella’. In our research, Melissa and I found that a lot of Australians associated sun damage with the visible sun, not with UV . We had to find a way to enlighten the Australian public about a phenomenon they couldn’t see. Adopting the UV index measurement, we designed the umbrella canopy to contain LED lights that changed colour over the course of the day, matching the current UV index.
               <br><br>
               It was our belief that individuals would be able to understand information conveyed through changing colour more quickly. Humans are visual beings.
            </p>
            <div>
               <img src="images/EarlyDesignExporationImage.jpg" width="100%" alt="placeholderimage">
            </div>
            <p>
               The canopy on the underside of the umbrella would contain three interactive segments. The first would highlight how harmful the UV index was, predict levels throughout the day, and suggest protection measures. The second section would suggest a number of sun-safe activities, as well as displaying the most sun-safe routes through the local area.
               <br><br>
               The last section would be a weather segment, showcasing the current weather and temperature. Participants underneath the umbrella would be able to interact with it using a swivelling controller ring around the base of the umbrella stand.
            </p>
            <div>
               <img src="images/storybaord.png" width="100%" alt="placeholderimage">
            </div>
         </div>
      </section >
      <section id="section-7" class="sectionImage">
         <div class="container-content">
            <h4>Prototype build</h4>
            <p>
               Using a projector, MakeyMakey and Unity, we set about building a mini-version of our Sunbrella. Sturdiness was a major initial problem. After initially building the rims using joined pipes and bull clipping fabric over the top, we decided the best approach was to purchase a café umbrella canopy and work under that. 
            </p>
            <div>
               <img src="images/prototypebuildone.jpg" width="100%" alt="placeholderimage">
            </div>
            <p>
               We used a MakeyMakey kit to change from one segment to another. We had different wires connected to the weather, sun safe activity, and UV index sections. The wires were fed through the Sunbrella table base and onto aluminium pads that sat on the top of the table.
               <br>
               <br>
               Tapping on one of the different sections on the aluminium controller at the base of the umbrella displayed that segment on a computer. This allowed users to get a real feel of how the controller might work.
            </p>
            <div>
               <img src="images/prototypebuildtwo.jpg" width="100%" alt="placeholderimage">
            </div>
         </div>
      </section >
      <section  id="section-8" class="sectionImage">
         <div class="container-content">
            <h4>Feedback from prototype testing session</h4>
            <p>
               When we gave the prototype to our cohort for testing, we discovered that pushing the controller up into the canopy was not a natural gesture. Feedback also indicated that the turn to get between segments felt clumsy and unresponsive.
               <br><br>
               This led us to change the controller from a steering wheel to a (salt shaker) pointer. A pointer had the added advantage of allowing us to combine our initial three segments into one more animated display.
               <br>
               <br>
               <br>
            </p>
         </div>
      </section>
      <section id="section-9" class="sectionImage">
         <div class="container-content">
            <h4>Exhibition build</h4>
            <p>
               After this testing we still had a lot to build before the final exhibition. Our neopixel lights arrived damaged, making things more difficult. The first 10 or so LED strips wouldn’t receive power, resulting in the whole 4 meters not displaying any light. We eventually found the fault, and cut away and reconnected the strip about 30 cm down from its original length.
            </p>
            <div>
               <img src="images/exhibitionbuildone.jpg" width="100%" alt="placeholderimage">
            </div>
            <p>
               We coded the light to work with our UV sensor. When you hovered a UV torch over the sensor, the lights would change color to match the increase in UV. When it was removed, it would return back to a low-UV level green.
               <br><br>
               We worked to secure the necessary wires to the underside and top of the umbrella, hand stitching the LED lights in place. 
            </p>
            <div>
               <img src="images/exhibitionbuildtwo.jpg" width="100%" alt="placeholderimage">
            </div>
            <p>
               Melissa and I had the bright idea of bouncing ‘clouds’ of advice, as well as a button that would call the cafe waiter. Hovering over the UV index cloud would change the display to the forecast. Naturally, the cursor was a sun.
            </p>
            <div>
               <img src="images/sunbrellagraphics.gif" width="100%" alt="placeholderimage">
            </div>
            <p>
               We settled on a salt and pepper shaker that acted as a controller, using fiducial codes as our way of tracking the movements. We attached a camera to the underside of the umbrella that mapped the fiducial code’s movements.
               <br><br>
               We had to test with several sizes of the ID’s as the light from our projector obscured the details in the picture and it was hard to read.
            </p>
            <div>
               <img src="images/saltpepershaker.jpg" width="100%" alt="placeholderimage">
            </div>
         </div>
      </section>
      <section id="section-10" class="sectionImage">
         <div class="container-content">
            <h4>Geolocation and snapchat</h4>
            <p>
               Each Sunbrella was designed to have a unique geo location filter, and would display a Snapchat cloud containing the photos of people who used the filter.
               <br><br>
               This served the dual purpose of making the Sunbrella a more social installation, and conveying our message that UV can still be damaging when it is cloudy to a broader audience.
            </p>
            <div>
               <img src="images/snapchatfilters.gif" width="100%" alt="placeholderimage">
            </div>
         </div>
      </section>
      <section id="section-11" class="sectionImage">
         <div class="container-content">
            <h4>Exhibit</h4>
            <p>During the exhibit, it was the UV lights that initially attracted users to the installation. People were quick to pick up the pointer and responded well to the interactive canopy.
            </p>
            <div class="SmallerSectionImage">
               <img src="images/exhibitphoto.jpg" width="100%" alt="placeholderimage">
            </div>
         </div>
      </section>
      <section id="section-12" class="sectionImage">
         <div class="container-content">
            <h4>Improvements</h4>
            <p>
               A production model Sunbrella would need a more durable thin screen making up the underside of the canopy, instead of relying on a projector. The LED lights would also need to be more durable to withstand long periods of rain or shine.
               <br><br>
               I feel that though we provided a unique portrayal of information, it ended up being more of an installation that brought awareness of the danger of UV, rather than actively targeting people’s behaviour towards the Sun. Though I believe we broadly achieved what we set out to do, further content improvements could be made to solidify this idea. 
            </p>
            <br>
            <br>
         </div>
      </section>
   </div>
   <div class="prevnextwrapper fade-in-element">
      <div class="prev">
         <a href="portfolio"><img height="13" src="images/blue-arrow-left.svg" alt="BlueArrowLeftImage"> &nbsp;Portfolio project</a>
      </div>
      <div class="next">
         <a href="aivoice">AI Voice project&nbsp;<img height="13" src="images/blue-arrow.svg" alt="BlueArrowRightImage"></a>
      </div>
   </div>

   <!-- full width photo -->
   <div class="fullwidthphoto fade-in-element"><img src="images/sunbrellabottom.jpg" width="100%" alt="placeholderimage"></div>
   
   <!--Footer-->
   <footer>
      <div class="footerwrapper fade-in-element">
         <a href="mailto:%20hello@shardeheim.com">
            <h2>Say hi, don't be shy &nbsp;<img height="30" src="images/arrow-right.svg" alt="ArrowRightImage"></h2>
            <p>Feel free to reach out for collaborations or just a friendly hello 🚀 <b>Let's chat.</b></p>
         </a>
      </div>
      <div class="socials fade-in-element">
         <div class="footerIcons">
            <div class="EmailIcons">
               <a href="mailto:hello@shardeheim.com" target="_blank">
               <img class="activeEmailImage" src="images/emailicon.svg" alt="EmailIconLight"></a> <a href="mailto:hello@shardeheim.com" target="_blank">
               <img class="hoverEmailImage" src="images/emailicondark.svg" alt="EmailIcondDark"></a>
            </div>
            <div class="CameraIcons">
               <a href="https://www.shardeheimphotography.com/" target="_blank">
               <img class="activeCameraImage" src="images/camericon.svg" alt="CameraIconLight"></a> <a href="https://www.shardeheimphotography.com/" target="_blank">
               <img class="hoverCameraImage" src="images/camericondark.svg" alt="CameraIconDark"></a>
            </div>
            <div class="InstagramIcons">
               <a href="https://www.instagram.com/shardeheim/" target="_blank">
               <img class="activeInstagramImage" src="images/instagramicon.svg" alt="InstagramIconLight"></a> <a href="https://www.instagram.com/shardeheim/" target="_blank">
               <img class="hoverInstagramImage" src="images/instagramicondark.svg" alt="InstagramIconDark"></a>
            </div>
            <div class="LinkedinIcons">
               <a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
               <img class="activeLinkedinImage" src="images/linkedinicon.svg" alt="LinkedinIconLight"></a> <a href="https://www.linkedin.com/in/shardeheim/" target="_blank">
               <img class="hoverLinkedinImage" src="images/linkedinicondark.svg" alt="LinkedinIconDark"></a>
            </div>
         </div>
      </div>
      <div class="madeBy">
         Designed and built by Shardé Heim © 2023
      </div>
   </footer>
</body>
</html>