Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "UI/UX inspiration for designing products from scratch". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In 2016, I realized a very important problem: I have never achieved my goals: learning new skills, making new friends, maintaining physical and mental health, and so on. It's not because I don't have the will and motivation, but because I don't stick to it.

Peter Drucker said: "quantification can be managed." "this motto later became my creed. I decided to quantify my goal, break it down into the most basic habits to implement, and implement a certain amount of it every day to achieve the ultimate goal.

At first, I will use a piece of grid paper to track my daily study progress, fitness and mental health. Then this habit lasted for several years, life gradually improved, and formed the habit of breaking down and accomplishing each different goal step by step.

This pattern of behavior and method has been tested on myself. But after years of sticking to tracking habits on paper, I decided to work with Wilson to create a program to upgrade this "habit tracking" tool. We first built a free Chrome plugin Confetti, a tool that can help you track your daily habits. Every time you complete a task, colorful confetti effects appear. Congratulations on keeping your habits and achieving your goals.

1. Define the characteristics of the product from the very beginning

From the beginning, Wilson and I decided to use the main features of the three screens and built a rough prototype. However, we do not have enough foresight to imagine the final direction of our products, nor do we polish all our ideas in depth.

In the end, we took a step back. We went back and determined the release date of the minimum executable prototype and the real core functionality. We created a document on Notion and began to sort out and manage which features were "essential" and which "would be better if we had them." For example, login, registration, and new user guidance are essential functions. However, we believe that "rearranging habits" is a feature that enhances the experience but is not much needed.

Based on this, we began to grasp the core functions and make them as easy to use as possible to enhance the core features. By prioritizing core functions and setting release dates, we can relieve our mental stress and make sure that we are not overwhelmed by piles of features. Similarly, we have enough motivation to solve the core functions.

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

When designing products, I am often reminded to deal with every marginal situation and fill in every hole to ensure a smooth experience. Building a product from scratch is a double-edged sword: it's exciting to create a product based on your own ideas, but accordingly, I often need to deal with problems outside my comfort zone.

I've been working on product design at Skookum, and this work is usually done under certain constraints, but now I'm dealing with a different product. Previous products can rely on off-the-shelf design systems, with long-established design languages, complete components, clear UI status, and a very clear infrastructure, but this time it is my own product, all of which do not exist. Moreover, there may be several extreme situations, processes, and states of the product.

For example, in the registration process, buttons have default, disable, activate, populate, error, hover, and so on, but in addition to these, I also need to consider processes and experiences such as password reset, which may involve six highly similar UI interface states:

Enter Email

Resend Email

Email Notification Design

Enter a new password

Error interface

Successful interface

In the process, there were a lot of things that puzzled me for a time, which led to my next point.

3. Create a user process

Soon after the project started, I encountered organizational problems. Because I created this product after work, I made a very serious mistake: I didn't follow the traditional product process, which led to a series of problems.

