Zhenyi Shi, Front-End Developer
Low and High Fidelity Mocks
Data Prism is a data presentation platform for Ant Financial mobile products. Just like an observatory, stakeholders can view different types of data such as Page View/Unique Visitor, Click-Through Rate, Page Performance and User Characteristic.
For the main users of this product, the product managers and operators, they often need the PV/UV and CTR to improve the products they are responsible for or launch campaigns. For developers, they should maintain the products according to page performance or configure products in this platform. For company executives, they may sometimes view the general data.
The screenshot below is the original version of Data Prism in the charge of a front-end developer and he invite me to solve the experience problems especially caused by the information architecture. In order to analyze the product, I use the five planes of user experience, a famous theory from Elements of User Experience (2010).
The following three points are the problem overview of the product:
The product lacks necessary guides or tutorials so that it is likely hard for product managers or operators to use as well as developers who add and configurate a new product for the first time.
The original product use product selection as the primary navigation, which occupies unnecessary space due to the low frequency of product selection. Moreover, the original page fails to provide clean distinction between navagation and content.
Components of various styles and patterns are involved in the same product, and a unified brand color is also in absence, which contributes to inconsistency of user experience.
According to Garrett (2010), The Scope Plan is to define the functional and content requirements. What are the features, and content contained in the application or product. The requirements should fulfill and be aligned with the strategic goals.
At the beginning of the product improvement, it is more comprehensive to find out whether any content or function is absent than to dig into the details of the user interface. In order to understand the product, PACT-P Analysis (2005) is a typical means in the field of human-computer interaction, including People, Activities, Context, Technology and Purpose. I have interviewed several stakeholders to elaborate the PACT-P before I started to think about the solution, and I concluded two kinds of typical users for the product.
Data observers including product managers and operators use Data Prism to view PV/UV, CTR or other detailed data when they need to redesign the product or after a new campaign is launched. In most cases, they can only view the product they are in charge of, and they may not know how to use Data Prism as a beginner user.
Operation Engineers aim to add and configure all the products to Data Prism and authorize it to related observers. They used to implement both configuration and authorization with an non-GUI background system so that a mangament access is needed in Data Prism, and a developer introduction for beginner is absent as well.
Beginner's guide is provided on the homepage so as to instruct observers to add their related products and view different data and to instruct developers to configurate company's products.
Besides the access of the analysis platform, the management access is also provided for developers. In this way, developers can maintain the product list and permission of products with GUI.
Garrett (2010) also defines how user interact with the product, how system behave when user interact, how it’s organized, prioritized, and how much of it. Structure is split into two components, Interaction Design and Information Architecture. While Skeleton determines the visual form on the screen, presentation and arrangement of all elements that makes us interact with the functionality of the system that exist on the interface.
These two plans are about user flows and user interfaces, and I tend to use four strategies from the book Simple and Usable (2010), including Removing, Organizing, Hiding and Displacing. Generally speaking, interaction design is to remove what you don't need, organize what you do, hide what you can and displace the interface entirely through rearrangement. In this project, Hiding and Organizing are the most frequently used strategies.
Besides the design strategies, the consideration of integrity of information states is an easily overlooked part. Information states involve blank state, initial state, general state, extreme state, success state, error state and completion state, which should be considered when making prototype. If you are interested in the details of my prototype, feel free to click this link and view it.
Hiding is to hide all but the most important elements behind a secondary menu so they don't distract users.
With consideration of main users, the data observers, I have put the optional products in the secondary menu and hidden the product list in a deeper level. For daily use of data observers, they are almost in charge of one or two products. Besides, they are highly unlikely to access other product's data unless they are authorized by superior managers. Therefore, that data observers need to switch from their related product to other product is a low-frequency event.
But why all the products appear in the top page in the last version of Data Prism? It is because the front-end developer can rapidly test whether the products work with one click. However, data observers do not need to see all the products in the top page which may distract their attention to data.
Organizing is to arrange the elements into groups that make more sense and more adaptive to users' mental model.
In the last version of Data Prism, the operating zone, including the links of click-through rate, page performance and user character is mixed with content zone, so data observers have to go into a secondary page and go back with the breadcrumb component.
For such kind of internal desktop application, I decide to reduce the hierarchy of Data Prism and separate the operating zone and the content zone with a side navigation. On one hand, it can switch the content zone directly without jumping into a deeper page. On the other hand, it can help users quickly find the functions of Data Prism.
Garrett (2010) indicates that The Surface Plan is concerned about the visual appearance of content, controls and it determines how does the product will look like. It is important to choose the right layout, typography, colors and etc, which can give a clue of what user can do.
In The Surface Plan, some graphic design knowledge can make a good design and avoid unforgettable disasters, in which the four principles including Contrast, Repetition, Alignment, and Proximity from the book The Non-Designer's Design Book (2014) are often used. Moreover, following one of the design languages such as Google Material Design or Ant Design can help you do more with less effort.
If you are interested in the design language for internal desktop applications, feel free to access ant.design
Repetition of certain design elements will bring a clear sense of consistency. In this project or other user interface design, the color, the spacing and the font are the most repetitive elements so that a visual identity should be determined before visual design.
Contrast simply means difference. Making use of contrast can help the viewer “get” the point of your design quickly. In this case, the color and the font size are manipulated to draw the attention, while the color of light and dark indicates whether it is selected.
For Proximity, items should be grouped together so that they will be viewed as a group, rather than as several unrelated elements. I intend to separate different groups with larger spacing and organize similar elements with smaller spacing.
In this project, I manage to use the five plans from Elements of User Experience (2010) to frame and approach the problems. Besides the plans of user experience, I also use more methods to analyze deeper in the certain plan. The following three points are what I conclude:
1. For The Scope Plan, the analytical framework of PACT-P (2005) can help to elaborate the scenarios and figure out what contents and functions are absent in the product, so as to make the product more complete.
2. For The Structure and The Skeleton Plan, the four strategies from Simple and Usable (2010) can reduce or displace the complexity of the product, so as to make the product easy to use and raise efficiency.
3. For The Surface Plane, the four principles from The Non-Designer's Design Book (2014) can bring a sense of consistency and give a clear clue of what users can do.
Garrett, J. J. (2010). Elements of user experience, the: user-centered design for the web and beyond. Pearson Education.
Benyon, D., Turner, P., & Turner, S. (2005). Designing interactive systems: People, activities, contexts, technologies. Pearson Education.
Colborne, G. (2010). Simple and usable web, mobile, and interaction design. New Riders.
Williams, R. (2014). The non-designer's design book: design and typographic principles for the visual novice. Pearson Education.
Copyright © 2017 Junyu Liu. All Rights Reserved.