“UX/UI Designer’s Ideal Workflow | Crealeon 2022

If you are a designer, and at the next job interview you haven’t yet been asked to tell about your “Ideal process at the product creation stage”, then I hasten to make you happy – Everything is ahead of you 🙂

When I first started groping the web, and was just taking my first steps into UI, I had no idea what my “Ideal Process” was to answer, or what my “Ideal Process” was.

Maybe the ideal process is when Mr. Scrum Master came in, set you tasks, and you closed them in time:) I was describing the ideal process based on my current experience and didn’t understand how different stages of work could affect the quality of the product.

For example, if you have very little experience and work in a small studio as the only designer or you’re a freelancer with no experience in professional commercial development – what could be the ideal process for you? What’s important, and what you can turn a blind eye to and not remember until the time comes.

Over time, when you accumulate experience on combat projects, study more literature, communicate with colleagues on design, read articles, attend hackathons and conferences – you can already fine-tune your process to the task.

Yes, I want to say that there is no super universal rule, and not all stages are observed, and the customer does not have money, and the team is not well staffed, and business tasks are different now, etc. etc.

But I identified some of the steps for myself, which I use when designing almost any new product. Of course, each step can be supplemented, add more research, reserch to your taste, but the sequence of steps remains the same, for now. Maybe in the future the stages will really be reduced, and then we will be able to live through the experience of our user naturally, wearing glasses, and fully immersed in the virtual world of some Vasya Ivanov, who likes the color of the application to be pink (well, that’s what we think). Or everything will be done by big data analysts, and based on this information the product will be created, without any additional reserch.

So, in general, what is the purpose of consistency in design? I would give the analogy of kneading dough. There are many nuances that need to be done sequentially, without mixing up the processes, otherwise the dough won’t be suitable for our most beautiful and delicious sinabones. It’s the same with the steps of the job. You can’t draw a design and then look for users. Your work will be useless and will not satisfy the end user. Here I’ll talk about each stage and what the best research, frameworks, and methodologies are.

There is a belief among climbers that if you haven’t reached the summit by lunchtime, it’s time to think about turning back. As Everest climbing guide Ed Visturs pointed out, “Getting to the top is optional. Getting down is a must.” When you’re hundreds of feet above the ground and several kilometers from camp, you have to leave yourself plenty of daylight – otherwise you might get stuck where you hadn’t planned.

This is what, figuratively speaking, happened to Netflix in the fall of 2000. After the video rental chain Blockbuster refused to buy us, Netflix found itself in a world without people: we were no longer in mortal danger, but we weren’t out of the woods either. Unlike many companies our size (and bigger), we survived the dot-com crash. Our business model was good: the principle of “no repayment terms, no late fees” worked. People liked Cinematch’s movie recommendation algorithm. We were getting ready to reach half a million users by the end of 2001.

But our subscription model was very expensive. We were still bleeding money like blood, and the situation we were in was very different from the year before. Throwing away dollars in the same amount that had seemed normal the year before now seemed irresponsible. We needed to speed up the processes. We didn’t have to become profitable. But if we ever wanted to go public, the banks (and the investors they recommended our stock to) would have to see a path to profitability. If we were still in the cycle of raising $40 million annually and then posting $45 million in losses, we wouldn’t look like a good bet.

We knew that if we wanted to survive in a post-bubble world, we had to ruthlessly follow the Canadian Principle. At the end of 2000 and throughout 2001, we streamlined our processes. The “.com” prefix, which was a ticket to the free money world in 1999, has now become a curse – so we cut it out of the name. The “portal” idea, which had ruled the world (and the board) the year before, collapsed – so we put it away for a long time.

Step 1: Research

Filling in the Briff.
At the beginning of your journey, you’re in for some seemingly incomprehensible encounters. You’ll be bombarded with a flood of information, try to use a tape recorder so you don’t lose yourself in it. After the meeting analyze the recording, and identify the most important aspects.

Collecting data about the users
At this point you study all the information about the users. You find out what he is like, his pain points, make his portrait and empathy map. This is where the designer-designers plan what research will be used.

Both qualitative and quantitative surveys are good to use when creating user maps. Surveys, where you can gather demographic data using closed-ended questions. Open-ended questions to learn about underlying user concerns, observations, interviews, field research, competitive analysis.

Secondary methods are also used. These can be reviews of another product, or research publications on some problem you’re interested in. This is an inexpensive way to get data to lay the groundwork for your primary research.

To create empathy maps, you need to answer four questions: what the user says, thinks, does, and feels. You can read more about this framing in the Nielson and Norman Group article “Empathy Maps.”

I also have an in-depth article on Budgetary Research click here should be of interest.

Step 2: Portrait and tasking of the user

There is nothing complicated about creating a portrait of a user. From the collected data, we create a fictional character and give it the qualities and needs that emerged in the course of the resurvey. There are primary, secondary and tertiary users. The primary users are those for whom our product is aimed. For example: the buyer of pickles in the store. The secondary ones are less interested. These are the stores in which the pickles are sold. Tertiary – almost not interested. These are distributors, importers.

Now let’s deal with finding the problem. There’s a great 6 question methodology: who, what, where, when, why, and how?

