It is not just a form, but a product, a business, a technology.

10 lessons learned from accelerating myself at Whitespace in 3 months

Whitespace is a selective design program connecting designers with rising tech startups in Silicon Valley. I was lucky enough to be selected as a product design fellow this session. What an incredible and intense experience! My paired startup is also Whitespace, and yes, I was working on a product that make Whitespace into a better matchmaker for designers and startups.

It is not just a form, but a product, a business, a technology.

Visually, the final design is just a form. It is not just a form, but a product, a business, a technology. There is an “aha” moment when I deeply realized “The simplest is the most complicated”. I would like to share 10 lessons I learned along with my process designing an application form.

The Application Form

Note: The application form is for Applicants. For Startups, there is a Designer Profile as the visual output, and a dashboard as a review platform.

1. Never start to work without constraints.

You even cannot find the real problem without constraints.

The first day at Whitespace, we had a project kickoff meeting. “This is what we have…”

Whitespace Marketing Website + Application Form (current)

“… we want… we will have… ” Basically, Whitespace aims to be a better matchmaker — to create a better experience for all — designers, startups and Whitespace. We came up with new product ideas targeting designers who have more experience (Whitespace talent), startups (startup dashboard and designer profile), and Whitespace (Whitespace admin), besides the Design Fellows Program which we currently have.

At the very first, I tried to design for the whole system. I thought they are all related and I should/can take all into considerations. I was wrong — trying to design an ideal experience for all is good but unrealistic.

“Design depends largely on constraints.” — Charles Eames

Time is one of the biggest constraints, in early December, we want to open the new application for Spring 2016. Also, we don’t have the business capability for Whitespace talent. Constraints largely help prioritize the problems, so that we can solve the right problem and ship the right product timely.

2. Find the right problems at the moment

You cannot solve all problems at once.

What’s the problem that we are able to solve with the resources we have during this time period?

What’s the most urgent problem or what’s the key problem (since problems are related at the most time)?

Prioritize, scale, and focus, while always keep others in mind, gradually solve problems one by one. We decided to focus on the Design Fellows Program, specifically, the Application Form.

3. Think in the system

Everything interacts within the system, nothing can be standalone.

I roughly created two diagrams: 1) All the key activities that would happen in the match process; 2) Interactions (Whitespace <-> Applicants, Whitespace <-> Startups, and Applicants <-> Startups) and their touch points either digital or physical. Actually, we do have it in our mind, while, it is very helpful to draw it out, keep it in mind whenever and whatever problem we are solving.

Very rough diagram but it helps

Always think in the system, it can not only benefit the user experience, but also the brand awareness and business opportunities.

4. Just enough research

Don’t do more, be smart.

The goal of research is to understand the problem and figure out user needs. There is no standard or must-do research. Just enough research is good enough, whatever research, as long as it is enough for us to achieve our goals — enough and efficient.

For this project, we didn’t do many user interviews with startup founder/CEOs and designers. Since Deny (the Founder of Whitespace) has been a matchmaker connecting designers and startups for quite a while, he already has lots of invaluable insights. And, there is plenty of great secondary research out there — like, VCs or some top designers sharing about an ideal startup designer, how to hire the first designer etc. On the other hand, it is also a problem that sometimes startups, they even don’t know what they want and how to do it. For understanding designers’ needs, we were lucky to have a group of design fellows and be able to get instant feedback from them each week. Competitive analysis is another efficient research method.

5. Don’t look for methods, just do it.

Make full use of what you have around you

I don’t know how to call this, even don’t know what exactly I am doing. I just wanted to draw out the thinking in my mind, to analyze this specific problem, to help me explain my idea to others…

There are tons of research methods, there are no perfect ones. It is essential to learn great methods and best practices, especially if you haven’t tried any at the very beginning. But once you have used a lot of them either methods or tools or frameworks, you would realize that somehow they are all related, somehow each is a mixture of some basics. Be clear about “why you want to do this” (assumptions) is more important than “this” (tools).

When I was trying to find out a way to help the content discussion, I saw those small post-its near me — “Ding!” Instead of writing questions on whiteboards or Google doc, where we only can erase, delete, and change orders, we can move the questions anywhere, create more questions or categories, take some questions aside etc. It is a mixture of card sorting, affinity diagrams and maybe others.

Something for content discussion

I also drew two weird diagrams to help analyze and make some decisions of the application form — “If the decision is… then it will be…” “If it is… we have to make x, y and z decisions…”.

Somewhat use cases and user flows

Those unnamed diagrams also largely facilitate the communication and collaboration. Sometimes, it is really hard to output such complicated thoughts verbally.

6. Mockup the real interface early.

User flow helps you think, real interface helps you rethink.

Undoubtedly, it is important to figure out the information architecture and user flow before jumping onto the interface.

At first, we tried hard to wire up a “perfect” user flow of the application. While there were some design decisions very hard to make. We put it aside and started to mock up the application form with uncertainties. Surprisingly, it became clear, and we knew more about what other decisions we have to make.

Different user flows created during the process

On the other hand, it is quite efficient or even necessary to present mockups instead of flows to get feedback from the outside. Chances are that you may miss some details without mocking up the real interface, which might affect the user flow.

