A step-by-Step user Experience Design

I've done two response web design translations, including what is a responsive web design? How should it be done? , as well as responsive web design via CSS3 Media query; Let's have a little retreat today for a change of taste. Based on the leader of a user experience design team, the author briefly introduces how UX design related work is carried out from scratch within the company. There is no unrealistic principle, there is no technical details of the explanation, throughout more like the author of the work of the typical stage of the review and summary, including team formation, ideas and influence training, departmental collaboration, project intervention methods. Nonsense not much to say, walked.

Most of the time, new ways and means are not easily put into practice. In particular, when old habits are entrenched, every stage of the process seems like a novelty to the participants. Not everyone likes fresh things, but as the executor of the exact goal, we must learn new ways of thinking and practice, and carry it out into the practical work.

In this article, I (English original author) will take the company website The revision project as the thought outline, carries on the work retrospective summary, and analyzes our team is how in the entire revision process step-by-Step implementation user experience design idea. The following illustration shows a significant change between the two versions before and after the revision.

UX design Team (UED) established at the beginning

Recently, I was hired by a major French E-commerce website to form a user experience design team. Before I went to work, the UX team here was basically a good but loosely organized project committee, consisting of a project manager, a functional and technical specification writer, and a freelance graphic designer who claimed to be a human-machine engineering expert. When the Committee is unable to agree on a final design, they will vote; the usual result is that they accept a plan to accept each other, because at the end of the polling period, the rest of the development cycle does not allow them to make any changes or iterations. Essentially, the UX team has no real process planning for so-called "user-centric design (ucd,user-centered desgin)" or interactive testing.

The concept of the "user experience" applies everywhere, but to make this concept attractive and influential enough to form such a respectable department within an organization or company, you first have to solve a basket of problems. Regardless of whether there is a true sense of management role in the team, user experience design related work in fact has been in the entire organization, but in the implementation of the way and focus on whether there will be a big difference. Building a UX team, setting the spirit and goals as the focus of the team's core value-a slow and robust process, we can't hope that all the problems can be solved overnight.

However, many people hope that the officially formed UX team can bring answers to the questions that have plagued them for a long time. In fact, "User experience Design" is not used to get answers, it should provide recommendations for the choice of how the project is executed, or create a schema for a better design development process. So, at first, I did a lot of "listening" work to get to know all the questions and opinions-like attending some project reviews or interacting with designers. One of the things I need to be aware of in these listening and communication processes is that in the actual process of the project, what roles have the final decision-making power over the design plan. I also need to understand the target market, understand the potential factors that make the right solution economically feasible, and in the middle of the project, I have to work with relevant teams such as it and software architecture.

After listening and communicating, I can write my own "script": I have further in-depth communication with the upstream and downstream teams that work closely with the UX team, especially the product and front-end developers, and after understanding their actual roles and roles in the project, I started digging people from inside the company ... I recruited a man-machine engineering consultant specializing in eye tracking and other usability studies; A trainee with standardized UI design practices from the marketing department. With these talents, our UX team is starting to get people's attention; we have received more and more research requirements on improving the user experience of products, and have begun to step through the internal design process of intensive specification.

Three functional elements: information architecture, human-machine engineering, visual design

For E-commerce sites, there are three important aspects that will become the backbone of the overall user experience design-related work: Information architecture, human engineering and visual design. As I said earlier, I've dug in the next two areas and started recruiting people for information architecture.

I made a PowerPoint presentation to the relevant departments and described how the UX team can effectively improve the design process after it has been added to the information architecture. I have a lot of content related to market demand copywriting, media files, etc. as fragments of information, describe how the function of the information architecture is to organize these important information through the Wireframe prototype effectively, and how to enhance the usability and improve the interaction based on the effective Organization's information architecture in the aspect of the human-machine engineering interaction design; How our visual designers integrate all of this into the page.

After recruiting the information architect, I got a complete chain of design roles.

In addition, I calculated the account and decided to introduce another graphic design. Remember that freelance designer I mentioned earlier that the company paid him almost as much as a full-time designer, but only on a part-time basis, we could hardly communicate with him face-to-face, making it difficult to keep up with the pace of the new team in terms of visual progress. A full time, excellent visual designer, in addition to the contribution in the work function, will play an important role in shaping the temperament, personality and influence of the user experience design team.

Change Team Concept

The UX team is in place, and the next step is to move into a relatively difficult phase-changing the team mindset. The team described here does not refer to UX, but to the organization team within the company that is related to project design and development. What we need to change is the way in which other departments expect the user experience team to produce results in each phase of the project. As I mentioned earlier, when I first went to work, the division of roles within the UX team was rather vague, and it seemed to other departments that any one of them should be a versatile player. At that time, visual designers at each stage of product development must provide a complete "final" visual manuscript, and then other relevant departments will be based on this "prototype" for the next review process.

