A digital SaaS product empowering company management with cloud technology, analytics, and automated governance processes. Designed to enhance meeting efficiency, simplify decision-making, streamline document management, and improve strategic planning. By automating key tasks and providing real-time insights, the 21st apps enable businesses to focus on growth and performance.
TIMEFRAME
09.2023 - 06.2024
TOOLS
Figma
Google Meets - interviews and testing
Clickup - project management
DISCIPLINE
UX research
UX design
UI design
User tests
Support development
RESPONSIBILITIES
Ineffective corporate management can significantly increase overhead costs. Important decision-making in companies may be delayed, weak, and risky, harming strategic alignment and shareholder value. The lack of easily accessible financial data, reports, strategic documents, and follow-up on board meeting tasks can lead to harming company performance and shareholder value.
When I joined the 21st product team, the app was in its private beta release with MVP features. A focus group of companies within the product owners' and stakeholders' network was continuously testing the product. 21st had already integrated with the Business Register of Norway (BRREG), allowing users with company admin or board member roles to manually create accounts and interact with the product's features. These included managing the company team (simplified user invitations), creating board or stakeholder meetings with pre-made agendas, and signing protocols.
All UX improvements and new feature requests were being managed through ClickUp, the product's primary management tool. The project scope was defined to meet technical and business objectives for the planned public launch in early 2024.
During initial meetings with the product team and stakeholders, we refined the general UVP to focus on delivering efficient governance management and best practices for meetings and protocols. Our goals were to reduce onboarding friction for new users, enhance collaboration and communication, and create an accessible interface. The technical challenges we faced included appification, as the product was initially implemented for desktop devices.
To address our diverse challenges, we identified KPIs to evaluate the impact of our strategies:
User engagement and adoption
Governance efficiency
Performance and automation
All active users involved in testing 21st's private beta met these assumptions. Throughout the development process, we consistently interviewed participants to gather diverse opinions and insights, helping us understand their perceptions, behaviors, and preferences. The focus group comprised company administrators managing multiple companies, board members, and stakeholders.
At the beginning of my work, I inspected the Figma files and components organization. The first problem I noticed, which was also reported by the front-end developers, was inconsistency in the overall styling, making it hard to follow during implementation. This was caused by the incorrect use of components and, in some cases, detaching them to make local adjustments. The contextual elements was also scattered across various pages without a clear structure.
I recommended the global refinement for design files:
After two weeks of refining the design system, I prepared the following structure. The design system is constantly being expanded, incorporating new atoms, molecules, organisms, and pages.
In the early stages of the design process, I prepared low-fidelity prototypes to quickly explore and present ideas for validation. I created numerous sketches and descriptive wireframes for ad hoc synchronization, which helped determine content and usage of existing components. For more complex features and cases, I designed flowcharts and user flows. These served as starting points for discussions within the product team. Although these prototypes might be difficult for users to interpret, they could be easily replaced with more detailed wireframes and presented during user interviews.
Here are three examples of low-fidelity prototypes in Figma:
A key component of high-fidelity prototypes is organizing all designs into separate scenarios. These are detailed user flows that map out every possible action a user might take. These scenarios provide a clear, structured view of how each feature should function, covering all necessary potential variations. For every feature, whether it's an improvement or a completely new addition, we prepare a list of scenarios that is constantly updated with new ones.
We created a list of scenarios grouped by different user types. The single source of truth was maintained in our ClickUp repository. The main challenge was managing and consistently following all scenarios, as there were about 200-250 of them. We categorized them based on which ones covered key features and set priorities for user testing and development.
Below are three examples of prepared scenarios ready for user testing. Each includes both desktop and mobile screens.
A showcase of the 21st interface, highlighting its key features and overall aesthetic.
A challenge we faced was that most users from the focus group weren't available for ad hoc interviews. To address this, we scheduled weekly sessions to discuss with participants throughout the product development process.
Usability tests were conducted via Google Meet using the Wizard of Oz methodology to simulate user interactions with the app. At the start of each session, I outlined the scenarios to be tested, providing context for the feature. For instance, I said, "Today, we're exploring the process of requesting company access from both User and Company Admin perspectives. Here are the scenarios I'll present."
Typically, I shared my screen, showing only the scenarios without describing flows or actions. Starting from the initial screen, I asked participants what they would do next at each step, encouraging them to share additional real-time insights using natural language. This approach delivered valuable qualitative feedback, surpassing the insights gained from typical surveys.
For some cases, I prepared Figma prototypes that users could test independently and leave comments on. Additionally, two product team members based in Norway worked closely with the focus group, enabling in-person meetings and feedback collection. This specific approach helped us reach more users and gather diverse perspectives.
We chose to conduct primary user tests this way to gain early insights before investing time and resources in potentially risky development.
User interviews were recorded and stored in the ClickUp repository's Scenarios section to preserve all valuable data. During meetings, I noted comments by pinning them in Figma, writing them by hand, or summarizing them in personal notes immediately after. All results were attached to the tested scenarios, categorized, and prioritized.
In internal UX sessions, we revised scenarios and updated them with potential refinement tasks. In cases where the first round failed, I prepared refined versions of scenarios based on the outlined issues. These were then tested internally with the product team, presenting findings and solutions on how feedback was integrated. After analysis, we prepared metrics of pain points and goals to evaluate the success of the further round of tests.
We continued this iterative process, refining and retesting, until we resolved all major usability issues.
The initial design system, before I handed over maintenance, was based on a Tailwind UI components library—a framework familiar to our developers. Most components were already implemented, so during the design system refinement, I focused on outlining global styling changes, including a simplified approach to using design tokens. This proved challenging for our front-end developers, as much of the styling had been adjusted locally based on previous designs. To reduce development time for future changes, I recommended revising and cleaning up styles at the outset.
To achieve this, I prepared all core and semantic values using Figma variables as a source. From the large number of previously used inconsistent colors for backgrounds, borders, typography, and other elements, I minimized the actual usage semantically. This approach is easily scalable if needed in the future.
To further organize the design system structure, we applied the atomic design methodology. This approach provides a clearer way to navigate and follow the system, maximizing the use of reusable components and optimizing development processes.
The design system is built for easy scalability. Every side app of 21st can utilize the reusable components for multi-brand purposes.
In addition to the 21st UI file serving as the main library, I also handover the Scenarios to developers. This file provided comprehensive context about technical aspects, offering more detail than separate pages with limited information. To prevent an overwhelming list of pages, we synchronized with the ClickUp repository and used Figma page labeling to differentiate states.
The implementation first went to the staging environment, where we could test it internally with a focus group. Anyone could easily report potential bugs, bringing them to the developers' attention. We applied an iterative process here as well. Throughout all stages, I supported development whenever design changes were needed.
