HP Indigo asked for a news platform that holds the company news of different topics such as service, maintenance, new products and events, etc. The scope was to develop a well defined MVP that will hold the first round of tests. That means we had the freedom to develop the platform withing some boundries:
- The platform is up to be part of PrintOS, which is an internal system for HP printer owners. TENA has been working with HP Indigo and HP Global for over a decade, creating their interfaces from the 1st generation of Touch Screens and the cloud-based PrintOS applications.
- The project has to fit Service Now environment.
- Due to intercrossing between new and old platforms in PrintOs environment, there would be some “news files” that won’t be able to be embeded. That means in some cases we would need to replicate an e-mail point of view of things - Main message + a PDF file.
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.
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.
To the point.
(Followed by a detailed case study)
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.
The original content as it was sent to the users.
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.
First requirements by client
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.
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.
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.