Step by step user experience design

Before the two Responsive Web Design translation, including the concept of responsive Web Design, components and basic ideas, as well as how to design and development through the CSS3 Media Query; Today for a taste, a bit retreat. From a user experience design team leader's point of view, the author gives an overview of how UX design-related work stretches from the ground up within a company. There is no unrealistic truth and no explanation of the technical details. It is more the author's review and summary of the typical stages in the work, including team building, cultivation of ideas and influence, departmental collaboration and project intervention methods aspect. Say nonsense, walked.

Most of the time, new ways and means will not be easily put into practice. Especially in the old habits have been deeply rooted in the circumstances, the process of moving forward in each stage, in terms of participants seems to be a very novel stuff. Not everyone likes new things, but as the executor of the exact target, everyone must learn new ways of thinking and practices and implement them in practical work.

In this article, I will review the work on a revision of the company's website, summarize the work, and analyze how our team embarks on a user experience design approach at every step of the way. The following illustration shows a significant change between the two versions before and after the revision.

Recently, I was hired by a major French e-commerce website to create a user experience design team. Before I went to work, the UX team here was basically a well-wished but loosely organized project board consisting of a project manager, a functional and technical writer, and a freelancer who claimed to be a human-engineering specialist Graphic Designer. When the committee can not agree on a final design proposal, they will vote; as a general rule, they will accept a plan that accepts each other as the time left for the development cycle at the close of the polls will not allow them to do anything The changes and iterations. Essentially, this UX team does not have any actual process planning for so-called UCD (user-centered desgin) or interactive testing.

The concept of "user experience" applies everywhere, but to make this concept sufficiently attractive and influential that you can form such a respected department within your organization or company, you first have to deal with a basket of questions . Regardless of whether there is a real management role in this team, the related work of UX Design actually exists in the whole organization, but it will be greatly different in terms of implementation manner and concentration. Setting up a UX team, setting the mood and goals as the core focus of the team - requires a slow and steady process, and we can not hope that all the problems will be solved overnight.

However, many people are hoping that the formally formed UX team can bring the answers to the questions that have plagued them all along. In fact, UX is not meant to be the answer, it should advise on how to implement the project or create a framework for a better design development process. So, from the very beginning, I did a lot of "listening" to understand various issues and opinions - such as attending a project review meeting or talking to a designer. In the process of listening and communicating, one thing I need to know is exactly which roles in the actual process of the project have the final decision-making power on the design. I also need to understand the target market and to understand what potential factors make the right approach economically unfeasible; in the middle of the project I also have to work effectively with related teams such as IT and software architecture.

After doing the work of listening and communicating, I could write my own "scripting": I went into further conversations with the upstream and downstream teams who work closely with the UX team, especially the product department and the front-end developers; at After understanding their actual role and role in the project, I started digging inside the company ... I recruited an ergonomics consultant specializing in eye tracking and other usability studies; got one from the marketing department to have standardized UI design practical experience intern. With these people, our UX team is starting to attract people's attention; we receive more and more research needs to improve the user experience of the product, and we are starting to step by step to standardize the internal design process.

For e-commerce sites, there are three important aspects that will form the backbone of the entire user experience design work: information architecture, ergonomics and visual design. As I said earlier, I've dug into the back of two people and started to recruit talent in the information architecture.

I did a slide show of the department, describing how the UX team can effectively improve the design process as it complements the people involved in the information architecture. I will be a lot of market demand-related content copy, media files as fragmentation, to describe to you the function of the information architecture is how these important information through the wireframe prototype effectively organized; and ergonomic interaction design, and How to improve usability and improve interaction based on an effective organizational information architecture; and finally, how do our visual designers bring all of this together on the page.

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

In addition, I calculated the account and decided to introduce another graphic design. Remember the freelance designer mentioned earlier, the company paid him almost the same salary as a full-time designer, but limited to part-time nature and we could barely communicate face-to-face with him, making visual work much harder Stay in line with the new team. A full-time, excellent visual designer, in addition to contributing to the job function, also plays an important role in shaping the user experience design team's temperament, character and influence.

UX team staff in place, and then to enter a relatively difficult stage - to change the team concept. The team referred to here does not refer to the UX aspect, but the entire organization within the company and the project design and development related to the organization. What we need to change is how other departments expect the user experience team to produce output at each stage of the project. As I mentioned earlier, the division of roles within the UX team was rather vague when I first went to work, and anyone in the other department seemed to be the all-around role. At the time, visual designers had to provide a complete "final" visual draft at each stage of product development, and then other related departments would follow the "prototype" process for subsequent reviews.

I know that for those of you who do not have much design experience in other related departments, it is really not an easy task for them to have an unfinished draft or wireframe for analysis and feedback. But I try to let them know the value of these first draft and wireframes - these prototypes can help the entire team complete the initial design and subsequent iterations as quickly as possible without having to be involved with factors unrelated to the current stage, such as color matching, precise elements Layout and so on. They slowly understand that the wireframe is not the same as the final visual design draft, it is just an abstraction, its greatest role is to help project stakeholders and users involved in usability testing in the short period of time for the most important issues Response and feedback without having to wait for the visual designer to spend time and resources in presenting a large number of undetermined elements in the Hifi Vision.

