Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
231 lines (190 sloc) 9.56 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Randy Panopio Portfolio">
<meta name="author" content="Randy Panopio">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Lookbook</title>
<!-- icon -->
<link rel="icon" type="img/favicon" href="img/favicon.png">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style-process.css" rel="stylesheet">
<!-- Custom fonts -->
<link href="font-awesome/css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Cabin:400,700%7cLato:300,300i,400" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html#page-top">Randy Panopio</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="index.html#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="games.html">Games</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="films.html">Films</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- auto scroll button -->
<a href="#page-top" class="btn btn-circle js-scroll-trigger" id="scroll-top-btn">
<i class="fas fa-chevron-up animated"></i>
</a>
<!-- Intro Header -->
<header class="masthead masthead-lookbook">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 ">
<h1 class="brand-heading">Lookbook</h1>
<p class="intro-text">Mobile Product and Interface Research and Design. Lookbook is an application that allows consumers to request services from different cosmetic stylists.</p>
</div>
</div>
</div>
<a href="#about" class="btn btn-circle js-scroll-trigger btn-bottom">
<i class="fas fa-chevron-down animated"></i>
</a>
</div>
</header>
<!-- content -->
<section id ="about" class="download-section content-section text-center radio-content">
<div class="container">
<div class="row">
<div class="col-lg-8 content-row radio-content mx-auto">
<p>
<strong>Note: This page and project is currently Work in Progress</strong><br />
<strong>Role:</strong> User Experience, User Research and Testing, Interface Design, Feature Design<br />
<strong>Tools:</strong> Photoshop, ProtoPie, Illustrator, Adobe XD<br />
<strong>Team:</strong> Paulo Carlos, Arth Bhattarai
</p>
</div>
<div class="row">
<div class="col-lg-2 content-row">
<h3>Summary</h3>
</div>
<div class="col-lg-8 content-row radio-content">
<p>
Lookbook connects those looking for stylist services whether it be a haircut, makeup, skin care, or any personal cosmetic artists to local, self-run stylists who are looking for customers.
</p>
</div>
</div>
<div class="col-lg-12 mx-auto" style="margin-bottom:2%">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/36331w8HItk" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="row btn-dl">
<div class="col-lg-8 content-row mx-auto">
<a href="https://share.protopie.io/gHHCfVNJ2f8" class="btn btn-default btn-lg">Try Prototype</a>
</div>
</div>
<div class="row">
<div class="col-lg-2 content-row">
<h3>Design and Prototye</h3>
</div>
<div class="col-lg-8 content-row radio-content">
<p>
Lookbook needed to be designed from the ground up. Our team went through several iterations of designs and prototypes which we used to test our users in order to refine the experience of using our application.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 content-row mx-auto content-image">
<img class="img-responsive" src="img/experiencemap.jpg" alt="">
<p>Lookbook Experience Map</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 content-row mx-auto content-image">
<img class="img-responsive" src="img/persona.jpg" alt="">
<p>Early Persona</p>
</div>
</div>
<div class="row">
<div class="col-lg-2 content-row">
<h3>Research and Process</h3>
</div>
<div class="col-lg-8 content-row radio-content">
<p>
Through this project, I conducted numerous user testing and research to fully understand what the needs of my users are and what other possibities that might come up with the design outside of my own ideas. Creating Personas, User Journey Maps and Empathy Maps helped me look at how I solved design issues holistically and through the lens of the users that I am designing for. This process helped refine this project's experience more pleasurable to use.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 content-row mx-auto content-image">
<img class="img-responsive" src="img/exampledesignprocess.jpg" alt="">
<p>Example of early design process</p>
</div>
</div>
<div class="row mx-auto ">
<div class="col-lg-4 content-image mx-auto ">
<img class="img-responsive" src="img/onboarding.gif" alt="">
<p>Onboarding Process</p>
</div>
<div class="col-lg-4 content-image mx-auto">
<img class="img-responsive" src="img/booking.gif" alt="">
<p>Booking Appointment Flow</p>
</div>
</div>
<div class="row">
<div class="col-lg-2 content-row">
<h3>Reflection</h3>
</div>
<div class="col-lg-8 content-row radio-content">
<p>
This project game me an insight on a complete workflow of researching, designing, and testing an application and its features. I learned a great deal about how to design experiences, and how to properly design interfaces.
I think the most important aspect I learned was designing within the context and specifications of a problem, as well as designing for as much users as possible. This
also goes in hand with really understanding how to identify my audience and their needs. Learning how to create personas helped me really understand what a potential
user would need, rather than a surface or quick-jerk understanding of things they might want. Understanding user goals and experience maps helped my design process
and improved how I refined my design. By actually understanding the issue I’m trying to solve by framing it within these boundaries really improved my thought process in
design. It made me realize that having a well designed experience really does make a massive difference in how we use products and services. </p>
</div>
</div>
</div>
</div>
</section>
<!-- content end -->
<!-- Footer -->
<footer>
<div class="container text-center ">
<div class="site-footer-links">
<div class="row">
<div class="col-lg-8 content-row mx-auto">
<a href="index.html#projects" class="btn btn-return btn-lg">Return to Projects</a>
</div>
</div>
<ul class="social">
<li class="linkedin"><a href="https://www.linkedin.com/in/randy-panopio-29bb47109/"><i class="fab fa-linkedin"></i></a></li>
<li class="github"><a href="https://github.com/randypanopio"><i class="fab fab fa-github-square"></i></a></li>
</ul>
<div class="copyright">&copy; 2018 Randy Panopio<span>&bull;</span><a class="copyright-link" href="styleguide.html">Styleguide</a><span>&bull;</span><a class="copyright-link" href="https://github.com/randypanopio/portfolio">Repo</a><span>&bull;</span><a class="copyright-link" href="citations.html">Citations</a></div>
</div>
</div>
</footer>
<!-- Core JS Libraries - Bootstrap core JavaScript & Jquery etc. -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-easing.min.js"></script>
<!-- Custom script -->
<script src="js/script.js"></script>
</body>
</html>
You can’t perform that action at this time.