A user-centered design process on designing a productivity app for people that work from home

Brand Attributes

In order to define the brand, I came up with four brand attributes to differentiate my app from competitors. I wanted Squeeze to be:

  • Broad but not complex
  • Serious but not boring
  • Professional but appealing

Moodboard and Style tile

I looked for inspiration in nature and architecture, where the design is accurate, but flexible and adaptable to its environment.

As is an app for a professional use I choose blue for the main colour, because it transmits stability and trustworthiness. And pink as an accent because it makes the app more appealing and less formal.


New poll feature for Instagram.

This is not done by an official Instagram team. It is a concept designed by the team of Clara Carbonell, Cristina Guardiola and Elías Labarta, as part of a project during UX/UI Design studies in Ironhack Barcelona.

Overview

Instagram decided to add a new feature to its product.

Since the beginning, Instagram has focused on simplicity and inspiring creativity through solving problems with thoughtful product design. As a result, Instagram has become the home for visual storytelling for everyone from celebrities, newsrooms and brands, to teens, musicians and anyone with a creative passion.

The scope of the feature

Enable users to poll on pictures or videos.

Challenge


A user-centered design process on designing a productivity app for people that work from home

Overview

Working from home, have you ever been unproductive because you got distracted by social media? Have you ever been in the situation that after working all day long at home, you haven’t talked to anyone face to face? If you have worked remotely before, I am sure you have been in any of this situation.

I have been a freelancer for a while and I know how hard is to be working on your own sometimes. That’s why I decided to tackle this problem.

I started my project with the following hypothesis statement: “I believe giving intuitive organizing tools to…


My experience at Barcelona GovJam

Last June I took part in the Barcelona GovJam. I couldn’t join the event the previous years, and I was really excited to do it this time.

For those who don’t know, the Barcelona GovJam is an event where small teams work for 48h. on building innovative approaches and solutions towards challenges faced by the government and public sector. It happens within the Global Service Jam, and it takes place simultaneously worldwide. The Jam is open to anyone interested in public services, with no need to have experience in this sector.

Honestly, I expected more designers in the room —…


Background

My goals for this case study is to analyze the Princeton University website.

Chartered in 1746, Princeton is the fourth-oldest college in the United States. The University has been led by 20 presidents, spanning colonial times to the 21st century.

User persona

Name: Pablo.
Demographic: 37 year old male, lives in major metropolitan areas, no kids.
Behavior: Works as a VFX artist, plays paddel, enjoys having drinks with friends and loves music.
Needs & Goals: He is complementing his studies with a master’s degree, would love to work for a big firm.

Pain points

Overall, Pablo described the website as complex, with no personality…


After wireframing the app emov, I have made a prototype it inVision. InVision is intuitive and easy to learn. It reminds me of Marvel. Can’t wait to learn all its possibilities!

You can see the result of my prototype here.


The goal here was to create a wireframe version of the Emov app using Sketch. I have done wireframes before, but I have never created a wireframe version of a high-fidelity mockup.

Emov is an app to rent an electric car for short periods of time (car-sharing). It uses Vulog to operate and was launched on December 15, 2016 in Madrid with 500 electric Citroens in the fleet. By early January 2017, there were already 40,000 users in the city. You can see the high fidelity screens below.

This is my wireframe version.


Pros and cons.

As a graphic designer I use Illustrator all the time. Even though I have tried Sketch before, I have got now the opportunity to experience it more and I am ready to point some of the pros and cons I find out.

I have tried to accomplish a perfect clone of these two screens of a travel app that lets people plan trips with friends and share a daily itinerary with activity and location details.

This is the result:


Whole Bank has detected that the conventional Credit/Debit System shows big inconveniences for traveling customers, such as damaging or lost of physical cards, shops sometimes don’t allow credit/debit card payment.

In the purse of migrating from a traditional bank to a more technological and user-friendly company, Whole Bank would like to develop a tool to let the bank customers pay without having to use the physical card, through a new feature on their already existing app.

Empathize

In order to understand the possibilities of the new feature, I have interviewed 5 people that range from 33 to 65, all of them…


This was my first attempt and I struggled to find key information.

This sketch was made while I was watching the TED Talk “How Giant Websites Design For You!” by Margaret Gould Stewart.

Even though this process is supposed to force you to be fully engaged with the presentation, I was sometimes more worried about how the sketch looked like than paying attention to the presentation itself.

In the beginning, I had to stop the video more than once because I missed some figures (figures that then I realized they were not that relevant). …

Cristina Guardiola

UX/UI design. My job is to deliver meaningful digital experiences. Challenging myself to write in English! cristinaguardiola.com

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