ux-process.ejs.disabled

<% include head %>
<div class="page-content">
  <div class="hero-container ux-process">
    <div class="hero-text">
      Design Process
    </div>
  </div>
  <div class="article-container">
    <h1>Design Process</h1>
    <div class="process-container ux-process">
      <div class="process-items-container">
        <div class="process-item">
          User Journeys
        </div>
        <div class="process-item">
          Paper sketching
        </div>
        <div class="process-item">
          Low Fidelity Concept
        </div>
        <div class="process-item">
          High Fidelity Concept
        </div>
        <div class="process-item">
          Prototyping and User Testing
        </div>
        <div class="process-item">
          Iterate
        </div>
      </div>
    </div>
    <div class="article">
      <p>Here is a detailed description of my ideal design process. Of course depending on the requirements and available resources of a project, this process can adapt. But this shows the main steps I like to follow.</p>
    </div>

    <h2>User Journeys</h2>
    <div class="article">
      <div><p>I start my process by thinking about the potential user, and the problem that we are trying to solve with this application. I consider several scenarios where the user can benefit from the application and I note down as many as I can come up with at the moment.</p>
        <br>
        <p>Then I research products that provide similar services in order to understand how they handle similar cases. This allows me to learn more about possible patterns that users might be used to and also to identify common features and major pain points.</p>
        <br>
        <p>If resources allow, based on our potential user profile, I would love to conduct a short questionnaire or organize some focus groups at this stage to make sure we are building something that actually benefits the user.</p>
      </div>
    </div>

    <h2>Paper sketching</h2>
    <div class="article">
      <div>
        <p>Using the user journeys from the previous step, I start quickly sketching some ideas for basic user flows with pen and paper.</p>
        <br>
        <p>With pen and paper, it is a lot faster to visualize ideas and I can just put up a very rough sketch of what the app could look like, but with more focus on what kind of pages will be needed and how the user will go through these pages to successfully complete a scenario.</p>
        <br>
        <p>I try to come up with several options, and then iterate a few times to decide on which option solves the problem at hand in a cleaner and simpler way.</p>
      </div>
    </div>

    <h2>Low Fidelity Concept</h2>
    <div class="article">
      <div>
        <p>When I know more or less what the main user flows will contain, I start thinking about individual pages, their connections with other pages and the components that will be needed in each of them. After coming up with a rough idea for each page by sketching on paper, I move to Balsamiq Mockups to go into more details and create a low fidelity concept for these user flows.</p>
        <br>
        <p>During this step, I try to consider all the details and all possible paths that the user can take between screens. It might happen that I find an important user flow that I haven’t thought of in the previous step, and in that case, I would just return to the previous step and do another iteration.</p>
        <br>
        <p>For me the design process is never linear, it always requires constant iterations, and improving the findings of previous steps as one goes deeper into the project.</p>
        <br>
        <p>From my experience, doing short user tests at this step is very useful in order to spot any problems with the user flows, before spending the effort to create the high fidelity concept.</p>
        <br>
        <p>Also, the feedback given by users (or even colleagues) differ a lot depending on whether the prototype is high fidelity or low fidelity. With low fidelity prototypes, users tend to give more feedback on how things work and interact rather than how they look. Whereas with high fidelity prototypes, the feedback from the users tend to be more focused on how things look and feel. Both types of feedback are very valuable in different stages of the design process.</p>
      </div>
    </div>

    <h2>High Fidelity Concept</h2>
    <div class="article">
      <div>
        <p>After I am satisfied with what components each page should contain and how they should interact with each other, I move on to Sketch and start the high fidelity concept.</p>
        <br>
        <p>If there is an existing style guide, I would try to follow it to match the brand as much as possible while implementing the concept. Yet, if it is a completely new project, I first start by deciding on the color palette and type face(s) to use, which reflects the expected overall feeling of the application.</p>
        <br>
        <p>I would then go through each page that exists in the user flows, and start creating the high fidelity concept while trying to create a library of components for reuse and consistency within the application.</p>
        <br>
        <p>If relevant, I would create small animations using Flinto in order to show how some interactions will work or what kind of animations will be needed.</p>
      </div>
    </div>

    <h2>Prototyping and User Testing</h2>
    <div class="article">
      <div>
        <p>Depending on the type of the application and the complexity of the user flows, I try to decide which parts of the application needs further user testing to prove the concept and I try to come up with a plan for these user tests. In this plan, I also consider what kind of an interactive prototype will be needed for this test.</p>
        <br>
        <p>Sometimes I simply print the screens and navigate the page manually by myself (paper prototyping) depending on the input from the user. This is very fast to do and is very helpful when you need to iterate several times.</p>
        <br>
        <p>If it is a more formal user test, I create a clickable prototype using InVision or Axure which allows the user to experience the application hands-on. This way they can click around and browse the application more similar to how they would if they were actually using it.</p>
        <br>
        <p>For me, the most important part of a user test is the initial plan. The goal of the test should be clear in the beginning so that after the test a better decision can be made about the design.</p>
      </div>
    </div>

    <h2>Iterate</h2>
    <div class="article">
      <div>
        <p>A product is never completely finished. New requirements will emerge based on the users’ feedback, analytics data, change in business requirements etc. thus, the design process should iterate over and over again using the newly acquired data to improve the product further.</p>
      </div>
    </div>

  </div>
</div>
<% include foot %>