kokonut ux-ui process
Post on 21-Mar-2017
Embed Size (px)
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?
It all begins with questions
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.
UNDERSTAND PLAN CREATE
O U R D E S I G N P R O C E S S
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.
We care for the Business and the User goals
Reach Profit Communication Engagement
U N D E R S TA N D I N G O B J E C T I V E S
But our focus is on the User
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.
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.
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.
Handpicking the right team
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.
P L A N D E V E L O P M E N T
How do we make the magic happen?
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.
Inspiration Ideation Implementation
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
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.
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.
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.
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.
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.
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.
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.
Preparation for Development
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.
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.
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.
Its not over yet
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.
Case Study Bache 24
CONTENIDO DEL MEN
VER PERFIL EDITAR PERFILHISTORIAL
PUSH NOTIFICATIONCAMBIO DE ESTATUS DE REPORTE
What makes us really different?
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.