Who: the character’s name and what they do;

What: you want to offer the user to solve their problems;

Where: is the user when using the product (this is about the physical context);

When: the problem occurs (maybe after a long interaction, maybe at the moment of use);

Why: and how the problem affects the user’s life;

How: users achieve their goals using the product.

With these answers, shape the problem by answering the questions:

Who is Arseny the manager.

What does he need? A quick search for reliable dog handlers for his dogs.

Why – he works a lot and doesn’t have time to take care of his dogs.

Step 3: Finding and generating ideas

At this stage we will use the technique of Design Thinking. You have to choose what you’re going to take to work, and to do this you have to collect all the insights that come in at the moment of reserch on the board. Design thinking uses the How Might We framework. This stimulates creativity and allows you to think about a problem from different angles. The technique helps create a wide range of solutions to a user problem. The idea tautologizes its meaning to us: we generate solutions to the problem. A detailed application of this framework is described in the Nielson and Norman Group article “How We Could”

To find solutions to problems for screen design or filter display, for block layout, and for many other issues, it’s great to use the Crazy Eights technique. Take a piece of paper and fold it into two pieces first, then four pieces, and eight pieces. Unfold it, and you have eight cells for your crazy ideas. Take 1 minute for each idea. After 8 minutes, you have eight crazy ideas, among which you might find something juicy. Check out this article on medium.

Don’t forget the competitive analysis. It’s generally a great way to assess all sides of your competitors and choose the most effective strategies. Check out this great article

Once you’ve collected all the artifacts on the board, take a vote and pick out the “best ideas” and then post them on the wall of ideas. And then you can start working out the details.

Step 4: Prototype and testing

Warframes
It is worth starting with working out a low-frequency prototype of Wireframing. Let me remind you that such a prototype can be drawn on paper, and it is not necessary to spend time on it working in some software. Sketch your ideas on a piece of paper and you can safely test your hypotheses on your colleagues or on real users.

At this stage, card sorting is well suited for testing. For example, if the architecture of your site is very complex, and you (let’s say) already have an understanding of how best to arrange the navigation, you still need to test the mental model of your user. Do your research with card sorting. Great article on my favorite site

User Flow.
If you’re developing a large, high-loaded service, be sure to spend time working through the user flow. This way you can figure out where the weak points are and what you need to improve or tweak. Terrific user experience is achieved by the user when she performs tasks in a natural way and without wasting time.

Navigation Scheme.
This is when the Navigational Framework or site architecture is created. If you work in a startup, more often than not, a designer does all of the steps described. Working at larger companies narrows your role, and designing the architecture will be done by a more narrowly focused specialist. Note that this is not the same as a user flow. User flow is a script that the user runs, and navigational architecture is focused on the user’s goals and cognitive load distribution. There are hierarchical, sequential and matrix structures read this great article if you haven’t already.

Prototype
Creating clickable prototypes as an opportunity to test hypotheses and understand how successful the user is. Before testing, you need to prepare a test scenario in advance and decide what functionality will be tested. There are many different ways to test a prototype. Lab testing in the lab (pardon the tautology) – in such testing often uses an eye tracker, tracking eye movement together with screen recording and surveillance cameras. The moderator supplements with her notes and directs the testing. Non-moderated remote testing – conducted without a moderator, in the user’s environment. The participant performs tasks in a natural way. Contextual interview – the method helps the team get information about the real experience. First, the user is asked questions about their experience with the product, then they observe how it works in their environment.

After testing, a similarity diagram is created. It helps you organize the data from the studies. Put participants’ quotes on post-its and sort them into groups. This helps you identify new and creative ways to solve the users’ problem.

Decide what test metrics you’ll use. How well the user handled the tasks, where mistakes occurred. Examine notes and surveys, and identify the most common errors to work with. There’s a handy SUS scale test. Participants rate 10 points from strongly agree to strongly disagree and a total score is calculated, you can read more about these metrics in this article

Step 5: Creating layouts and testing

After you’ve gotten valuable feedback, you’re ready to create a super-user-friendly product for your users. At this stage, UI/UX designers create stunningly beautiful interfaces. There is the creation of page designs, and the writing of component libraries. It’s worth remembering that you can’t ignore the laws of UX. Test your design for principles, heuristics, cognitive effects and gestalt. Earlier I wrote about this you can check out my series of articles, and additionally read Nielson and Norman Group’s article. And now you’re ready to give your awesome design a go. Don’t part with your layout after you’ve given it to development. Don’t leave your friend, because so many interesting things can happen without you being around.

And so you passed all the steps, your product went on sale, and what awaits you next? That’s right! The testing cycle starts again, identifying gaps and creating a better user experience. It’s a good idea to start keeping a CJM card in the moment after testing. It’s great for identifying user pains and little nuances that may have been overlooked. You’re tracking user emotions at every stage of interaction with the product, it helps you improve it every time you populate the CJM map with new data. Well, there’s also a link to a super article.

The development process isn’t over at this point, you’re always on the lookout for the best experience for your user because testing, metrics counting, and product improvement doesn’t end. As professionals, we strive to create the best experience for the customer, so don’t stop there, because technology is rapidly evolving with your product.