Post on 21-Mar-2017
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
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
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
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
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
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
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
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
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
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
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
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
39
CONTENIDO DEL MENÚ
LOGINHACER REPORTE
FEEDBACK
VER PERFIL EDITAR PERFILHISTORIAL
VER REPORTE
PUSH NOTIFICATIONCAMBIO DE ESTATUS DE REPORTE
Wireframes
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