User Experience Design should be a key role in your enterprise. Software development, either for a website, a mobile app or an online banking system, is not limited to coding or database development; we need to take into consideration the ease of use of the interface: how friendly it is for the person using the system.
Before writing a single line of code, teams should have a greater understanding of what their users need to accomplish and what are their expectations on how to get there. With greater insights into our user’s needs, we can then proceed to design better interfaces, that help people get from point A to point B, allowing them to complete tasks faster and easier. This is the foundation of user experience design: providing people a great experience of our digital products.
User Experience Design is the iterative process of creating those experiences based on the user´s needs, expectations and desires.
Listen
There is a lot we can bring to the table regarding our design, usability and information architecture experience; but nothing beats hearing about the problems first hand from the people that are using your software.
The first step of the project should be investing a proportionate amount of time talking and listening to your users, and this can be arranged using several tools, such as interviews, surveys or usability tests. The important thing is: feeding our design decisions with the input from the person actually using the app.
Map
We should understand the journey the user takes through the application:
What are the logical steps a person takes from point A to point B inside your app?
What is the flow of the screens or interactions when using a service?
How can we organize all your content in a hierarchical structure?
These are some of the questions we have at the early stages of a project that can be answered using maps.
Sketch
With each phase in this process, we learn more about the product itself and its users; you could say it’s the transformation of an idea from the abstract to a more concrete representation. And the sketching phase is the first time we start exploring how it’s going to look, or at least, how are we going to organize the information and navigation in each screen or page.
Pen and paper provides us with the flexibility of thinking, capturing and putting many ideas into paper. This allow us to quickly explore a lot of possibilities, represented in low fidelity, instead of exploring just one [super polished] design.
Wireframe
The next logical step in our process would be to explore in more depth one of the solutions presented earlier in sketch format. This is done using wireframes, a blueprint that visually represents each page or screen of the application, helping us focus on the structure and content, instead of colors or photos. You could say it’s a skeletal framework of a website.
For some stakeholders, they are a lot easier to understand, as they represent the application in a less abstract way. They also provide us with a quick way to test assumptions with users, before investing a lot of time designing, or even coding, the application.
Design
Beautiful design sells. At this point, we have a great understanding of your users, of the value your digital product provides and how it’s going to be presented as an interactive and easy to use experience. Now comes the design of the user interface, the crossroads between architecture and your company’s branding.
Your digital product can continue communicating and helping your users with design elements: colors, typography, balance and uniformity. This art form is incredibly valuable to the success of your project.
Prototype
Prototyping allows us to test our designs, either at the sketch, wireframe or design phase with our users, showing them an interactive representation of the final product. Interactive prototypes are an incredibly helpful tool for perfecting a digital experience before starting developing it, allowing us to quickly find small problems that can be polished before release.
A compilation of YouTube channels I follow to get UX Design updates, tips and resources.
January 13, 2020
A web redesigned we built using the MUI CSS framework and Craft CMS.
November 7, 2019
This was a fun web redesign project for an NGO. Wireframes, UI Design, HTML over Materialize CSS and built on Wordpress.
October 7, 2019