I know it's not easy for people in other related departments who have no design experience to have an unfinished draft or wireframe to analyze and feed back. But I'm trying to get them to know the value of these first drafts and wireframes-these prototypes can help the entire team complete the initial design and subsequent iterations without being distracted by factors unrelated to the current phase, such as color matching, precise layout of elements, and so on. They slowly realized that the wireframe is not the same as the final visual design, it is just an abstraction, and its biggest role is to help project stakeholders and users involved in usability testing in a short period of time to respond to the most important issues and feedback, Without waiting for visual designers to spend time and resources to present a large number of outstanding elements in the High-fidelity visual manuscript.

Interactive design and usability testing

As shown on the left side of the diagram below, a wireframe doesn't need to pinpoint the elements of a page, doesn't require a rich variety of colors, and does not need to look like any final draft. Before entering into a complex and time-consuming visual design process, we used wireframe to perform some usability testing, discovering many potential obstacles and pitfalls, and effectively avoiding these problems from being found in the visual manuscript. What the company used to do was to put usability testing in the penultimate part of the process before it went into development, that is, before the final visual design process, and I pushed it upstream, including requirements discussion, review, and so on, because I personally think usability testing is more important to tell you what's not OK, Rather than what's OK, the sooner you get involved, the more you'll find the problem, and not the bad news until you're about to go into the development chain.

Not only early, but also as many usability tests as possible. Powerful and flexible design tools ensure that prototypes are quickly modified to provide the basis for frequent testing. Like most peers, we use Axure. In some successful projects, we use the axure design interaction model, directly review these prototypes, validate many scenarios, so as to the subsequent visual design process for a lot of time.

Now we can even adjust and modify the problematic interaction model and design elements immediately after we have tested the usability of two users-before the third tester comes to the test. When two users are confused and stop the process in the same place on the page--they usually say, "I don't know ... I'm not sure what I need to do to get this done ... "-you should know there must be something wrong with this place.

In the actual project, we have a small principle of small means: figure out who is the highest-level decision maker at the top of the current project, especially those who have the final say on visual-related issues-don't give the visual draft to them for review prematurely, and they will give too much advice on the details of the initial an overall picture of the design process. This can seriously disrupt the designer's pace at the beginning of the process. For example, if the page has a lot of text content, and the designer has not been to deal with this part of the stage, they see the current design, most likely to say: "Here to do more icons to replace the text!" ...... Excellent icon design is actually a very professional work, it requires a lot of time to invest in the designer; each icon must pass through the full review phase and be used as a special item in usability testing to ensure that the user can understand it all. In essence, Icon design work is like witchcraft-you have to create a lot of small pictographic graphics and make sure that they can express the correct meaning (the figure below shows the designer's manuscript when making the icon). The higher the level of the decision maker the feedback comes from, the harder it is to put it on hold, even if it disrupts your normal processes and procedures.

Standardization

Creating stylized wireframe prototypes, using paper prototypes with caution--even as product managers refine requirements documents, we've step some small results. It is important that the related work of user experience design be involved in the early stage of the project, otherwise, you'll probably have to follow the wrong early route, and even the product department and the developers will give you a prototype of what they've done, "passed the review and confirmation," to follow up, Even though these prototypes have no merit at all, even if you are holding the design guide and the UI specification pointing them to the error.

So we've spent a lot of time writing prototype documents outside of the project tasks, and you can at least use these specifications to explain to the relevant departments the functions and processes of the standardized models so that they know they don't need to reinvent the wheel.

From the point of view of the whole product, at the beginning, you may need to split a small amount of resources from the UX team to assist in some "low-value" projects to get the functionality online as quickly as possible, while the team's main focus will be on the next optimization and iteration process, such as unifying the UI elements across the site. With a certain size of the site, there is usually a situation where the forms of different pages have different designs, and although their functions are basically the same, there is often a discrepancy between the order of the table items, the font rules and alignment schemes, and so on, for the form operation process that spans several pages, Sometimes the same goods appear differently on different pages of information. Not to mention those who are in the revision of the status of the site, the old and new style will often be mixed in the same page. We need to take the time to deal with these problems, design a global Unified UI component and module model, so that users in different pages of the operating experience to maintain consistency.

UI Design Specifications

In our work on the page UI to unify the process, a major project to bring in the intervention-the whole station of visual revision. This is a good thing, we can improve the UI design specification in this big project, and also design work on Enterprise Identification (CI) based on the UI style of the website (what is Enterprise Identification/CI). When it comes to CI, it can be outsourced to other design agencies, but we think they may not be able to dig the deep nature of the company's brand, and the cost is not small, so still self-reliance. Finally, we integrate the Unified UI element design pattern with the new CI standard document, including color scheme, template reference, icon selection and so on.

Specification, there is a document covering a lot of technical details, where we don't have to write all of our own content, and many implementations are linked to the relevant wiki pages. Our specifications can help us to have a track view of the various design solutions to the relevant collaboration departments, which can help us to gradually influence, disseminate our user experience design concepts and implementation methods, so that our team can be more and more at the beginning of the new project to play a role.

As a UX team, we do not monopolize design ideas in the project, and I invite colleagues from other relevant departments in the project to consider the issue of counterfeit user experience from their functional perspective according to some of the game rules we provide.

Author: C7210

Article source: beforweb.com