Creating information architecture or user flow is important, while please don’t take it as final and rely too much on it. It is also an iterative process, there is a lot of back and forth. Mock up the real interface early will help to rethink, evaluate and clarify the flow.

Various versions of mockups

7. Always design in the experience.

Design the experience, not screens.

The same as think in the system that nothing can be standalone, we cannot design standalone screens. Even you only want to express your ideas and get feedbacks for one screen, it is helpful to wire up the screen with the “Before” and “After”.

Also, try to prototype within the experience/flow, which is very helpful for communication. Prototype tools are your best friends :)

8. There is no best practice.

“Because XXX did this…” Please don’t say that.

Best Web Design Practice, Mobile UI Trend in 2015, Best Material Design…

One thing we always do when designing is to search “best practices” or “trends”. Yes, it is definitely important to learn from great designs. But, there is no “best practice”. Each design is trying to solve a specific problem, even the UI is almost the same from outside, the “Why” behind the screens may vary.

Always ask “Why”. Why is it a great design? More specifically, why is it a good solution for that specific problem? Even, is it really the best approach? What works well and what are the potential improvements?

If you are solving the same or a similar problem: What are the similarities and difference between the problem we want to solve and the one they are targeting? How can we apply this best practice to solve the problem we have? Beside of this, is there any better solutions, maybe solutions that are not even existed?

Try hard to understand the “Why” behind the “Best”, please don’t say “Because Google, Facebook, Apple, Uber, Airbnb… did this…”. Yes, it is possible that sometimes we cannot find an ideal solution, we will look into solutions that users are willing to accept, which is also a reason.

When we were working on the “account creation”, when to introduce/ask user to create an account became a question. Let user experience the product first, show them the value and benefits, and then give them the option to create an account — it is a common design pattern. We also noticed some competitors (like Bridge) are doing this — “Oh, see, XXX is also doing that!”.

Back and forth, we finally changed the decision — accounting for business goals and current technical constraints and our unique user goals, we decided to “Create an account first”.

Account Creation in the end V.S. at the first step

As everything happens for a reason, every design should have a decent reason, the reason that supporting the product’s user goals, business goals and technology goals.

9. Dig into the psychological mind behind the actions.

Embrace human nature, it’s complicated.

From psychology and HCI backgrounds, I tend to think users’ intentions, emotions and motivations behind an action, which is important and helpful for us designers to make decisions on what intentions we want to deliver to users.

When we back and forth on the decision — a long application form a short form with several steps (these two solutions are being used almost 1:1 in similar application forms).

We heard from previous applicants that they wanted to look through all the questions first, trying to figure out which ones to answer first and which ones needed more time. On the design, we can make it visually simple not intimidating. Also, we thought applicants should have high motivation as we really care about the “attitude”, who will not be scared by the long form. That was why we decided to go for a long form.

While during the design critique, we got feedbacks from designers. There was an “A-ha” moment — stuck or scared by the long form doesn’t mean they have low motivation (maybe they don’t know the program well), even their motivation is low at that time, doesn’t mean the motivation cannot be elevated.

We decided to go for “short form”, divided the form into three steps — from the simplest questions to the hardest. In that way, for applicants, they will be able to fill out the form much easier while given enough time work on the hard questions. For Whitespace, we will be able to capture applicant’s information as much and as soon as possible. We also would have the opportunity to encourage them to complete the application if they are stuck at any point — for business, we want to attract more talented designers, for users, definitely, we can help designers and startups find right fit better.

10. Make engineer's life easier, make your life easier.

Do it smart, not do more.

The key of any work is not to do MORE, but do it SMART. Make full use of the resources, tools and talent minds you can get, combine all of those — do it smart. For designers, the collaboration with engineers is extremely important to realize the design and ship a successful product.

Offer better help

When crafting micro-interactions for the application form, like, the input interaction and add a project interaction, instead of designing by hand, we looked into open source practices with our need in mind. Deliver mockups with ready-to-go code to make engineer’s life easier, and also our own life easier :)

Mockups with ready-to-go code

Trying to innovate and come up with something new is a very good attitude. But the goal is to solve the problem under constraints (time, money, technology, business etc.). If just trying to be innovative but ignoring those existing solutions, is somewhat a little stupid. Not to say that the fact is NOTHING IS ORIGINAL.

Build better empathy

It has been a pretty hot debate recently — whether designers should learn to code or even code. For me, this debate is a waste of time. In my view, learning the engineering thinking is very beneficial. Learning how things being built, how engineers’ mind works, so we can have better empathy with them, speak the same language, express our ideas more efficiently and deal with collaboration problems easier.

And, but — Figuring out your goals, and do whatever that can accomplish that goal — if there is no other ways, if you have to learn to code or even code yourself, do it; if you don’t like to do it or cannot do it, go somewhere else, or do something else.

All in all, for a better collaboration, for a better product, for a better life, and a better person.

People don’t buy products, they buy better versions of themselves. — Samuel Hulick

Huge thanks to Whitespace (check out the new website and application!), to Deny, Chetana and Vivian, to all the speakers and design fellows. I learned so much during this 3 months. I became not only a better designer but more a better person.

Challenges continue!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.