Background

I joined TENA studio as a Product Designer about 1 month before the project began. TENA studio was founded by two Industrial Designers integrating two disciplines - Industrial Design & UX/UI.I’ve grown tremendously at TENA. Some key insights of which I have listed below:

• I have been part of a few design processes that started from non to fully functional systems that are being used by hundreds of users around the world.
• I had experience working in global teams from different fields to develop a product as a team.
• I practiced designing new features inside existing systems and developing a new solution to fit within the design system.
• I have mastered forming complex systems into simple and user-friendly interfaces.
• I took part in designing for multiple fields such as medical, manufacturing, games, cosmetics, and consumer electronics.

My role

As part of the UX/UI Team, I participated in all phases of the project. Research, wireframing, prototyping, detailed UI design, and handover to developers.

The General problem

We had a few key issues we wanted to take care of:

• Our main users are the floor managers at the printing factory. At the present, they had to manage all sorts of information - updates about machine software, maintenance techniques, and schedules, news about new regulations, etc. The new platform has to combine all of this information into an organized experience.
• Multiple types of data - HP is a huge manufacturer of printers. They have multiple models each has different versions and extensions. The amount of data is huge and it has to be arranged correctly in hierarchy.

Research

We conducted research in a few methods.

• We have analyzed technical news platforms with different types of structures. It helped us define the assortments of the data on the main news page.
• Looking at the current type of information and the way it is delivered helped us to understand the assortment of information received, and its frequency.
• Determining the range of end-users we need to design for.
• We took a class about Service Now system and learned its limitations.

Insights

After collecting the data, there were few things we could mark from this analysis phase:

• We found that most of the current news platform are one way communication. There is information sent and the receiver has no way to communicate back.
• Our main user is the floor manager at the printing factory. They have no platform-based connection with their factory workers, they have to update their employees about printer-related updates and news.
• We divided the information into four major groups: Product news, Technical news, Reports and Enrichment content.
• The content was sent in different formats - Text, PDF, Video and pictures. There should be an indication for each type of content in addition to indication for information type and related machine if available.

Wireframing the solution

Based on the above problems identified, we worked towards addressing these pains by coming up with potential solutions:

• Design the main home page with a glimpse of each content type. The user will be able to look at it as a “news center” with indications for updates.
• Define the right hierarchy to differ between content type, format, and relation.
• Establish a connection between the “reader” and the “creator” where both can communicate.
• Define each information type with its own page and consumption experience.

We mocked up some wireframes to gather feedback about overall layout.

Focus point - Engagement with content

The current way of delivering all of the above info is by email. The user gets some kind of a newsletter with different sections each time. This relationship is one-way, the users have no way to respond to the sender, comment on reports or ask questions about new machine technical treatment. We wanted that both the reader and creator of information will have an open line of communication.

The first step was to “reveal” the creator. We added a profile picture, name, and email address as basic information in addition to a “follow” button. The reader now has all of the info they need to contact the creator in private or follow an interesting publisher.

The second step was to add an engagement area at the end of the article. In this area we placed a few engagement options:

The third step was somewhat unconventional. To expand the line of communication even more, we added a messaging feature. This feature has a few main purposes:

• Users can talk with creators and comment privately about their articles
• Contacting the technical team to help with new technical procedures.
• The floor managers can talk with their colleagues, share information and knowledge, and most important - create connections with others in their field. This specific feature was not available in the previous method of delivery.

Focus point - Technical pages

Half of the content delivered using the system is technical reports and notes. These technical pages hold updates about maintenance routines, known issues, bugs, etc.The content is delivered in PDF format than can not be implemented as live text. We suggested using a two-column-based pattern that will allow easy browsing and reading of the documents.The users will have an option to download the doc to their pc so they could share it externally with their workers.

UI concepts

HP’s brand is very much recognizable by its blue color on a white background within a light-themed environment. Because the styling we used for the wireframe phase was a good match, we focused mainly on the differentiation of colors and tagging of information.

Design

HP’s new branding direction is going dark mode. It is refreshing and was fun for us to add more depth to our design. We allowed ourselves to add a big splash of color for each category page to make a stronger relationship with the relevant section on the home page.

Results and takeways

The new platform launched successfully with positive feedback from the users.

• Working on an interface that is a part of a bigger operating system has a lot of constraints. Both the UI and UX has to be consistent with other parts of the system to create seamless navigation through the platform. The challenge was fun to take part in and I had a chance to explore my ideas in different frames of constraints which I believe leads to greater creativity.
• While designing a new platform within a bigger system, there are some limitations related to phases of development. Constrains like file formats that can not change or be implemented seamlessly were a big challenge which we had to find our path in to come up with a reasonable solution.
• Management systems such as Service Now have their limitations. We had to juggle between designing with system limitations and highly trained developers that can make magic. This was a fun experience of stretching the frame of limitations together.