10 UI/UX Lessons for Designing a Product from Scratch

[[338502]]

In 2016, I realized something very important: I was not achieving my goals: learning new skills, meeting new people, keeping fit, etc. It wasn’t because I didn’t have the will and drive, it was because I didn’t follow through.

Peter Drucker once said, "You can manage by measuring." This motto later became my creed. I decided to quantify my goals, break them down into the most basic habits to execute, and achieve the ultimate goal by executing a certain amount every day.

At first, I would use a piece of grid paper to track my daily learning progress, fitness, and mental health. Then this habit continued for several years, my life gradually improved, and I developed the habit of breaking down each different goal and completing it step by step.

This behavior pattern and method has been verified in my own body. However, after years of tracking behavioral habits on paper, I decided to create a program with Wilson to upgrade this "habit tracking" tool. We first built a free Chrome plug-in Confetti, which is a tool that can help you track your daily habits. Every time you complete a task, a colorful confetti effect will appear, congratulating you for keeping the habit and achieving your goal.

In my more than four years of product design career, this is the first product I have completed from start to finish by myself. During this process, I have gained a lot of inspiration. In this article, I will share my insights and hope that they will be helpful to you as well.

1. Define product features from the beginning

At the beginning, Wilson and I decided to use 3 screens for the main functions and built a rough prototype. However, we did not have enough foresight to envision the final direction of our product and did not deeply polish all the ideas.

Finally, we took a step back. We went back and determined the release date of the minimum executable prototype and the real core features. We created a document on Notion and started to sort out and manage which features were "must haves" and which features were "nice to have". For example, login, registration, and new user guidance are essential features. However, we think "rearrange habits" is a feature that improves the experience but is not urgently needed.

Based on this, we started to focus on the core functions, make them as easy to use as possible, and strengthen the core features. By prioritizing the core functions and setting a release date, we can relieve our mental pressure and ensure that we will not be overwhelmed by a pile of features. This also gives us enough motivation to solve the core functions.

2. There are many processes and states that need to be handled

When designing products, I am often reminded to handle every edge case, fill every hole, and ensure a smooth experience. Building products from scratch is a double-edged sword: it is exciting to create a product based on your own ideas, but in return, I often need to solve problems outside of my comfort zone.

I have been working on product design at Skookum, and these jobs are usually carried out under certain constraints, but the product I am dealing with now is different. Previous products can use ready-made design systems, have a pre-built design language, have complete components, have clear UI states, and have a very clear infrastructure, but this time it is my own product, and all of these are missing. Moreover, this product may have several extreme situations, processes, and states.

For example, in the registration process, the button will have several states such as default, disabled, activated, filled, error, hover, etc., but in addition to these, I also need to consider the process and experience of password reset, which may involve 6 highly similar UI interface states:

• Enter Email
• Resend Email
• Email Notification Design
• Enter new password
• Error screen
• Success screen

During this process, there were many things that confused me for a while, which also led to my next point...

3. Create User Flow

After the project started, I quickly encountered organizational problems. Because I was building this product outside of work, I made a very serious mistake: I did not build the product according to the traditional product process, which subsequently led to a series of problems.

According to the standard product design process, I need to start with the user flow, define the process that users may perform, and make necessary summaries and explanations for the main process interfaces. Because this project is different from previous work, I forgot to follow the process at the beginning. I mistakenly regarded it as a simple project with several simple interfaces (does it sound familiar? Many so-called small projects fail from here). As a result, when I started to deal with the different states of many buttons and interface changes, the entire user flow became chaotic, and it was difficult for me to determine what the experience loopholes were.

Eventually I stopped this haphazard approach and created a complete user flow in Whimsical. It quickly became clear what was missing and where the entire interface flow was headed.

When you organize the interface according to the user flow, you can understand the screen status of the entire product. As the product grows and expands, the importance of the user flow will grow and become a crucial part.

4. Interactions should be fed back into the UI

It is true that you should not start adding animations to your project before you have completed the entire UI. However, not adding animations does not mean that you do not need to consider them. In fact, different micro-interactions and animations have a huge impact on the actual experience. When you are thinking about UI design, you should consider the use of micro-interactions and animations to avoid unnecessary modifications when the subsequent animations and interactions are implemented.

For example, when I was designing the experience of “achieving achievements”, I took into account the effects of micro-interactions that would be used, so when I was designing the UI, I could design it according to my own preferences, and temporarily write down the animations that might be used in a corner to avoid affecting the overall process and effect during the UI design stage. It would be much more convenient to add animations later.

