Image for post
Image for post

The world is big and diverse. Right now there are around 7.6 billion people in the world, 4 billion with an internet access. When you’re improving a Design System for a product used worldwide, like Lexicon for Liferay, you should take this simple statement into account. Cultural, religious and regional concerns need to be considered. It may sound obvious, but the true fact is that we sometimes forget about it.

I’m going to explain how we redesigned and tested empty states illustrations for Liferay products.

1. The past

Let’s put a bit of context around this story. As you may know, an empty state illustration is shown when there is not any other info to display and capture the user’s attention. A friendly face looking around, smiling, or winking was the animation family for empty states in Lexicon 1 by Marcos Castro. They were created to give feedback in a memorable way and provide a pleasurable experience for the user but the fact was that the smiling face animation caused some cultural issues. …


Two parallel worlds

Image for post
Image for post

I have recently finished a super-intensive UX course that has had me very busy for a couple of months. For all those who don’t know what the UX is, like me before starting the course, UX stands for User Experience. Lately this meaning is intended mainly for the digital world, webs and apps that need a simple and functional design, usable and understandable by thousands of potential users. But this same has always been done in architecture and industrial design. It just didn’t have such a powerful name, but putting the user in the center of design and focus on their needs to respond to problems that may arise before they even exist, it’s our daily bread. …


Web / App for managing a smart building

Image for post
Image for post

Before starting to explain the digital project of Godhood, I have to tell you what it’s about because it’s a new product. Golhood network of smart buildings all over the world. They are located in major city centers. There you can rent your house and they have shared spaces and extra services. They are technological buildings, sustainable and self-sufficient, so electricity, water and Wi-Fi are included in the rent. The community is very important, and therefore there will be activities and events to connect with the neighbors of both the building and the neighborhood. There are bicycles and electric vehicles at your disposal so you can move freely around the city. A person will be in charge of managing the building and help you in what you need (pick up your packages, solve the incidences of your house, etc.). And in addition, an app lets you manage everything from the palm of your hand, from your rent to the home automation. The maxims are flexibility and comfort. …


Individual Ironhack Project

Image for post
Image for post

The first individual project for the Ironhack UX / UI Design Bootcamp was to redesign the government or non-profit website or app. I chose the NGO website Children’s Village. For those who don’t know their work, Children’s Villages take care of children and youth who are vulnerable in 134 countries, including Spain.

0. Challenge

A website with too much information at first sight, with duplicate content and no hierarchy that makes navigation difficult and gets a confusing user who doesn’t find what he wants.

Image for post
Image for post

1. Research

Surveys and interviews were decisive in obtaining information. Of the respondents:

63% collaborate with NGOs (26% as partners, 15% as donors, 15% as volunteers and 5% as…


Smart People. An application for a language school

Image for post
Image for post

From the first low fidelity wireframes by hand to the final prototype many iterations happen, the design is evolving and the problems that appear have to be solved.

Here it’s the evolution of one of the projects we did during the UX / UI Design Bootcamp in Ironhack, the Smart People group project, which we developed in parallel with an individual project and for those that we had for 4 weeks. In this post I will tell you the whole process that we follow: research, information architecture and visual design.

But here I leave a brief summary to explain you the basics, the project was about making a language academy for young people between 12 and 18 years old. After the research, we decided that it had to be a mobile application. We would use the gamification to make it more attractive, and there would be extras and achievements. And for the visual, we wanted the user to feel identified with the brand so we chose a fun, young and somewhat rebel tone, with fluorine colors and flat textures on a black background reminiscent of arcade games. Let’s see step by step the evolution of the…


Language App

During the Ironhack UX / UI bootcamp we have to develop 4 projects in 8 weeks. The first week, I have already told you in this post “My first Sprint”, after that first week and the first project made, we faced two projects in parallel, one individual and another one groupal, for which we had 4 weeks. In this post I will tell you the group project that I did in collaboration with Laura Barreales and Fran Fuentes.

Image for post
Image for post

Smart People is a summer English academy for young people who wants to offer an online summer course to get more profitability. We start from a brief that gives us the key points to take into account when facing the project. Our users will be teenagers between 12 and 18 years old and we will have 3 learning levels. …


A different week, attacking the creative process another way.

Image for post
Image for post

For those who don’t know, the Sprint is a work methodology out of the jaws of Google and is based on Design Thinking. It’s a process that consists of detecting and solving a problem in 5 days. It’s valid for all types of products, whether digital, business or industrial. For more information take a look into this link.

5 days may seem like very little time, but when implementing a Sprint what we do is save time and costs, because if the proposal doesn’t work is discarded, but with the advantage of not having lost several months in the detailed design and production. One of the keys behind Sprints is the concept of “fast mistakes” (since it saves a lot of costs and many annoyances). …


Boston University Website Lo-Fi

Image for post
Image for post

Introduction

Boston University (BU) with more than 3,000 teachers and approximately 30,000 students, is the fourth largest private university in the United States, established in 1869 in Boston, Massachusetts, has 18 schools and faculties operating on two separate urban campuses. Among his illustrious students was Martin Luther King who was doctored here in 1955.

Image for post
Image for post

Its website has many options and possible users, and among its functionalities we can find the large amount of information in different areas (admissions, academic, research, campus life, etc.), a community of students and alumni, news, events, etc. …


First touch with the tool exercise

I have used the low and medium fidelity wireframes of the “inverse” exercise of emov, to make the interactions of its functionalities with InVision. I know that this type of wireframes are not usually used to make prototypes, since a prototype should be as close to reality as possible so the user can feel using the application at full capacity, but I have decided on these wireframes because I was given the option to do more interactions between screens.

Image for post
Image for post

InVision seems to me a magnificent application, because it is able to give life to a prototype in a very simple and intuitive way, as if it were already in operation, making it much easier to understand how our design is used. …


From MockUp to Wireframe Hi Fi

Today, as part of the prework of the UX Design bootcamp from ironhack, we will solve an exercise that we will rarely have to face again, it is to make the way back to the usual, that is, to convert the screens of an existing application in wireframes.

The challenge is to preserve the same aspect of the application screens by using black and white wireframes in a very simple way.

The application done was emov, a platform for renting shared electric cars, which since its launch in Madrid in 2016 with 500 cars in its fleet, already have 40,000 users, and plan to expand in other cities in Spain and abroad. …

About

Susana Vázquez

Architect in the real world and Product Designer / UX / UI in the digital one.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store