As shown on the left side of the diagram, the wireframe does not need to pinpoint page elements precisely, does not require a rich and varied color scheme, and does not need to look like any final draft. Before going into the complex and time-consuming visual design process, we conducted some usability tests using wireframes and identified a number of potential hurdles and bugs that were effectively prevented from being left behind in the visual draft. What the company used to do was to put usability testing in the penultimate part of the development phase, before the final visual design process, and I moved it upstream, including the requirements discussion and review phase, because Personally, I think the more important role of usability testing is to tell you what is not OK, not what is OK; the sooner you get involved, the more you can spot the problem, rather than just about to go into the development process to tell everyone bad news.

Not only early but also as many usability tests as possible. Powerful and flexible design tools ensure rapid prototyping changes, laying the groundwork for frequent testing. Just like most of our peers, we use Axure. In some successful projects, we used the Axure design interaction model to directly evaluate these prototypes and validated many of the scenarios that were envisioned, gaining considerable time for subsequent visual design processes.

Now we can even adjust and modify the problematic interaction models and design elements right after usability testing for two users - just before the third tester. When two users are confused and stop working on the same place on a page - they usually say, "I do not know ... I'm not quite sure what I need to do to get this done ..." - you should know There must be something in this place.

In practice, we have a small rule of thumb: figuring out who is the highest-level decision-maker in the current project, especially those who have the ultimate decision-making power on vision-related issues - do not put visual drafts prematurely Give them to judge, they will be on the many details of the unrelated part of the design process put forward many opinions, which will seriously disrupt the pace of the designer at the beginning of the process. For example, if there is a lot of text in the page, and the designer has not yet reached the stage of handling this part, they will see the current design draft mostly saying: "Do more icon here instead of text "... excellent icon design is actually a very professional job that takes a lot of time with the designer; every icon has to go through all of the review phases and be used as a specialized in usability test to ensure that the user can all understanding. In essence, icon design is like witchcraft - you create a lot of small pictograms and make sure they're able to say the right thing (the image below shows some of the designers' manuscripts when they were made). The higher the level of decision maker from which your feedback comes from, the harder it is to put it aside, even if it disrupts your normal processes and steps.

Created a stylized wireframe prototype and used paper prototypes with caution - and even as the product manager is still refining the requirements document, we've made some small steps, step by step. It's important that user experience design is involved early in the project, otherwise you will most likely have to follow the wrong early planning path and what's more, the product department or even the developer will give you A prototype of their own, "reviewed and validated," requires you to follow-up even though the prototypes are mostly useless for most of the time, even though you're pointing them out with the Design Guidelines and UI Specifications.

So we spent a lot of time writing project prototypes outside of our project tasks; you could at least use these specifications to explain to some of the people in the department about the capabilities and processes of standardized models so they do not have to reinvent the wheel.

From the product perspective as a whole, you may need to divert a small portion of the UX team from the UX team to assist with some of the "low-value" projects to get the functionality up and running as fast as possible; and the team's main focus will be on Optimization and iterative process, such as the whole site's UI elements to style unity. A website of a certain size usually has the following situation: different pages have different designs of the forms, and although their functions are basically the same, the inconsistencies in the order of the form items, inconsistencies in font rules and alignment schemes, etc. often occur ; For forms that need to span several pages, sometimes the same items appear on different pages in different ways. Not to mention those websites that are in a state of revisions, old and new styles tend to be mixed in the same page. We need to take the time to deal with these issues, the design of a unified global UI components and module model, so that users in different pages of the operating experience consistent.

As we embarked on the process of unification of the page UI, a large project was involved - the visual revision of the entire site. This is a good thing, and we can refine the UI design specifications in this big project and also work on the design of Enterprise Identity (CI) based on the site's UI style (what is Enterprise Identity / CI). Speaking of CI, in fact, can be outsourced to other design agency, but we think they may not be able to well explore the deep nature of the company's brand Moreover, the overhead is not small, so still self-reliance. Finally, we integrated a unified UI design pattern with new CI standard documents, including color schemes, template references, and icon selection.

In the specification, there is a document covering many technical details, in which we do not have to write all the content ourselves, but many of the implementations are linked to related wiki pages. Our specifications help us to systematically demonstrate the various design concepts to the relevant collaborative departments that can help us to gradually develop influence and disseminate our user experience design concepts and execution methods so that our teams can come and go The more it gets involved in the early stages of a new project.

As a UX team, we did not monopolize the design ideas in the project. I would invite colleagues from other related departments in the project to think about counterfeit user experience problems according to some of the game rules we provide.

Source Address: http://beforweb.com/node/9