kokonut ux-ui process

Download Kokonut UX-UI Process

Post on 21-Mar-2017

134 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • K

  • Summary6 Our Design Process

    7 Understand 15 Plan 18 Create

    20 Inspiration 21 Information Architecture 22 Visual Reference 23 Benchmarking

    24 Ideation 25 FlowCharts 26 Wireframes 27 Style Guide

    28 Implementation 29 UI Design 30 Prototype 31 Preparation for development

    32 Programming & Launch 37 Case Study: Bache 24

  • How do we create User Experience?

    3

  • It all begins with questions

    4

  • Why should this product exist? Which uniqueness will bring to the table? Who is the right user? How will we measure its success?There are many questions that need to be answered before the first line of code is written or the first sketch is made. We work with you from start to finish to help you focus on what is important.

    5

  • UNDERSTAND PLAN CREATE

    O U R D E S I G N P R O C E S S

    26

  • 1 . UNDERSTANDWe could only start working on a project if we believe it can be successful,

    meaning that whatever outcome we end up with it could become a valuable product for people and create a deep bond between user and brand.

    7

  • We care for the Business and the User goals

    8

  • Business

    Reach Profit Communication Engagement

    UserFUNCTIONAL EMOTIONAL

    U N D E R S TA N D I N G O B J E C T I V E S

    Data Mining

    9

  • But our focus is on the User

    10

  • User Centered EverythingThis may not come as a surprise but we live on the User Centered Age, we do not believe in clients, marketing personas or targets, we believe in users, in focusing

    our efforts to create tools and solutions rather than ephemeral products, and that this will let us connect with people and become valuable to them.

    11

  • You are not your userThe only way to create a successful user experience and interface is by fully understanding that we are not our final users, we are biased by our own experience and training using technology

    and interacting with our own brand and products, we possess languages and skills that our users shouldnt have to. So we have to take a dive and go deep when listening to them.

    12

  • Understanding User ExperienceUsing processes deeply rooted in Design Thinking techniques we collect information that will let us know

    how best to design for an optimal user experience. We go straight to our user conducting immersive research practiques so we get to know everything that will become important, his Consumer Journey,

    fears, needs and expectations and his personal and social context and behavior.

    13

  • Handpicking the right team

    14

  • 2. CREATING A PLANWe carefully put together a multidisciplinary team with the right amount of curiosity

    and expertise to get immersed in your endeavor. Together we understand what are we trying to create, for whom and with what objectives for both brand and user. Then we envision Key Performance Indicators and establish Time Milestones and we set sailing.

    15

  • TalentRIGHT TEAM

    P L A N D E V E L O P M E N T

    TimeSTAGES

    MilestonesKPIS

    16

  • How do we make the magic happen?

    17

  • 3. MAKING ITAfter knowing what our objectives and milestones are we start working using a structured

    approach based on Design Thinking Methodology. We investigate and gather information from our user, using information we come up with primitive guidelines that will let us begin testing

    prototypes and iterating on their performance until we finally get it right.

    18

  • Inspiration Ideation Implementation

    Information Architecture

    Wireframes

    UI DesignFlowCharts

    Prototype

    Style GuideBenchmarking

    Visual Reference

    Development

    Launch

    19

  • 1. Inspiration

    20

  • Inspiration

    I.A. is the structural design of shared information environments, and the art and science of organizing and labelling software to support usability and

    findability. We use it to find behavior maps, collect information, order and classify it to create fine structured navigation represented as FlowCharts

    Information Architecture

    21

  • Inspiration

    We conduct a research on visual communication trends, common and best practices as well as ground-breaking approaches. We use our team

    special sensibility to find a fresh but firmly grounded visual design.

    Visual Research

    22

  • Inspiration

    We couldnt keep up with the industry pace if we werent constantly on the lookout for new technological developments and exciting new devices and applications. We conduct research on current

    best practices in navigation and visual style, so we can learn from the bests and take it one step ahead.

    Bench Marking

    23

  • 2. Ideation

    24

  • Ideation

    The basic map of interaction between a user and our products, a Flowchart will let us know how complexity is handled and transformed into simple, intuitive and rewarding

    interaction, so we draft numerous flowcharts before even starting to craft our own design.

    FlowCharts

    25

  • Ideation

    Arriving at this point brings us excitement, seeing a primitive website or application inside a wireframe gets us closer to actual development. Wireframes let us know how much information will live in each screen and how the user may feel when interacting with it, we create wireframes

    for each platform so we can understand any variation and adjust accordingly.

    Wireframes

    26

  • Ideation

    Everything we learned during the inspiration phase is put to work here. A style guide will let us have visual consistency trough screens and platforms, and will be extremely important

    when expanding the design team if our project happily grows out from our hands. Also, here we establish the tone and proper voice for the messages that will guide our user.

    Style Guide

    27

  • 3. Implementation

    28

  • UI Design

    Implementation

    Finally. We have the product of our inspiration and ideation phases, a Visual User Interface, but we are only getting close to having a finished product, a good user interface will change and adapt trough testing and iteration of our prototypes.

    29

  • Prototype

    Implementation

    Using dedicated software we begin creating interactive prototypes. Well have many, some will be intended to test a specific function and some others a whole process and

    user journey inside our application, prototypes lets us grasp how our user will experience our product so we can fine tune the interaction we had envision.

    30

  • Preparation for Development

    Implementation

    After many almost fully working prototypes and a lot of user reviews and iterations we are ready to give it a go. So strap in and sit tight, were about to send this project

    to the place where it becomes alive.

    31

  • 32

  • Almost ready to launchAfter handling the result of our UX/UI process to our development team well keep working close

    together, collaborating in every stage and step of the process to ensure our design comes alive right as we created it. Well only step back when we have in our hands everything that we worked for.

    33

  • Ready for Take-OffNot much is left to say. This is it, the moment weve been waiting,

    after going back and forth between development and design teams, were ready to launch and take the world.

    34

  • Its not over yet

    35

  • Test, iterate and iterate some moreA digital product is never truly finished, thats the charm of it. Well constantly be listening to our

    users and analyzing key performance indicators so we can always get better. Upgrading and improving our products to keep them relevant is a compromise of our studio.

    36

  • Case Study Bache 24

    37

  • 38

    FlowCharts

  • 39

    CONTENIDO DEL MEN

    LOGINHACER REPORTE

    FEEDBACK

    VER PERFIL EDITAR PERFILHISTORIAL

    VER REPORTE

    PUSH NOTIFICATIONCAMBIO DE ESTATUS DE REPORTE

    Wireframes

  • 40

    User Interface

  • What makes us really different?

    41

  • 42

  • We create memorable momentsWe believe in creating meaningful experiences, in creating truly interactive, entertaining and

    surprising moments. In a world flooded by ephemeral experiences we strive to create products and experiences that last and that matter, even if is only for a moment in the life of one of the our users.

    43

  • Thank You

    K

    44