An easy way to present your UX solutions to a potential client

    This article is an example of comprehension and presentation of some working points from the practice of UX designer. There was an understanding that in solving certain problems I use a certain approach to the development of interface screens, which is already quite “settled down” and is used by me regularly. The approach is simple and clear! And most importantly, he effectively presents my ideas to a potential client ...



    By the way, if you use Figma , I recommend paying attention to our ready-made design systems . They help freelancers complete more orders per month, programmers are allowed to create beautiful applications on their own, and team leads “sprint” sprints faster using ready-made design systems for team work.

    And if you have a serious project, our team is ready to deploy a design system within the organization based on our best practices and tailor it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken


    Somewhere from the middle of 2016, my articles began to slowly return my investments (exactly how, I will describe in the planned digest post, which will be dedicated to the first anniversary of my stay in Habré). I was contacted by the owners of a wide variety of products with a wide variety of problems. Interesting questions and suggestions began to sound and interesting tasks appeared. There are a lot of interesting cases that have accumulated, but right now it’s impossible to talk about many of them: either the NDA interferes, or you need to wait N months for development in order to read about the case and get the user experience. I am sure that whenever we clapped hands with a client, it was precisely my way of demonstrating my willingness to solve his tasks that contributed to this. Well, or at least he added me a better chance of success.

    I would like to talk about this method below ...

    First, briefly and in my own words once again about the difference between the UI and UX:

    First (UI) is always one or several pictures with an interface design that do not reflect the difference in state. For example, a product card layout in a basket. Or another dashboard, which is already a bit dull. The second (UX) is a series of frames, scrolling through which, the user’s path from the beginning of the script to the end is visible. As a rule, such a series has a single “foundation”, but certain states, the arrangement of elements, their color, style change from frame to frame.

    I will try to open the topic of this post on one case from my daily practice. I did a product redesign that is responsible for the interaction of the business and its customers. Everything revolves around a business chat with a client with a bunch of features that increase efficiency. I can’t disclose all the details, but I’ll tell you how one of the tasks performed, based on your approach. It already turns out that this method is applicable both within the first steps and in the stage of deep elaboration of product screens.

    The task was this: it was necessary to refine the current interface so that it became possible to distribute chats into folders.

    What do we have at the start? Functional correspondence (chats); subfolders over which chats are scattered. You need to come up with elegant and simple logic to remake everything that has been done “to” to a minimum.

    By the way, this is a classic situation and one of the most interesting types of tasks in the spirit of “Oh, like everything has already been developed, but we remembered that we forgot something!” Or when a product is overgrown with features and functionality, and somehow it is necessary to wedge it into ready-made screens. However, there is no problem if you build the interface design according to your specific rules. In such cases, you can always “push” something and the new functionality will fit harmoniously and without user pain.

    So ... How, interacting remotely, as accurately as possible to convey your decision to the client or show why you should entrust the development to you and not to others? For starters, we need something like a plan for this specific task! How to find him? If you include the imagination, then ready-made solutions may be nearby. Let's remember how and in which applications we move content or some entities. I immediately asked for an email client. There we highlight one letter or several. We can delete or move to a folder. It seems to fit!



    Now you can estimate the user script. Schematically, on the fingers, with a pen in a notebook - any option is suitable. By the way, I want to note that handwriting will always have one important advantage: the quality of systematization of thoughts improves.

    We outline our starting point: we are in the chat, we see the binding to the contact, we see that this chat is in some kind of folder. So, our approximate handwritten plan for the current task:

    • you need to switch to the “chat moving mode” in order not to produce unnecessary functionality and not clog the screen.
    • it is necessary to think over what criteria to select contacts for moving
    • you need to set the sequence of the script to move the user along the desired path
    • you need to organize the selection of the folder to move, given that there may be 10 and 20, and possibly more
    • it is necessary to tell the user “exhale, everything ended well!”

    Already groped something! There is a plan ... Now let's calculate it. There are at least 5 frames of various interface states. Perhaps there will be a need for intermediate states. The zero frame should be considered the starting state of the screen at the beginning of the script. It turns out already 6. It is time to build the optimal user experience frame by frame. Sorry for the blur, but this is the NDA, which means you have to smear the pictures. Let's finally get to my design:

    Frame 0


    “Starting state”




    We are chatting now. There are all the elements that I mentioned above. In the block with contacts there is a folder icon and arrows. This will be our switch to the mode of moving chats. We click and get into ....

    Frame 1


    “Travel Mode”




    We see the phenomenon of new controls. Avatars became round checkboxes! So you can choose. It seems to me that this is an elegant solution, so as not to produce extra checkboxes and not to think about how to shove what is impossible in the block. Select on top is lit, and the rest of the controls are inactive. So there will be a quest on how to activate them. Click on and call ...

    Frame 2


    “Popup of Opportunities”




    The client did not ask about this, but I myself make a “margin” of functionality. You never know what a complex sample is required. For example, there are a lot of unread in the folder and you need to sort the selection by them. Or corny mass select, so as not to click through every check-box. By the way, hey, LinkedIn, can you take a look at this post? After the notifications about adding a contact to the PM began to be duplicated in it - that's all, consider that the PM is no longer there. The necessary correspondence is lost in this garbage. LinkedIn is in no hurry to implement “select only unread”. Sorry to be distracted. So, with care we gave users the opportunity of different choices. In our scenario, let him now click and execute ...

    Frame 3


    “Mass-select”




    The user thus selects all the few contacts. Notice how the upper controls were activated? The little quest mentioned above has been successfully completed! Then he clicks on the bottom contact and ...

    Frame 4


    “Delect”




    It will de-select it by showing us the “magic” of turning back the checkbox into an avatar. Rather say in the avatar stub, because the user has not yet added his photo. The next click is done on the “Move” element and ...

    Frame 5


    “Select Folders”




    We see a popup with a list of folders. It remains to choose any one where we want to move all the dialogs. It remains to show a frame where we tell the user that ...

    Frame 6


    “Success, old fellow!”




    Everything went well! The number of elements was reduced, the successful user experience was confirmed by writing “Done!”. Taking care of it, we leave the opportunity to make undo. What if miss-click happened and conversations “flew” to the wrong folder? To be safe does not hurt. Let the popup fade away after a couple of seconds.

    Frame 7


    “Return the state”




    This is just for completeness. We return the state when the chats are moved, the popup has disappeared, and the move mode has turned off.

    The script is completed. What's next?


    Now it remains to solve the question of how to demonstrate the solution to the client. Nowadays enough software has already bred to build an imitation of an interface from a storyboard. This allows you to do Axure, Invisionapp, Pixate, etc. ... However, firstly: you need to master any of these programs and spend time; and secondly: not the fact that it is worth it, because our task is not so global. I see two simple options here:

    First . Collect all frames in a simple GIF-animation and rotate in a circle. There are plenty of tools for this and Photoshop is doing just fine. The only drawback is the “callousness" of the animation. Plus is the speed of creation and presentation. Here's what happened:



    Second. A little more sophisticated and will require a little more time to implement. However, it simulates a real interface by almost 100%. The bottom line is that a video is recorded from the screen in which all of the above frames are switched one after another, and the mouse is simulated by activity. The downside is that you need some dexterity and rehearsal for synchronous frame switching. Plus - it is almost impossible to distinguish from a working product:


    That's all. A paragraph of text to the letter as a description. Attach files, links, videos, etc. ... Well, if the client first sees the animation. Then, if he wants, he can go through the frames and make out the details. This is often not superfluous.

    I usually also adhere to a few points that, it seems to me, increase the chances of a successful completion of a task:

    Expanded User Script


    I try to maximize the deployment of the user script in a separate task. The plan here helps a lot. In my example, I started with mass select, and then unselected from the bottom contact. And he could stupidly call them one by one from top to bottom ...

    Broad thinking equals use-features


    The ability to think widely allows you to find and develop "chips", which the client did not suspect. I try to put myself in the place of the user - this helps me find use-features and improve functionality. You may sometimes ask yourself, “What else can the user need here?”.

    Compliance with your interface rules


    I continue to subordinate all new “chips” to the rules and guidelines of the interface with which each new development begins. Interface rules - this is what I describe in the documentation at the final stage of the project (styles, fonts, indents, colors, behavior and response of elements, etc.). Thus, any of your new use-features will look more integrated with the product. Most likely the client will approve her!

    Perhaps now everything is for sure. I wish you to be on the same wavelength as your customers. Do a little more than what is required of you in a specific task and this will make you closer to success ...

    Also popular now: