System Design for Web-App
Impact
100% Retainer Increase
Skills & Industries
Overview
Teamera is a B2B, SaaS, team management web application that brings project managers, freelancers, and clients to a single experience. I spearheaded the system design to construct the visual foundation of the product. Additionally, my team and I participated in weekly meetings where we worked directly with stakeholders to plan and execute sprints.
Discovery
My product manager and I co-facilitated a workshop to target findings for the UI foundation. The app was to function as a catalyst for teams to complete projects. Hiring contractors, managing documents, and drafting contracts were only some key features that would complete the experience. A primary finding was the expectation for a ‘table’ view, which would allow users to view a collection of data, filter it, and see more detail about it. Furthermore, the type of data would be variable, representing a person, team, or something else entirely. While we did align with their Head of Engineering, there were no major design limitations of their web stack.
Workshop Findings
Contractor, manager, and cent users.
Primary use-case is table view.
Potentially multiple views per screen.
Breadcrumbs per screen session.
Challenges
Teamera’s audience is broad, professionally and demographically. I anticipated this would prove to be difficult in establishing a system that would serve all users. Secondly, representing various table data could easily create redundancy. As components increase to accommodate different types, carefully reviewing each’s intention would be crucial to maintaining the integrity of the design system.
Key Challenges
Broad audience.
Variable data types.
Methodology
I began pre-design planning by outlining foundational UI goals and context. By comparing similar experiences with similar users, I organized a competitive audit to gauge current trends. It was important to design around familiarity to encourage an intuitive experience for users. Leveraging Figma for wireframing, I explored accelerating search-related activities. These generally involved repeatedly shifting focus, from a collection to a single entry. Taking this into account, I designed the foundational layout as an adaptive space, shrinking or growing as needed.
Key Design Strategies
Lean into trending UI.
Adaptive design.
Allow flexibity.
The adaptive layout makes it possible to simultaneously view collection and entry, minimizing steps in the process. For consistency, I used a 12-column grid system to determine container widths. Notably, the grid was just a guide for the initial state. Users would still be able to adjust each space to their preference. This flexibility was a key feature.
For the table view, I needed to account for more or less functionality. I decided to take a polymorphic approach, providing a table frame that allowed the addition of sub-components for functionality, as needed. I utilized Figma’s symbol properties to set various conditions, such as select-state, exposing a primary CTA, quick filters, and more. Additionally, I exposed relevant button labels to allow unique text throughout each table instance. This would serve variable record types, where certain actions were unique or not applicable. Lastly, I organized local color styles. These included not only brand colors but functional values representing states such as error and caution. I iterated the wireframe components with the Product Manager internally before revealing them to the client. Once aligned, I presented the wireframes to Teamera stakeholders for approval.
After refining all components for design, I prepared prototypes of example screens. I presented these directly to the Teamera team, including stakeholders. I proceeded to refine the remaining app screens and pre-account flows.
Retrospective
Delivering the component system ensured their team was in good hands and led to their decision to increase their retainer by 100%. Working with Teamera allowed me to understand time and growth obstacles around seed-level companies, further expanding my industry experience. Their team was a rewarding journey and has set the foundation for continued success.