According to the standard product design process, I need to start with the user process, define the process that the user may execute, and make the necessary summary for the main process interface. Because this project is different from my previous work, I forgot to follow the process at the beginning, and I mistook it as a simple project with several simple interfaces (does it sound familiar? Many so-called small projects roll over from here. As a result, when I started to deal with the different states and interface changes of many buttons, the whole user process became chaotic, and it was difficult for me to identify the experience vulnerabilities.

Eventually I stopped this casual design and created a complete user process in Whimsical. So I quickly realized that those links were missing and the direction of the whole interface process.

When combing the interface according to the user process, we can have some understanding of the screen status of the whole product, and with the development and expansion of the product, the importance of the user process will grow and become a vital part.

4. The interaction should be fed back to UI

Indeed, you should not start adding animation to the project until you have completed the entire UI. However, not adding doesn't mean you don't have to think about it. In fact, different micro-interactions and animations have a great impact on the actual experience. When you are thinking about UI design, you should consider the use of micro-interactions and animation to avoid unnecessary modifications when subsequent dynamic effects and interactions land.

For example, when I am designing the experience of "achieving achievement", I take into account the effects of micro-interactions that I need to use, so when I design UI, I can design it according to my own preferences, and drag the dynamic effects that may be used to a corner to write it down temporarily, so as to avoid affecting the overall process and effect in the stage of designing UI. And the subsequent addition of dynamic effects, it will be much more convenient.

I think it's important to combine UI and interaction, because the two together shape the experience. If you directly add dynamic effects to the design of UI, it will make the whole design process complicated and bloated.

5. get feedback as soon as possible

In fact, this is also a big mistake I made in this project: I waited too long to get feedback.

I usually go home in the evening and on weekends before I have time to promote this project, and for a long time, I didn't really tell anyone.

When I finally announced the product with my family, friends, users and online tasty users, they began to notice a lot of obvious details that I didn't find in the process of using it. I realized that as a product designer, it was easy for me to get caught up in and indulge in an isolated part of the user experience, but ignored a lot of significant problems.

In retrospect, if I could show designs and prototypes to users and friends as soon as possible, I would have found problems earlier and entered the development phase only after getting feedback, making up for a lot of losses.

6. It is important to get inspiration elsewhere

Many designers will think that all ideas must be original, otherwise it is fraud. But think about it a little bit, in fact, thorough originality is actually very few. When you see an excellent product, its excellent color matching and the right interaction may make you think, "someone has already made it, and my idea is completely incomparable in front of it." "

This way of thinking actually has great flaws and suppresses your creativity.

When I find that my design is flawed, I will try my best to search and learn more about the existing designs on the Internet. I will observe and think about how other companies and products design new user-led processes and manage users' personal information. I have never copied the experience of being human, but I will delve into the excellent details created by others every now and then, and then draw lessons from these details into my design.

One of my favorite examples is the effect of rotating exit from the modal state. This is what I happened to see on a website, so I decided to add it to Confetti, and I added a similar special effect to the button on the landing page.

In fact, all designs are created by mashup. Learning from details does not mean plagiarism. Don't be afraid to discover and learn other people's strengths and highlights. You should learn to disassemble and learn from them organically and apply them flexibly to your own design. It is as interesting as making cocktails.

7. Face the change of identity bravely

When we started to design the product, the identity of Wilson and I changed all the time. We are UI designers, responsible for UX, interaction, dynamic effects, graphic design, marketing, product management, and other roles.

There are so many responsibilities that we inevitably encounter new problems beyond our capabilities. We must admit that we are in trouble and that seeking outside help has become a necessary choice.

It is reasonable to focus on your area of expertise and seek outside help from other unprofessional aspects. For example, in one project, one artist is responsible for most of the landscape illustrations, while another artist completes the portrait part, which is normal.

I want the appearance and function of the product to be highly consistent, and I do. But don't get me wrong, it's not that I'm afraid to go out of my comfort zone to learn code development, but in such a project, I'm not fit to extend beyond UI and UX. After all, completing a project has a higher priority than learning code.

It's more important to keep it simple.

Although the release time has been scheduled for MVP to prevent the project from being overwhelmed by infinitely expanding features and workload, it still does not prevent us from making improvements based on existing features.

Many people like the saying of Reid Hoffman: "if you are not embarrassed about the first version of the product, you must be late for release." "however, our official release of the first version of the product will not be too embarrassing, but for now, the simple and intuitive state at that time is better than spending months polishing it over and over again before releasing it.

Before launching a new product, we must consider two issues:

Do we believe that the products we build can bring value to our users?

Are we doing our best?

These questions enable us to finally achieve our goals and release them on time to avoid distractions. Focus on delivering the core functions, rather than being overwhelmed by a bunch of redundant secondary features.

Good handover is more convenient and time-saving.

From the beginning of the project, I have been doing project management and organizing design materials for later development. However, since I used collaborative tools like Zeplin from the beginning, it ensured that I could easily hand over all my material to the Wilson in charge of development. As a design system tool, Zeplin makes it very convenient for me not to waste time classifying materials.

During the transition, I also made some optimizations:

All the interfaces are organized into Zeplin and processed.

I named all the drawing boards specifically for easy retrieval.

I marked the material I need to export in XD.

I keep the old interface archived and make sure that the new version of the interface delivered is up to date

10. Write down all the UX copywriting at one time

When designing a UI, the copywriting part of the interface is written temporarily, which makes the overall copywriting inconsistent and inconsistent after the completion of a design.

I wish I had created a separate document from the beginning, rewriting all the copy parts at once, including reminders, comments, tags, pop-up reminders, and so on. In fact, my copywriters are written along with the design of UI, resulting in a serious lack of overall consistency.

This kind of copy itself is lack of tonality, which leads to the mixed tone and use of words of the whole product, and the consistency is very poor.

Therefore, after the launch of the product, we have been tinkering with the copywriting.

This is the end of the content of "UI/UX inspiration for designing products from scratch". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.