work2.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> 
  <title>iVW App</title>
  <link href="css/work2.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>

<body>
  <header>
    <div class="container_nav">
      <a href="index.html" id="my_name">Jiefang Li</a>
      <nav id="top_nav">
        <ul>
          <li><a href="index.html">Work</a ></li>
          <li><a href="about.html">About</a ></li>
          <li ><a href="https://drive.google.com/file/d/1ilSDPr38J20eE-0xOIcTPWDny7pMqRMl/view?usp=share_link">Resume</a ></li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="gradient"></div>
  


    <div class="cover_work">
      <h1>iVW App</h1>
      <h3>Encourage car dealers to promote performance and facilitate the loyalty of employees</h3> 
    </div>
    <div class="project_overview">
      <div class="overview">
        <h4>Overview</h4>
        <p class="body_text">
          This is the first app design project I encountered in the industry. Our company cooperated with imported Volkswagen to design and develop an app for dealership employees, aiming to increase employee loyalty and improve dealership employee performance.
        </p>
      </div>
      <div class="role_timeline_tool">
        <div class="role">
          <h4>Role</h4>
          <p>Research, interactive prototyping, UI design, follow up the development process</p>
        </div>
        <div class="timeline">
          <h4>Timeline</h4>
          <p>5 months</p>
        </div>
        <div class="tools">
          <h4>Tools Used</h4>
          <p>Sketch, Adobe PS</p>
        </div>
      </div>
    </div>

    <img id="work2_image" src="images/work2/cover.jpeg" alt="Product image of iVW App">

    <div class="content">
      <section>
        <h3>BACKGROUND</h3>
        <p class="body_text">
          With the emergence of more millennials in the dealerships, Volkswagen Group (China) Import Co., Ltd. (here under would be called as VGIC) needs to develop an unique platform to motivate sales, retain performing employees as well as deliver cost-effective training to these group of young employees.</p>
      </section>

      <section>
        <h3>NEEDS ANALYSIS</h3>
        <img class="image" src="images/work2/analysis.png" alt="Needs analysis">
      </section>

      <section>
        <h3>KNOWING USER</h3>
        <img class="image" src="images/work2/user.png" alt="Persona">
      </section>

      <section>
        <h3>WORKFLOW</h3>
        <img class="image_large" src="images/work2/flow.png" alt="User flow">
      </section>

      <section>
        <h3>CONCEPT DEVELOPMENT</h3>
        <p class="body_text">
          After lots of research, we brainstormed the possible function of iVW app(the name used to be WEClub). And then we communicated with VGIC and finalized the functions of the first version of the app. 
        </p>
        <img class="image" src="images/work2/process.png" alt="Wireframe">
      </section>

      <section>
        <h3>INFORMATION ARCHITECTURE</h3>
        <p class="body_text">
          We <span class="strong_text">prioritized features</span> and organized what needed to be developed in the first release using card sorting method. The following figure shows the interface information structure of sales consultants. Due to different operation permissions and applicable functions, the functional modules of the app for employees in different positions are slightly different.
        </p>
        <img class="image_small" src="images/work2/arch.png" alt="Usability test">
      </section>

      <section>
        <h3>WIREFRAME</h3>
        <img class="image" src="images/work2/wireframe.png" alt="User flow">
      </section>

      <section>
        <h3>COLOR & ICONS</h3>
        <p class="body_text">
          To demonstrate the <span class="strong_text">premium and confident quality</span> of VGIC, I selected the color #2B32B2 Bright Navy together with VW brand tone as dominant colors. Navy is the color that is reminiscent of deep relaxation and reliability. It is ideal for showing the app is professional.
        </p>
        <img class="image" src="images/work2/icon.png" alt="Usability test">
      </section>

      <section>
        <h3>USER INTERFACE</h3>
        <img class="image" src="images/work2/interface.jpeg" alt="Usability test">
        <img class="image" src="images/work2/hi-fi.png" alt="Usability test">
        <img class="image" src="images/work2/final.png" alt="Usability test">
      </section>

      <section>
        <h3>RESULT</h3>
        <p class="body_text">
          · Delivered <span class="strong_text">120+</span> pages of interface design drafts
        </p>
        <p class="body_text">
          · Outputted <span class="strong_text">2</span> sets of design concept plans 
        </p>
        <p class="body_text">
          · <span class="strong_text">98%</span> employee download rate
        </p>
        <p class="body_text">
          · Rated <span class="strong_text">4.2/5</span>🌟 in the Apple App Store 
        </p>
        <P class="notes">* The last two data were collected 2 months after the launch of iVW app.</P>

      </section>


      <section>
        <h3>WHAT I LEARNED & NEXT STEP </h3>
        <p class="body_text">
          This is my first app that I participated from 0 to 1 and finally launched.
           I overcame many challenges of communicating with frontend developers about the effect 
           of my design. I had a better idea of ​​what a programmer can achieve in a limited time. 
           Following the process of agile development, I also learned that we don't have to do 
           time-consuming and unimportant design in the early stages of the product. Design is 
           actually <span class="strong_text">an art of balance</span>.</p>
           <p class="body_text">
           For the next steps, on the one hand, we would iterate our product according to the needs of our clients(VGIC). For instance, explain redemption rules more clearly to users in an appropriate manner. On the other hand, we would continue to optimize this app based on customer feedback, aiming to improve the user experience.</p>   
      </section>

    </div>


    <div class="work_navigation">
      <a href="work1.html"><i class="fas fa-arrow-left"></i>  Pickup App</a>
      <a href="work2.html">Cercling Internship <i class="fas fa-arrow-right"></i></a>
    </div>
    

    <footer>
      <div class="footer_container">
        <p>© Designed by Jiefang Li</p>
        <div class="contact">
          <a href="https://www.linkedin.com/in/lijiefang">Linkedin</a>   
          <a href="mailto:lijiefang001ljf@gmail.com">Email</a>   
          <a href="styleguide.html">Styleguide</a>   
          <!--Knowledge of HTML Email Tag https://www.tutorialspoint.com/html/html_email_links.htm-->   
        </div>
      </div>
    </footer>
 

  </body>
</html>


<!--Visual reference for designing my portfolio: 
  https://www.glorialukdesign.com/
  https://allyklionsky.com/apple-tv
  https://www.aditisaldanha.com/
  https://www.aditisaldanha.com/linkedin-internship
-->