Kokonut UX-UI Process

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 shouldn’t 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

MilestonesKPI’S

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 couldn’t keep up with the industry pace if we weren’t 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. We’ll 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, we’re about to send this project

to the place where it becomes alive.

31

</Let the code begin>

32

Almost ready to launchAfter handling the result of our UX/UI process to our development team we’ll keep working close

together, collaborating in every stage and step of the process to ensure our design comes alive right as we created it. We’ll 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 we’ve been waiting,

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

34

It’s not over yet

35

Test, iterate and iterate some moreA digital product is never truly finished, that’s the charm of it. We’ll 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