project.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Afyia Smith | UX/UI Designer </title>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Poppins" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,500,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Libre+Franklin|Open+Sans:400,600|Ultra" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  </head>
  <body id="page2">
    <div class="container">
      <header class="header-container">
        <nav class="navbar">
          <div class="logo">
            <a href="index.html"> <img src="images/as_logo.png" width="68" height="104"alt="afyia smith logo"></a>
          </div>
            <ul class="navbar-nav">
              <li><a href="about.html">About</a></li>
              <li><a href="project.html"class="pk">Work</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
        </nav>
      <section class="project-header-container">
        <div class="project-header-text">
          <h2>Cobalt</h2>
          <p>Cobalt provides a practical solution for design teams to store and retrieve data.</p>
          <a href="https://projects.invisionapp.com/project/14735256"target="_blank"> <button class="proto-btn">View Prototype</button></a>
          </div>
        <div class="proj-header-img">
          <img src="images/proj_header_image.png" alt="cobalt Images"/>
        </div>
      </div>
  </section>
      </header>
    <main class="project-grid">
      <section class="overview">
        <h2>Problem</h2>
        <p>Creating, sharing and collaborating on design concepts can be frustrating. Design
          teams need practical solutions to create, share and save content online. Cobalt is
          part cloud-storage, part collaboration tool and entirely secure. It enables design
          teams to create and share work their way.</p>
        <h2>Role</h2>
        <p>UX/UI Design | UX Research | Branding </p>
        <h2>Duration</h2>
        <p> 8 Weeks</p>
      </section>
      <section class="design-process">
        <div class="design-process-header"><h1>Design Process</h1>
        </div>
        <div class="design-process-container">
        <div class="design-process-sidebar">
          <h2>User Research</h2>
          <h4> <a href="https://drive.google.com/open?id=1kva0xOrZv3yiyCVz-putcLFXAMhjPKvcE6LZY7CyR24"target="_blank">View Survey <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
        </div>
          <p>To understand what features users might want, and how they would use the application,
            I conducted a survey to gain insight into cloud storage usage. Initially my goal was to
            understand the behaviors and motivations of cloud storage users but in the process of surveying
            a wide target audience I accidentally found a niche.</p>
            <div class="blockquote">
              <h1>in the process of surveying a target audience I accidentally found a niche </h1>
            </div>
        <div class="design-process-content">
          <p>Coincidentally, a large number of survey participants were in the creative field from freelancers
            to UX/UI design students, and even a few photographers, etc. They all shared the same frustration with
            saving, sharing and collaborating on design concepts.</p>
        </div>
        </div>
        <div class="key-findings">
            <h2>Key Findings</h2>
        </div>
          <div class="key-findings-content">
            <div class="key-header">
              <h1>94%</h1>
              <p> of users have used a cloud storage app</p>
            </div>
            <div class="key-header">
              <h1>40%</h1>
              <p> of users share content with colleagues</p>
            </div>
            <div class="key-header">
              <h1>37%</h1>
              <p> of users want better collaboration features</p>
            </div>
          </div>
      </section>
      <section class="comp-analysis-container">
        <div class="comp-analysis">
          <div class="comp-analysis-sidebar">
            <h2> Competitive Analysis</h2>
            <h4> <a href="https://drive.google.com/open?id=1Pcody6rSiuB4tESfF-RI0oDZjqKJSWmc5hIvrVz9FzY"target="_blank">View Results <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
          </div>
            <p>Carrying out a thorough analysis of the competition was necessary in determining if the niche would be successful.
              There are a number big-name competitors in this space – Dropbox, Google Drive and OneDrive. Each of these offer
              essentially the same types of services: fast-sync, file, folder and link sharing, and the ability to invite collaborators.
              There’s really no surprise here – these features are typical of most cloud storage providers.</p>
            <h1 class="quotes2">"Don't reinvent the wheel!"</h1>
          <div class="comp-analysis-content">
              <p> What did surprise me were the lack of cloud storage applications targeting creative teams and their specific requirements.
                I quickly determined that creative teams would be a good type of consumer for this product. Also, targeting a niche consumer
                could help us stand out among the competition.</p>
          </div>
        </div>
        <div class="comp-analysis-img">
          <img src="images/brand_matrix.png" width="1036" height="661" alt="brand matrix"/>
        </div>
      </section>
      <section class="persona-content">
      <div class="persona">
        <h2>User Persona</h2>
        <p>The participants of my user survey provided the foundation for my personas. I took into consideration their behaviors and
           motivations for using a cloud storage application.</p>
      </div>
        <div class= "persona-container">
          <div class="user-persona-container1">
            <div class="danielle">
              <img src="images/danielle_image.png" alt="user persona image"/>
            </div>
            <div class="food-blogger">
              <h1> DANIELLE | FOOD BLOGGER </h1>
              <p> Danielle has the career foodies dream of; she spends her days cooking, photographing and writing about food.</p>
            </div>
            <div class="goals">
              <h1> GOALS </h1>
              <ul>
                <li>Find/share images for inspiration</li>
                <li>Share files across social media</li>
                <li>Collaborate with others in real-time</li>
              </ul>
            </div>
            <div class="motivations">
              <h1> MOTIVATIONS </h1>
              <ul>
                <li>Needs images available for social media</li>
                <li>Collaborate without email attachments</li>
                <li>No more huge files</li>
              </ul>
            </div>
            <div class="frustrations">
              <h1> FRUSTRATIONS </h1>
                <ul>
                <li> Share large files w/out email </li>
                <li> Access across all devices </li>
                <li> Real-time collaboration </li>
              <ul>
            </div>
          </div>
          <div class="user-persona-container2">
            <div class="todd">
              <img src="images/todd_image.png" alt="user persona image"/>
            </div>
            <div class="videographer">
              <h1> TODD | VIDEOGRAPHER </h1>
              <p> Todd is a video produce who owns his own company. His clients are mostly DJ’s, event producers for sporting events and shows.</p>
            </div>
            <div class="goals">
              <h1> GOALS </h1>
              <ul>
                <li>Manages files/folders</li>
                <li>Send files safely & securely</li>
                <li>Collaborate with team</li>
              </ul>
            </div>
            <div class="motivations">
              <h1> MOTIVATIONS </h1>
              <ul>
                <li>Shooting,editing and graphic design</li>
                <li>Likes to share content that he's created</li>
                <li>Wants an all-in-one tool that allows real-time collaboration</li>
              </ul>
            </div>
            <div class="frustrations">
              <h1> FRUSTRATIONS </h1>
                <ul>
                <li> Too many files to manage </li>
                <li> Better collaboration </li>
                <li> Privacy/Security</li>
              <ul>
            </div>
          </div>
       </div>
      </section>
      <section class="stories-container">
        <div class="stories-content">
          <div class="stories-sidebar">
          <h2>User Stories</h2>
          <h4> <a href="https://drive.google.com/open?id=1aePmbgvzOaxFOK6Qj1aJGJFh86iZj3A8rOF8B_Bwuiw"target="_blank">View Results <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
        </div>
          <p>I created user stories to help determine and prioritize the important features for users. These were created based only on
          the minimum viable product.</p>
        </div>
        <div class="stories-img">
          <img src="images/user_stories_img.png" width="690" height="328" alt="user stories image"/>
        </div>
      </section>
      <section class="flows-container">
        <div class="flows">
          <div class="flows-sidebar">
              <h2>User Flows</h2>
              <h4> <a href="https://drive.google.com/open?id=1ePNU3gB9eknLPkrKSubui8_yBpRJsH3i"target="_blank">View Results <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
          </div>
          <p>I converted the users’ stories into user flows to visualize how users would accomplish specific tasks. I created separate
            flows to demonstrate how new and returning users would be welcomed into the platform. I also created combined flows for
            dashboard tasks. These took several iterations as I wanted to map out  the smoothest path for adding content and sharing files.</p>
        </div>
        <div class="user-flow-img">
          <img src="images/user_flow_img.png" width="1041" height="758" alt="user flows image"/>
        </div>
      </section>
      <section class="lofi-container">
        <div class="lofi">
          <div class="lofi-sidebar">
            <h2>Lo-Fi Wireframes</h2>
            <h4> <a href="https://drive.google.com/open?id=1CVVrmwJn-MZjMikrlXfoBUDync1_U34v"target="_blank">View Wireframes <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
          </div>
          <p>I created wireframes for the landing page first, as this would be where potential users would learn about Cobalt. I wanted a layout
            that was clean and easily conveyed information to new users. I created a few versions that started with a large hero image to capture
            attention, a section for features, dashboard demo and testimonials.
          </p>
        </div>
          <div class="lofi-img">
            <img src="images/lofi_wireframes_img.png" width="1036" height="530" alt="lo-fi wireframes image"/>
          </div>
      </section>
      <section class="hifi-container">
        <div class="hifi">
          <div class="hifi-sidebar">
            <h2>Hi-Fi Wireframes</h2>
            <h4> <a href="https://drive.google.com/open?id=1OO2kgxKTB-YuMY8vdM3xY56t0O_oEvdz"target="_blank">View Wireframes <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
          </div>
          <p>I created wireframes for the landing page first, as this would be where potential users would learn about Cobalt. I wanted a layout
            that was clean and easily conveyed information to new users. I created a few versions that started with a large hero image to capture
            attention, a section for features, dashboard demo and testimonials.</p>
        </div>
        <div class="hifi-img">
          <img src="images/hifi_wireframes_img.png" width="1032" height="556" alt="hi-fi wireframes image"/>
        </div>
      </section>
      <section class="naming-container">
          <div class="naming">
            <h2>Naming</h2>
            <p>With the wireframes in place I began work on the branding . My first step was to come up with a name for the product.  I created a mind
              map with a simple goal of something that was easy to read and write. I settled on “Cobalt” which I thought was a unique name for a
              cloud-storage application.</p>
          </div>
        <div class="naming-img">
          <img src="images/naming_img.png" width="1036" height="544" alt="naming image"/>
        </div>
      </section>
      <section class="logo-concept-container">
        <div class="logo-concept">
          <div class="logo-concept-sidebar">
            <h2>Logo Concept</h2>
            <h4> <a href="https://drive.google.com/open?id=1ek1psJzd70H33FsXkk30jcMzgYvh81Ft"target="_blank">View Sketches <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>
          </div>
          <p>I sketched with pen & paper to explore different logo solutions. I wanted both a logo and wordmark which could be used interchangeably.</p>
        </div>
        <div class="logo-concept-img">
          <img src="images/logo_concept_img.png" width="1033" height="657" alt="logo concept image"/>
        </div>
      </section>
      <section class="branding">
        <div class="branding-process-header">
          <h1>Branding</h1>
        </div>
        <div class="branding-process-container">
          <div class="branding-process-sidebar">
            <h2>Master Logo</h2>
            <h4> <a href="https://drive.google.com/open?id=1mTvbnHur1xRMtFdoEavH77axgyWCyTF0"target="_blank">View Styleguide <img src="images/link_arrow.png" width="20" height="20"=alt="link image"/> </a> </h4>

          </div>
            <p>The final Cobalt logo is bold, clear and impactful and symbolizes what the brand stands for which is to bring focus and clarity to design teams.</p>
          </div>
          <div class="cobalt-logo-img">
            <img src="images/cobalt_logo.png" width="594" height="124" alt="cobalt logo"/>
          </div>
        <div class="color-palette">
          <h2>Color Palette</h2>
          <p>The color palette consists of a cool ice blue , warm tangerine red and a cobalt color which is the cornerstone of the Cobalt brand helping to
             distinguish it from other cloud services.</p>
         </div>
         <div class="color-palette-img">
           <img src="images/color_palette.png" width="246" height="246" alt="color palette"/>
         </div>
         <div class="fonts">
            <h2>Fonts</h2>
            <p>I used a combination of the Ultra font for headers and the Open Sans for body copy - these work together for a bold yet simple design. I kept the font
              choices very limited and used familiar typefaces so as not to stray too far from what customers were accustomed to.</p>
          </div>
          <div class="font-types">
            <div class="heading">
              <p>Headings</p>
              <h2 class="ultra">Ultra</h2>
            </div>
            <div class="heading2">
              <p>Body and Inline Text</p>
              <h2 class= "sans">Open Sans</h2>
          </div>
        </div>
      </section>
      <section class="images-container">
        <div class="images">
          <h2>Images/Icons</h2>
          <p>Most cloud services come across as serious and stuffy; I wanted Cobalt to stand out as an upbeat, trustworthy and friendly product. I decided to use
             digital illustrations as a way to show off our creative side.</p>
         </div>
         <div class="icons-img">
           <img src="images/icons_img.png" width="1032.48" height="533" alt="icons image"/>
         </div>
       </section>
      <section class="testing-container">
        <div class="testing">
        <div class="testing-sidebar">
          <h2>Preference Testing</h2>
        </div>
          <p>With the branding work, I created high fidelity mockups and conducted both in-person and remote preference testing  on button designs, icon styling and
            color choices.</p>
        </div>
          <div class="pref-test-img">
            <img src="images/pref_test_img.png" width="1053" height="541" alt="preference test image"/>
          </div>
      </section>
      <section class="final-mockups-container">
        <div class="final-mockups">
          <div class="final-mockups-sidebar">
            <h2>Final Mockups</h2>
            <h4> <a href="https://projects.invisionapp.com/project/14735256"target="_blank">View Prototype <img src="images/link_arrow.png" alt="link image"/> </a> </h4>
          </div>
            <p> With our branding work in place, I created high fidelity mockups of the wireframes and conducted both in-person and remote preference testing on button designs,
              icon styling and color choices.</p>
            </div>
          <div class="final-mockup-img">
            <img src="images/final_mockups_img.png" width="1042" height="1318" alt="final mockups image"/>
          </div>
      </section>
      <section class="lessons-container">
        <div class="lessons-header">
          <h2>What I Learned</h2>
        </div>
        <div class="lessons">
          <div class="lesson-content">
            <h1>1</h1>
            <p>User research & constant reiterations are important and necessary steps.</p>
          </div>
          <div class="lesson-content">
            <h1>2</h1>
            <p>Accepting that “I am not my user” allowed me to focus on creating a product that addressed users’ primary goals.</p>
          </div>
          <div class="lesson-content">
            <h1>3</h1>
            <p>If I had to do anything different, I would spend more time on microcopy. I used illustrations to communicate emotions and moods.</p>
          </div>
          <div class="lesson-content">
            <h1>4</h1>
            <p>The most valuable lesson learned is that UX/UI is not about reinventing the wheel, but about considering intuitive solutions that work
               best for the situation.</p>
          </div>
        </div>
      </section>
      <section class="next-project">
        <div class="next">
          <h1> </h1>
        </div>
      </section>
    </main>
    <footer>
      <section class="footer-content">
        <div class="footer-links">
          <a href="mailto:afyiasmith@gmail.com" target="_blank"><i class="far fa-envelope"></i></a>
          <a href="https://twitter.com/afyiasmith" target="_blank"><i class="fab fa-twitter"></i></a>
          <a href="https://www.linkedin.com/in/afyiasmith/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
          <a href="https://github.com/afyia" target="_blank"><i class="fab fa-github"></i></a>
          <p class="copyright">&copy; 2018  Afyia Smith</p>
    </footer>
  </body>
</html>