Full Product – Viewer Centric App
We found there was a severely underserved part of our user base – viewers.
Overview
During the persona research we found there was a severely underserved part of our user base – viewers. While working on an alternant solution within the current software framework Leadership asked for us to pivot to develop it as it’s own separate microservice app.
My Role
Lead & Principle Designer, while working on a team including a Product Manager, Software Architect, Multiple SR Engineers, JR Engineers, and Leadership
Consulted with Customers & our Advisory Panel
Deliverables
- A large monitor first web app
- Responsive design down to a tablet
- Use of the full screen function
- Ability to show relevant information (at the right time)
- “Simple” not overwhelming for the user
Discovery/Problem
During the persona research we found there was a severely underserved part of our user base – viewers. These users only used the SaaS software to view information that was relevant to them. They were not creating nor editing items, simply viewing. However, we validated these with our customers before starting work on the app with the whole team.
The two main validated problems we were looking to solve for the MVP:
-
- Visual overload – the current SaaS causes user confusion and increases the difficulty to find information they need
- User relevant information should be surfaced at any point within 2-3 clicks
MVP Goals
- Allow user to favorite items
- More modern & clean interface
- Find and surface information dynamically to the user
- Favorites
- Department specific information
- Links (from an admin
- My procedures
- Work instructions
- General help (outside the SaaS)
- Search
- History
- Show and accept acknowledgement actions
Research
Working through our validated user types we were able to determine the core items needed for different levels of users. While the first MVP focused on the “Conceptual POC – Worker” it was quickly identified by our customers that fast follow would need to show a worker with up to 30 different roles within a company.
11 Research/Validation Workshops (Worldwide)
12 International Companies Interviewed
(With over 5,000 users each)
4 Internal Stakeholder Workshops
Initial MVP Identified Scope
“Fast Follow” Identified Scope
Design / Prototype / Build
Working heavily with the Product Manager for the team, we worked through various whiteboard sessions to help understand the information architecture needed while also figuring out where were the areas we needed to think about future growth of the product. We were already getting feedback from some of the larger Fortune 100 companies that they were worried about the data overload when executives would use the product.
We researched products on the market that had heavy data or a lot of user generated content that a user would potentially have to sift through. Patterns started to emerge that we could tap into for user testing.
All of the wireframes when through user testing with our customer advisory team and internal stakeholders as interactive prototypes. We gathered feedback, incorporated, and iterated on each wireframe until we* were comfortable with moving forward to the build.
*”We” in this instance was the Product Manager, Leadership, and me.
Wireframes
Examples
Mockups
Once we incorporated the feedback from various customers and internal stakeholders we transitioned over to mockups as we worked with the engineering team. Mockups were high-fidelity and produced as the team needed. As this was not only a new technology stack introduction to the team it was also a new coding framework which meant as a designer, I didn’t know what the engineering team would need until they started working on the project.
Prototypes
Throughout the whole project, I needed to make several prototypes at various levels of fidelity for user testing, interaction demos, and customer demos while the project was still under development.
Challenges & Takeaways
There were two key challenges with this project:
-
- Just before the the build phase, there was a change in company procedure that caused a fair bit of churn.
- The engineering team used this project to learn React.
I’ll address the second point first. Because this was a new language for all of the engineers who were working on this project it took (rightfully so) three times longer than expected. While I am familiar with React and component-based development, I naturally assumed the team was as well. This lead to several points of miscommunication between the team. I was designing components in Figma and reusing them only to find out the team was writing inline CSS for every item. We discovered this when it was requested to have a font RIM size changed for the Header 1 component. After two sprints of refactoring it came out about the inline CSS. It was an important conversation that lead to mentoring of JR engineers about the importance of component based engineering. As well as many conversations on how it helps for fluid reactive design (in the long run).
For the first point, we had a change in the design to development lifecycle process just before the build. Due to this an engineer decided the research was invalidated as they were not in the process from the beginning. This also meant unfortunately trying to make the project fail. Working with the Product Manager, their leadership, we were able to document and move on.
Takeaways:
-
- Meet people where they are, do not assume that they have the same understanding as you. Ask questions and validate knowledge while facilitating non-confrontational knowledge sharing opportunities.
- A well-documented process that is followed through the whole project/feature implementation makes for faster mistakes and faster resolutions.
Related Projects
Product Redesign
Product RedesignUser feedback, lost deals, & new technology = Redesign for more revenue.OverviewThe B2B platform was in desperate need of a redesign. Customers consistently commented on its dated style and general overwhelming nature of the platform. Many of the...
Product Design – Community Site
Full Product - Community SiteA year in the life of...OverviewThe community site was their first yearlong project. Standard web design process, information discovery, spec development, wireframes, mockups, and development. When launched, engagement spiked, and we truly...
Product Design – Enterprise LMS
Full Product - Enterprise LMSTasked with a training portal learning management system (LMS), we needed to train users and employees on our products and best practices.OverviewAfter the success of the community site rollout, we were next tasked with a training portal...