User Experience

UX • UI • IA • IxD

“User experience design (UXD, UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human–computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.” Wikipedia>

User experience is an area in which I wanted to get specialized, and I have been lucky enough to work on it. I’ve used design thinking methodologies to deliver documentation and tangible contributions, which have defined a variety of products. In addition to these, I have been very fortunate for getting closer to IDEO and other inspiring design methods; sharing with talented people from the industry in a series of workshops, classes and meet ups.

For IP reason I am not able to show you documentation of a single project, therefore I’ll show examples brought from a variety of projects using as a base the UX checklist from Github




Competitive Analysis
Research the market, the good, the bad & the ugly, also the prom queen. Understand your competition.





Data analysis
The answers are in the data, focus on following the most important data related to the project to get insights that could define success or failure of a project. We always need to keep an eye on it, understand how the audience is engaging with your product, campaigns, landing pages; what is working and what is not.



User feedback
Design and conduct surveys, interviews, recording, screen captures, etc. Try to find areas of improvement. You might have heard the phrase “The client is always right” well in this case is the same. They have the answers.





User stories
Persona design to drive your choices around design elements. Name, gender, hobbies, daily tasks, frustrations, aspirations, all of these are opportunities for the design. Remember “User center design”.




User flows
Define how your persona will get to the product and how are they going to use it. Understand your users to define these paths, check for any dead ends.


user flows



Red routes
It is important to define these routes in your project to identify, prioritize and eliminate any obstacles on your user journeys. These red routes will allow you to visualize when things are getting close to get out of track, and potentially having a plan of attack to get back on the rails. Prioritization of features aligned with the goals of your project.


board post it



Brainstorm & sketch
Get a bunch of people in a room with paper, markers and drinks, sketch, make jokes, vote, disruption, enjoy. When your brain is relaxed answers come to you easier (sometimes). Have an agenda, Allow the group to express their minds, collect the answers and start looking for patterns.





These are the blueprints of your experience. These will contain every room, power outlet, doors, windows, air vent, emergency exit, among all the things the project includes. Establish patterns, use best practices. It’s good to go into detail in functionality and prototype to test we are not missing components; what can we improve?





Use paper, InVision, Omnigraffle, Axure, Adobe Experience Design or any of the tools available. Navigate your app before is alive. How do y’all go back? Does it make sense? Prototyping should never stop, but should be more intense in preproduction.


prototype animation



The information is structured in a way that your users can understand; also Search Engines. Organized information will allow the users locate other pages and features. This information should aligned with your strategy.


information architecture sitemap



Design the language of your brand, who is this person like? how this person talks to the audience?

The tone and personality of your brand must resonate with your target. Your product has to look and speak like your target, there must be a connection in values, ideals, stereotypes, to meet the target audience expectations.



Create designs using WCAG regulations to that the experience is accessible to users with vision and other limitations.


accessibility icons



UI elements
The creation of a playground of interactive components that will allow users interact with the digital experience. Sliders, buttons, tabs, radio buttons, dropdowns, text links, body copy. Create guidelines with patterns to be followed in the app. The style guide is a breathing doc that is normal that evolves with your project, keep it updated.


ui play ground elements



Add gestures to your experiences to make them more fun to use. Indicate all of these in your wireframes.


gestures icons



This will depend on the screens the client requires to offer in the project, but it is highly recommended that every digital experience should be available on every screen size.





If you have to wait
Take advantage of every waiting moment like slow connections, heavy graphics or maybe just a super complex futuristic app loading time. Use graphics to delight the user in their wait.





Errors and empty states
Remember always to design error messages, include them as part of your ui playground. Consider them in the finalised comps. In addition to these, design empty states to make your app more appealing in the initial experience; even though there is no information, it has to look nice.


ayogo-pictureitapp empty states



Completed actions
Marco?.. Polo! Provide immediate feedback when user has successfully completed an action. It feels great to hear back that “good morning” when making a task this is like water: Good job! Righton! Wohoo!



Final Comps
Create pixel perfect comps, including components, states, proper font styles, and showing the most relevant flows in the experience. In a project with a variety of screen sizes, always design for the smallest. Mobile first


final comps


Use of images and icons
The usage of these will vary depending on the target audience, on the subculture; use icons that have strong meanings in these groups. Beware of using svn files, so everything looks sharp on high density screens.



Fonts & colours hierarchy
Use color to provide focal point for the action to be taken in the screen. What do I need to tap here? please don’t make me think. In the same way as typography, establish a hierarchy in your character styles and apply them with consistency all over the experience.


color palette



Micro copy
Every word is important, and a bit of personality will help your brand. Good job! Whohooo! Excellent! a high five and even sounds could have an emotion feeling associated with the moment in the experience.



Micro interactions
Micro moments of delight, the refresh animation, the spinner, the pop up, the slider. Every interaction is a potential place to add a connection with the user by providing feedback. Surprise!


ayogo-pictureitapp feedback



Like in the movies, use transitions and animations to provide a sense of life, location, evolution, progression. Slide left and right are like the doors connecting and transporting users through the rooms in this building.


page transition wireframes



KPI Setup
How does the finish line look like if we won the race? what we wanted to achieve? so from the plan we had, which are your key performance indicators? Keep an eye on them during the life of the projects, these will allow you understand how things are working and will drive you to take actions to achieve these goals.



AB Test plan
In design, try to have more than one option, think outside of the box, experiment with layouts, colors, components and interactions. Have always a backup plan, from providers, technologies, etc.



Ongoing Test
Have an eye on top of your metrics, challenge your design decision by running surveys or personal consultations. Make new prototypes, drive tests with people that your don’t know to get honest answers. Best advice always comes from a proper research and first hand contact with the target audience.