Design is Much More Than “Making It Pretty”

Is design more than just making it pretty?

Marcos is a Product Designer at Quipu. This function requires making important decisions before tackling the visual part of new features. The multi-step process consists of structuring and simplifying the product, talking about it with the potential users, and, finally, making it look good.

Recently, Marcos became Project Manager, on top of his design work. He is in charge of coordinating a brand-new key feature in Quipu, the All-In-One project. This challenge allows for cross-functional cooperation between the different teams in the startup.

 

The multi-step journey of a Product Designer

According to Marcos, it is very difficult to fully describe what his job consists of. People usually think the design is just about making things pretty. But this part is just the final step of a long journey.

“To create a beautiful thing, there are a 1000 decisions to think about.”

 

Structure

First of all, the product designer needs to fully understand the goal of a particular project. It is important to investigate what the users are expected to accomplish with the product to make all the structural and functional decisions. To meet the users’ expectations, he needs to take into account what they want to achieve and how to interact with them.

“These decisions are more about “How does it work?” and not “How does it look?”

 

Simplify

Secondly, once the structure is established, it is time to make it clear and easy for users. This means structuring the information and interactions, and deciding what is going to be shown on particular pages.

“If you make the right choices, your visual design is gonna be easy. Because in the end, the simplest things are usually the prettiest.”

Communicate

Thirdly, it is important to focus on the language. The design is not just about layout, it is also about content and exchange of information, this is why the product designer needs to figure out how to talk to the users.

“If you have a beautiful design but the wrong words, it will confuse the user.”

Make it pretty

Once these steps are covered, the product designer can tackle the visual part. Visual design and launching things are the moments Marcos enjoys the most. Once all top decisions are made, it is time to make it look beautiful.

“I enjoy it the most, it is more relaxing and visual. We all worked together, we like this, let’s make it beautiful.”

 

Successful cross-department communication with the engineers

Marcos is working with the engineering team every day to anticipate potential issues in his design work. The engineers see the whole process and investigate if it is possible with the technology they have. If it is not, Marcos can see the limitations before finishing the design thanks to this real-time feedback. This collaboration allows him to have more control and visibility.

 

Marcos’ everyday life at Quipu

What Marcos likes the most about his job is the team he is working with every day. According to him, they are really fun to work with, and they are committed to move fast and don’t waste time. They focus on things that are going to impact consumers and the business. Want to get to know the team better? Meet Judith and Ana!

These are the things that Marcos likes about working in a startup: the team can move faster. He also likes the fact that you have more control of the project, more freedom and more impact on the organization, the product and the decisions that are made. This is the reason why Marcos has always worked for a startup, including one located in Silicon Valley. Discover his journey from Spain to Silicon Valley in our podcast.

“In Quipu, your opinion is one out of 20. In a company of 3000 employees, your opinion is one out of 3000. Here, even if you don’t end up with what you wanted to do, you have been heard, your opinion has been considered.”

All-in-One Project Management

The new “All-in-one” product allows a new structure in Quipu which aims to create cross-functional teams with employees from each department. Therefore, each team can benefit from the talent of Design, Sales, Engineering, Success, etc. In the past, it felt that the team was fractionated, there was a lack of information between each department. This multifunctional team structure has worked really well, allowing employees to see the bigger picture by taking into account every perspective.

Marcos started experiencing the function of a Project Manager with this new project. For this to be a success, Quipu needed people to lead those multi-functional teams. Today, on top of his design function, Marcos has the responsibility of coordinating all the people in the team. For him, this means listening to everyone and trying to find out what the best solutions are.

The launching of this project is one of his best memories in Quipu. This is a complete change of the business model Quipu has had for the last 4 years. It was a very important moment because they worked a lot together.

“It felt like a real team effort, it feels great to have built something together.”

Another good memory he has in Quipu is the Oscar Party, which he helped prepare and presented. That night, he won the Oscar of “the most stylish person of the office”.

 

To sum up, Marcos chose the three following words to best describe Quipu: Young, Committed, and Brave.

If these 3 words match your job expectations, join our team!

 

 

 

Product Design Journey — From Terrassa to the Valley

Designer, Investor & Friend Marcos Medina tells us about his journey from a graphic design school to working at startups in Silicon Valley and now moving back to Barcelona.

Bernat Farrero, CEO at itnig and Jordi Romero, CEO at Factorial speak with Marcos Medina about his own personal story, how he grew as a Designer and his perspective on different startups and working life. Listen to our podcast on Youtube, iTunes or iVoox.

“Right out of the professional design school, a professor ‘hired’ me as I knew about Macromedia flash, at a small local company close to home at the beginning of 2000. 15 years ago that’s where I met Pau Ramon, CTO at Factorial, we worked on Websites in Flash — something that today is hard to imagine.”

Marcos then moves from Barcelona to Galicia for love and after having gained a few years of work experience, sets out to work freelance. Through Codegram and other clients, he gets to know Redbooth, at that point still called Teambox. “Teambox is a project management tool, a software to manage projects with your team, all working for the same goal. Instead of back and forth emails one team can use one workspace and organize their different contributions around a goal or task. All of the conversations where going on in a task — combining project management, action driven context with social parts of water cooler talk.“

“After three years at Redbooth, and a move back to Barcelona, I start not to feel as at ease as I felt at the beginning. We arrive at the point where the founder leaves, the team changes and I upload my CV by chance to bridge program, a program I found through Twitter. This is where Asana reaches out to me.”

Asana at that time was a direct competitor to Redbooth, funded in Silicon Valley, by one of the Facebook co-founders and another Product centered co-founder, himself ex Googler.

At the beginning I started the recruitment process out of curiosity, to see what they do in terms of design, what their team looks like but the thing got serious.

Learn more about his work at Asana, what the day to day was like and what he as a designer was set out to achieve: “Four years at Asana, starting out with a more fresh vision, with lots of information from the competitor which I could not reveal until the non-disclosure expired. Working at Asana was being part of a big family, lots of friendship, social life with employees. Healthy food, free yoga, a budget for each person to set up their ‘office’ — that was a new approach for me.”


Listen to our podcast to learn more about Marcos Medina’s journey and his perspective design and the difference on working in the Silicon Valley and in Barcelona. Learn more in this Podcast in Spanish on our Youtube channel, listen to it on iTunes or enjoy it through iVoox and subscribe to our newsletter to stay always up to date.

Learning the Design to Code process

Even if you’e not a designer and never used design software before, you can still release products that do the job and are well designed.

The following steps I’ll guide you through can be divided into three parts:

  • Planning
  • Designing
  • Coding

It’s far from a complete UX process, but it will allow you to take your own design and make it come alive.

1. Plan it

In your initial phase of planning you need to know your goal, and what you want to achieve with your project.

When you know for what purpose you’e building your app or your product for, you need to know who’s using it.

You should think of your audience in three different ways.

>Who: Demographics, age, gender, profession, etc.

>Where: In what setting they will use your product in.

>What: The kind of device they’re using your product on.

Take this information and let it influence your decision as you design.

The next step is to do at basic flowchart, in other words see how the user goes through your product, step by step, instead of just hard-coding it.

When you make a flowchart you avoid making mistakes that forces you to go back and do big changes. An example of a flowchart I’ve used in Quipu is pictured under to give you a rough idea, but if you want to dig into it — here’s a video explaining the process using Sketch.

It’s extremely important to have a thorough plan for whatever product you’re designing. It will save you time and effort for sure.

The last part of the planning, is to define a functional definition of each page in your product. It’s a document that will be your documentation or knowledge base about what each screen does, what it shows, and what routes and actions are possible to take from there.

So if you’re building an app, you should have a page with the following information for each interface:

Name of the view (or the module) –> The purpose of the page –> Full information –> Partial information –> List information –> Routes/actions.

If you did your flowchart correctly, the documentation will be heavily dependent on that Flow Chart.

2. Design it

The most important thing as a fresh designer or working on a project you’ve coded yourself, is to use established patterns.

There’s no reason to reinvent the wheel again.

A place where you can find questions and answers for most issues are ux.stackexchange.com. It’s similar to stackoverflow.com, just for design, and we know how important that is to most designers, so don’t be afraid to seek inspiration and help from more experienced people.

Then start on your wire-framing. Translate your flow and functional definition to a low-fidelity screen that contain everything but the design finish. In other words, focus on getting all the routes, actions, buttons and content right before making it look nice.

One of the most important thing of the design process, is to design it like you would code it. I recommend using Sketch, but use whatever software you’re comfortable with, like Illustrator or Photoshop.

Design as you would code it simply means using non-filled transparent containers to imitate containers and wrappers. Also use naming conventions for layers and groups just as you would use while coding your components.

The last thing I want to mention in terms of design, is to use Atomic Design principles which is a way of designing interfaces that extends to what we’ve been covering in the “Design as you would code it” part above.

It talks about structuring your design, and define it into atoms (colors, fonts, shapes) and form molecules by using them (buttons, inputs, lists etc..), to finally do organisms. An organism then becomes a template For example, A navigation bar that has a menu, a search bar and a logo (few molecules).

Foto: http://bradfrost.com/blog/post/atomic-web-design/

3. Code it

As a designer I will not teach code, most of you probably are more talented coders than I am, so I’ll just mention the software you should use to help you get all the CSS styles you will ever need.

Zeplin.io is a software that takes Sketch Designs, exports CSS styles and gives you all the sizes, margins, paddings, borders you need in order to translate your design to code and not loose the quality and level of detail you worked so hard on.

Zeplin.io is in my opinion the best way to translate design to code.

If you followed the atomic design, and designing as you would code it, then this process is simple, quick and with minimum errors.

I can honestly say that in Quipu where I do the design, this is the most time-saving tool I’ve ever come across. It drastically reduced both cost and time spent on getting the looks of our apps and website translated to all browsers.

Also read:

https://blog.itnig.net/why-ux-ui-designs-should-be-aimed-at-zombies-1968d72b0472


This post was written by media manager at itnig, Sindre Hopland, based on the presentation by lead designer at Quipu, Kamil Jura.