I think it is very important to consider UI and interaction together, because both together shape the experience. If you add animation directly to the UI design process, it will make the whole design process complicated and bloated.

5. Get feedback early

This was actually a big mistake I made on this project: waiting too long to get feedback.

I usually only worked on this project when I got home at night and on weekends, and for a long time I didn't really tell anyone.

When I finally announced the product to my family, friends, users, and early adopters online, they began to notice many obvious problems in the details that I had not noticed. I realized that as a product designer, it is easy for me to get caught up in and indulge in a relatively isolated part of the user experience, and ignore many obvious problems.

Looking back, if I had shown the design and prototype to users and friends sooner, I would have discovered problems earlier and entered the development stage after getting feedback, which would have made up a lot of losses.

6. It’s important to get inspiration from other places

Many designers think that all ideas must be original, otherwise they are fraudulent. But if you think about it, there are actually very few completely original ideas. When you see an excellent product, its excellent color matching and just the right interaction may make you think: "Someone has already made it, and my idea is completely incomparable to it."

This way of thinking is actually deeply flawed and inhibits your creativity.

When I find that my design has flaws, I will do my best to search and learn more about existing designs on the Internet. I will observe and think about how other companies and products design new user guidance processes and how to manage user personal information. I have never copied other people's experience, but I will study the excellent details created by others from time to time, and then learn from these details in my design.

One of my favorite examples is the spin exit effect from a modal state. I came across this effect on a website so I decided to add it to Confetti and I also added a similar effect to the button on the landing page.

In fact, all designs are created by mixing and matching. Borrowing details does not mean plagiarism. Don’t be afraid to discover and learn from others’ strengths and highlights. You should learn to organically disassemble and borrow, and flexibly apply them to your own designs. It is as interesting as mixing a cocktail.

7. Be brave to face the change of identity

When we started designing the product, Wilson and I kept changing our roles. We were UI designers, responsible for UX, interaction, animation, graphic design, marketing, product management, and other roles.

With so many responsibilities, we inevitably encounter new problems that are beyond our capabilities. We must admit that we are in trouble and seek external help.

It is reasonable to focus on your own professional areas and seek external help for other non-specialized aspects. For example, in a project, it is normal for one artist to be responsible for most of the landscape illustrations and another artist to complete the portrait part.

I hope that the appearance and functionality of the product can maintain a high degree of consistency, and I did it. But don’t get me wrong, it’s not that I don’t dare to step out of my comfort zone to learn code development, but in such a project, I am not suitable for extending from the UI and UX fields. After all, completing the development of the project has a higher priority than learning code.

8. Keeping it simple is more important

Although scheduling the release of the MVP can prevent the project from being overwhelmed by infinite features and workload, it still cannot prevent us from making improvements based on existing features.

A lot of people like Reid Hoffman’s quote: “If you’re not embarrassed about version 1, you’ve released it too late.” Well, our first release wasn’t embarrassing, but it was better than spending months refining it.

Before launching a new product, we must consider 2 questions:

• Do we believe that the products we build can bring value to users?
• Are we doing our best?

These questions allowed us to ultimately meet our goals and release on time without distractions, focusing on delivering the most core functionality instead of being overwhelmed by a bunch of redundant, minor features.

9. Good handover saves time and effort

From the beginning of the project, I have been managing the project and organizing the design materials for later development. However, since I used a collaborative tool like Zeplin from the beginning, I was able to easily hand over all the materials to Wilson, who is responsible for development. As a design system tool, Zeplin allows me to avoid wasting time categorizing materials, which is very convenient.

During the handover process, I also made some optimizations:

• All interfaces were organized in Zeplin and processed
• I have named all the artboards for easy retrieval.
• I marked the assets that need to be exported in XD
• I keep archives of old interfaces and make sure the new interfaces delivered are up to date.

10. Write all your UX copy at once

When designing the UI, the copywriting part of the interface was written temporarily, which resulted in the overall copywriting being inconsistent and uncoordinated after the design was completed.

I really wish I had created a separate document from the beginning and rewritten all the copywriting at once, including reminders, notes, labels, pop-up box reminders, etc. In fact, my copywriting was written along with the UI design, resulting in a serious lack of overall consistency.

The lack of tonality in this type of copywriting results in a mixed tone and wording for the entire product, with poor consistency.

Therefore, after the product was launched, we have been tinkering with the copywriting.

Conclusion

I believe that if many errors are not solved or corrected early, the potential of the final product cannot be fully realized. As Giacomo Casanova said: "A person who does not make mistakes also does not accomplish anything."

So we need to learn from our mistakes and hope that you don’t fall into the same dilemma as I did in your design project.