The website is my second project during the internship in the IoT division of AlibabaCloud. It will serves as an information hub for factories and independent software vendors with manufacturing related products in the East China region. The site was created from scratch in July and now available as a beta version at iot-supet.taobao.com. I was in charge of the overall UX and part of the visual design of this site under the guidance of a senior designer.
I was not given a stable estimation of how many information will be accommodated into the site at the beginning of the design due to an urgent agenda of the project. The external partnership team kept updating us with changes of the positioning of the site, feedbacks from various stakeholders and materials collected from target users when we were pushing our design from wireframe to high fidelity.
Therefore, we managed to achieve more flexibility in our design to adapt to the change of business. Meanwhile, I also learned about what people from business side may concern, the importance of effective communication and expectation management by experiencing the tension between two sides.
To comply with the non-disclosure agreement, I have omitted and obfuscated information specific to the project that belongs to client/employer.
Avatars used in illustrations are material from Freepik.com
Provincial government initiates and funds the project with a purpose of facilitating the digital transformation of factories in the region. The platform is required to serve two purposes:
Sharing and synegizing the capability of different ISV, SI and PaaS providers
Showcasing excellent projects, products or solutions for propaganda
Factories have different interests and characteristics according to many spesific conditions such as type of industry and company scale. Here are four kinds of personas we concluded:
The content of the website is contributed by both our in-house site operation personnel and external ISV and SI, so we also need to consider who will provide information for our four audience segments. This understanding is crucial in next step feature prioritization.
In order to prioritize features for our beta-launch, we plot all features proposed for different audiences in to a space with two dimensions: desirability and complexity in terms of design and development. Features fall into the right bottom spectrum take higher priority in this beta version.
We also included the complexity for operation and target of the features into the overall visualization for the trade-off in particular cases. The following is a schematic of the prioritization process.
After the content of the beta launch is roughly settled down, I began to compile different information into layouts. Each page has its own flow meanwhile being a part of various task flows corresponding to four roles we identified before. Let‘s take navigation, home page and solution showcase page as example:
Given the fact that the content has not been finalized at the time UX design, I designed two kinds of layout for navigation drop down: the common concept and special concept. The former can be used when the content is the standard concept in the industry and the later can be used when the content is self-defined or commercial names which needs further explanation. The items in the navigation bar are settled together with business and operation teams.
The home page follows a and special concepts. The former can be used when the content is the standard concept in the industry and the later can be used when the content is self-defined or commercial names which needs further explanation. The items in the navigation bar are settled together with business and operation teams.
Given the fact that the content has not been finalized at the time UX design, I designed two kinds of layout for navigation drop down the common concept and special concepts. The former can be used when the content is the standard concept in the industry and the later can be used when the content is self-defined or commercial names which needs further explanation. The items in the navigation bar are settled together with business and operation teams.
Content of the site, for example, how many products would be listed out in a category, keeps changing when we designing the site. Therefore, a flexible design will help operation and marketing people editing and maintaining the site after the design team hand over the site to them. The framework and typesetting should accomadate various amount of information when business changes in the future. Here are two strategies:
For example, I choose a drawer-like design of which height varies with the number of products affiliated to each product categories. This strategy is learned from many other home page design.
As the images shown below, if we have only one instance to show, we need both of the text and images of that case. If we have more than two instances to show under this category, we can use plain text to fill in without worrying about collecting qualified images from client, which often causes a lot of trouble.
Compared to blue and green colors, violet and pink are less likely applied to express tech-related topic, but I was challenged to use these color as parts of brand identity. I explore various possible situations people associate violet and pink with technology and finally identify the theme of cyberpunk. The base tone is still black and blue while warm and blight colors are used cautiously. A visual design colleague and an out-sourced desginer help on creating icons used in the pages.
I find some places that can be impoved after the design has been launched for three months. These suboptimized designs are either due to unexpected changes of page content or design defaults we didn't realize in July:
Both content and design team should have estimated the potential increase of solution instances under the catergory solution. It looks fine at the initial launch but overwhelmed by content two month later.
We have individual pages to showcase each solution that provide by various ISV and SI. Those solutions are mature plans that tackle common porblems in a give scenario such as smart warehouse nad logistics monitor, computor vision empowered quality inspetion, heating energy saving, etc.
We used icons in those pages to show the core features and advantages of the solution such as comstomizable, automatic excution, warranty and maintanrance service etc. The design turns out with two problem:
a. High cost when updating or adding new instance
It generates new design work to draw or select exsting icons each time we publish a new solution. It turns out that the quality of icons drawn by out sourced designers are not stable. Better design without using icons to express this content may help control the visual consistency and save human resoruces.
b. Confusing with the expression in the home page
We have used similar design at the beginning of the home page to show diffrent categories of porduct officially offer by the platform. Those icons are interactive instance. However, we apply sililar form at the same place in solution page as a static representation individual features. The concept user learned from the home page was violated here, which may cause confusion.