OurPeople
OurPeople transforms employee communication with their powerful SaaS application. To make the product even more user-friendly, they needed an in-depth study of block editors and a UX redesign for their "Broadcast" information transmission process. Leveraging our research, we delivered a functional mobile-first prototype.
Project duration
- 04.2024 - ongoing
Industry
- Team Management & Communication
Team
- 1 UX Designer, 1 Full Stack Developer, 1 Product Owner, 1 Manual Tester
Services provided
- UX Audit & Wireframe Design, Web Application Development, Quality Assurance
Product
- SaaS
Countries covered
United Kingdom
United States
About the project
OurPeople is a UK and USA-based SaaS product company dedicated to simplifying employee communication. They aim to make work easier through user-friendly, "reach everyone" technology. The web app allows for communication, managing user groups, and building content. Trusted by major clients like Tim Hortons (a Canadian chain restaurant) and Affinity Water (which supplies 3.8 million Londoners with drinking water), OurPeople is renowned for enhancing organizational communication and efficiency.
The product is expansive and includes multiple functionalities. One of them is the “Broadcast” feature, which enables users to build messages using existing components and send them to selected employees. However, OurPeople mobile users found the process overcomplicated, with rarely used UI elements cluttering the space and causing confusion. Therefore, our client required a shift to a more mobile-friendly solution.
What challenges did the client face?
Complex “Broadcast” feature
The messaging process was overly complicated and suboptimally organized, with rarely used UX elements visible on the screens.
The right approach for block editors
At the beginning of our collaboration, the client was unsure whether to use an existing solution or opt for a custom approach.
Web-first design
The current app version’s mobile accessibility was compromised, with small UI elements and controls.
How did we approach them?
3-step “Broadcast” process
We aimed for an easy, intuitive process for building and sending messages.
Custom block editor
After thorough research, we proposed a custom, lightweight block editor.
Mobile-first design
The wireframes and components are mobile-friendly.
How did we navigate the client for success?
The client gave us a detailed description of their expectations for the new design. Our task was to create wireframes optimized for mobile device usability. Since OurPeople’s product can be customized to fit their client’s visual identity, the wireframes had to be unstyled and universal. We also had to include all essential elements for building and sending messages, including easy modifications, like audience parameters and sending options.
Existing tech stack
The client had an established tech stack for their product. To align with their preferences, we inquired about developer dependencies, including the tech stack and libraries (i.e. Radix UI). We also met the client's component architecture expectations, ensuring full compatibility.Improved user experience for mobile apps
UX Designer assessed the main challenge – limited usability on mobile devices. Initially, the “Broadcast” was cluttered with numerous small elements. Building a simple message was complicated due to the abundance of options. After a UX audit, we redesigned this process, keeping only what was useful and required. Enter the app, construct a message, and send it to a selected audience. Simple as that.Block editors research
To build a custom solution, or not to build? In this case, existing libraries for block editors were too heavy, lacked required components, and weren’t mobile-friendly enough. Therefore, we proposed building a lightweight, custom editor tailored to OurPeople’s needs.
Functional prototype
Then, we transformed the UX designer's work into a functional prototype. This involved creating an interface for generating and sending “Broadcasts”, as well as preparing reusable, unstyled components. We focused solely on the frontend, which would then be integrated with the existing backend. We also performed manual tests to ensure the prototype worked as expected.
Before
- Overcomplicated “Broadcast” process
- Suboptimal process of defining the audience
- The most frequently used options are available directly from the send screen
- A simple, mobile-friendly user experience
After
- The “Broadcast” feature was remodeled into a logical build-and-send process
- Abundance of rarely used options and parameters displayed on screen
- Web components not adapted to mobile devices
What results did we achieve?
The “Broadcast” feature was significantly simplified, enabling mobile users to prepare and send messages quickly. We decluttered the interface, enhancing usability. Overall, the proposed solutions met client requirements and will be integrated into the existing product soon.
OurPeople was highly satisfied with the outcomes. This positive feedback opened the door for future collaborations, reflecting the strong partnership and trust we built with the client.
How did the client perceive our partnership?
Vazco came to us via a recommendation and they have certainly lived up to the hype. They quickly understood the brief, digesting a huge quantity of detailed information. Working with them has been very smooth and we look forward to the next project.
Ross McCaw
Founder & CPO at Our People