Preliminary design method of Internet products through Teamcola

The current Internet product, big and small, is like a dazzling Star Wars, where ordinary users are attracted by the lightsaber of dead Stars, Alliance warships and Jedi Knights, and designers pay attention to how these large or delicate weapons are made.

Yes, with the concept of user-centric design (UCD) and user experience Design (UED) deeply rooted, Internet product design methods and processes have been redefined and very similar, even the newly-started Muggle can tell you the correct product design process needs to go through the minimum real prototype, visual design, Interactive design, high-fidelity design ... and other stages.

Design process of user experience in color design

Product Manager is not a wizard. When the crystal racket, you can accurately plan each interface and interface control, but through a certain method and tool, the logical thinking gradually shrink, and implementation of paper. Low-fidelity prototypes are often not a real starting point for design, like a complete and exciting Star Wars story with its prequel.

Teamcola is a team journal product that we develop for small teams that makes it easier to manage, enhance trust, and improve efficiency by making the team work transparently. I want to use this product to talk about some of the tools and methods we used in the early stages of our design.

Software design, people-oriented. Before product design, the typical use of the product itself needs a general positioning, if not too clear, suggest some research, visit and make a role analysis table, together discuss and analyze what type of users, what the motivation, in what scenario, the use of the software function. On user research, there are many mature theories and methods, do not repeat here.

The prototype of the product or the full picture, usually comes first in the mind of the Product manager, if the product manager is a self-employed person, then he will be able to do design writing code or at the same time, but more often the product manager is a team member, need to communicate with members of the team, tell them what they want to do is something. Of course, some product managers who are neither a normal product nor a literary product manager are not in the discussion.

In the color process, the product manager needs to use a graph to explain to team members the intrinsic logic of the product, and the way or software to draw is not important. This picture can be a paper sketch, or it can be carefully drawn, which is what we call an information structure chart.

Early discussion on Teamcola information structure

Teamcola information structure in the eyes of a common user

A Teamcola information structure in the eyes of a product manager

At this stage, the product manager will focus on the core functions and information flow of the system. Such an information structure diagram is very helpful for the carding of information logic, and it is also easy to show and explain to other members of the team.

Next, the product Manager starts drawing the page path map and the role task map, and the page path map outlines what pages the product will probably have, and how the links relate to each other. Then, the typical tasks of typical roles are listed to see how many pages are required to complete these tasks, whether the path is too long, whether there is a broken down road, and so on.

Collated page path map

Typical tasks that a typical role might face in Teamcola

With these early results, you can start the formal design of the real low-fidelity prototype, in doing each specific page information architecture, can be based on the content of the size and importance of some of the pages of the merger or split. As for the form, can be hand-drawn, can also use software such as axure to complete. In general, manuscripts are more efficient and less expensive when they are drawn, and are Wenqing on the table and posted on the wall. The HTML version is more convenient to display and transmit remotely on the computer, and it is more convenient to show some dynamic interaction details and jump between different pages.

The design of low-fidelity prototype based on page information architecture under the assistance of prophase design

On some pages there are modules that call each other, and we make small cards to facilitate the arrangement of discussions.

Put the real design prototype on the wall for easy brainstorming and review

Low-income real prototype behind the story, I believe we all know ~ is visual design, interactive design, front-end development, back-end development, such as a hard work, the idea of these papers into reality. ：）

Finally, welcome to the final results of our design-the best team log management tool--teamcola! At the same time, please pay attention to @teamcola and @ Color design to get our latest developments. ：）

Source: http://blog.mycolorway.com/2011/12/30/teamcola-pre-design/