Wrangle — dynamic design for streamlined business management
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/651ef9353f04d51819ee4097_BG.avif)
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/651ef937b771fd2bb0dc7613_BG_Tablet.avif)
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/651ef93903afa94d69edb16e_BG_Mobile.avif)
About the client
Project overview
Wrangle is a powerful management tool developed by Wranglesoft, a North Carolina-based corporation. It helps companies to map and automate their employees’ work, offering seamless integration with Slack, Microsoft Teams, and other business messaging apps. By partnering with Wrangle, companies gain access to many exciting benefits, including the ability to identify and resolve management issues within their preferred chat platform.
Overall, Wrangle is a perfect tool to level up your work game, streamline communication, and significantly enhance productivity. With this system, team members can easily request approvals, assign tasks, and track specific requests. Besides, Wrangle provides real-time notifications, a transparent dashboard, and the ability to search open and closed tickets, ensuring that employees are always informed and aligned.
{{services-provided}}
Market size
Management software
In today’s rapidly changing world, organizations are facing a crucial challenge in maintaining employee productivity, particularly with the increasing prevalence of hybrid work models and constantly evolving technology stacks. One solution to this issue is the utilization of productivity management software platforms.
According to market research conducted by Globe Newswire, the Global Productivity Management Software Market Size was valued at USD 47.4 billion in 2021, with projections estimating its growth to reach a market size of USD 157.7 billion by 2030, at a CAGR of 14.4% from 2022 to 2030.
<div class="case__rich-result">
<ul>
<li>$47.4B+ Market size value in 2021</li>
<li>14.4% Projected growth in 2022–2030</li>
</ul>
</div>
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924709_66aa30b83bd46cf3d1d2f883_648951a3e4e3c51c8043032e_illustr-img-wrangle-1.webp)
Achievements
Wrangle’s results
Since its launch in February 2021, Wrangle has been utilized by over 800 organizations and has completed more than 10,000 workflows. In January 2022, they were featured in The Saas News for the impressive and surprisingly oversubscribed pre-seed funding round.
Wrangle is a relevant and widely-used tool that helps in multiple workflows, including Procurement, HR, Sales, Customer Success, Legal, and Finance departments. No wonder the hard work of Wranglesoft has paid off and attracted lots of customers and investors.
<div class="case__rich-result">
<ul>
<li>$5M+ Total Wranglesoft revenue</li>
<li>$2M+ Oversubscribed pre-seed funding</li>
</ul>
</div>
{{steps}}
Project workflow
- 01 Outline a portrait of the archetypical persona.
- 02 Conduct comprehensive market & competitive research.
- 03 Create an intuitive and easy-to-navigate roadmap for end users.
- 04 Build a strict design system.
- 05 Design UI/UX elements, considering user needs and preferences.
- 06 Bring all ideas to life through Webflow technology.
- 07 Test the finished work.
- 08 Present the result to our client.
End user
Archetypical persona
Having planned the workflow, we started to “paint” the portrait of the Wrangle’s user persona. As our client pointed out, their tool is aimed at young and talented IT professionals who are always on the lookout for new ways to work. They are drawn to sleek, minimalist design and appreciate the power of modern technology to enhance creativity and productivity. While open to new ideas and suggestions, these users expect the preferred tool to help them achieve new goals, avoid stress, and work not harder but smarter. Keeping these insights in mind, we found powerful and intuitive solutions to help users comfortably achieve their work goals.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246fa_66aa30b83bd46cf3d1d2f88a_6540ddb6d5988352f832ed2b_Frame%2525201000004609.webp)
Market traits
Competitive research
To ensure the success of the project, our team considered the needs of its users. Once that was done, we analyzed the design pros and cons of similar platforms. To help Wrangle stand apart from competitors, we focused on the consistency and modernity of our work process, creating a contrasting color palette, distinctive fonts, and eye-catching animated inserts. Our team also incorporated features from competitors that were highly appealing to the client, such as well-readable typography, minimalistic hovers, and abstraction components like clean lines and simple forms.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b71cce325ddba924792_66aa30b83bd46cf3d1d2f8a2_648952c5a22aa29547677124_illustr-img-wrangle-5.webp)
Visual rules
Design system
Designing the Wrangle landing page required us to focus on creating a clean and consistent product for the client’s audience. We achieved this by selecting Inter as the primary font, which embodies the values of accessibility, versatility, and minimalism. As a bonus, its simple and clean design is perfect for our friendly approach, providing excellent legibility on both small and large screens.
To complement the selected font, we chose a contrasting palette of classic Black & White colors mixed with eccentric Dark Violet, Bleu De France, Macaw Blue Green, and Dark Seafoam. As the primary accent color, we opted for deep and reach purple shades of Dark Violet. To add more elegance and sophistication, our team selected vivid blue and green tones of Bleu De France, Macaw Blue Green, and Dark Seafoam colors.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba92470c_66aa30b83bd46cf3d1d2f897_648952e4a22aa29547677e1e_illustr-img-wrangle-6.webp)
User Flow
Wrangle roadmap
At the heart of the Wrangle project is a commitment to providing users with a tailored and immersive experience. To achieve this, our team mapped out a comprehensive roadmap that takes into account the specific goals and needs of each and every user. By investing significant time and resources in analyzing the customer’s behavior patterns, we created an intuitive path that guides them through the various stages of this journey, highlighting the most critical and beneficial elements.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba92471a_66aa30b83bd46cf3d1d2f89a_648953c7af248a70c73515fc_illustr-img-wrangle-9.webp)
Design ideas
Contrasting landing page
Our team delivered a dynamic web design that wowed both our client and their audience. We combined structured website elements with creative details, custom illustrations, and animations. To facilitate swift connections to Wrangle, we added a bright “Add to Slack” CTA button that stands out against the serene Bleu De France sky-blue background. Likewise, the Dark Violet color we chose as the primary accent perfectly matched the Wrangle’s friendly and kinetic energy, conveying the idea that business management tools can be both fun and functional.
Through extraordinary geometric accents, our team aimed to match the explosive Wrangle temper, while a well-structured design system helped us to convey the atmosphere of credibility and trust. Ultimately, we put a strong emphasis on customer needs and desires, investing in smart UI/UX solutions and creating a resonant message for everyone who wants to organize their work chaos.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba92471e_66aa30b83bd46cf3d1d2f89e_64895364e557939626060ffb_illustr-img-wrangle-7.webp)
Tech stack
Webflow technology
The primary objective of our agency is to provide exceptional and swift results. For this purpose, we consulted with our client and chose the innovative Webflow platform to create a highly customizable product as quickly as possible. Its powerful content management system and advanced design tools enabled us to create a website that is both beautiful and convenient in just 2 months. Additionally, Webflow’s easy-to-use content management system ensures that the client can make updates to the site’s content on any device, even without Halo Lab assistance.
By leveraging the power of Webflow, our team created a landing page that is both visually stunning and functionally impeccable on all devices. With the platform’s robust design and prototyping capabilities, we were able to perfect every element of the landing page and improve Wrange’s online visibility.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924706_66aa30b83bd46cf3d1d2f894_64895394b82192a5c6d7a209_illustr-img-wrangle-8.webp)
Our results
Superb output
Our team embraced the challenge of working on the Wrangle project and found it to be both enjoyable and rewarding. Having considered all project goals, we made a complete redesign for website pages with tonnes of colors, animations, hovers, and illustrations. Through these digital tricks and Webflow capabilities, such as powerful CMS and optimizing to all devices, our experts created a memorable and lovely website, presenting an updated version of the Wrangle platform — with a user-centered interface, intuitive roadmap, and countless dynamic visual elements.
What’s a Rich Text element?
What’s a Rich Text element? sdffgdfgfghfgh
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- Sdfdfg
- Dfgdfgfdg
- dfgdfgfd
- Dfgdfg
dfgdf gdfg dfgdfgidfgiudf gdf ugidfugidf ugid
- dfgfdg
- dfgdfg
dghjghj - dfgdfg
- dfgdfg
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- 01 dfgdfgd
- 01 dfgfdg
- 01 dfgdfg
- 01 dfgdfg
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
![](https://cdn.prod.website-files.com/63f38a8c92397a024fcb9ae8/64998bfa529708c66117a52e_works_slide-01.avif)
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
dfgdfgdfg
The main goal of our client was to build a patient-friendly platform with a positive and stress-free approach. As not every person is a tech guru, it was also crucial to simplify the website’s functionality, creating an intuitive interface with different languages available. Besides, the client put a strong emphasis on data security, as sensitive information about patients’ health must always remain confidential.
sdfsdfsdfsdfdg
The main goal of our client was to build a patient-friendly platform with a positive and stress-free approach. As not every person is a tech guru, it was also crucial to simplify the website’s functionality, creating an intuitive interface with different languages available. Besides, the client put a strong emphasis on data security, as sensitive information about patients’ health must always remain confidential.
Technologies used
To verify various hypotheses and to better understand what users wanted, the client conducted A/B testing and, based on this analysis, generated various tasks for us to implement. Some users were directed to the unaltered version of the site, and some would see the new one. One of the intriguing cases involved the testing of website registration methods:
- 01Through the simple page with a brief registration form and an image of a unit’s exterior.
- 01Through the simple page with a brief registration form and an image of a unit’s exterior.
To verify various hypotheses and to better understand what users wanted, the client conducted A/B testing and, based on this analysis, generated various tasks for us to implement. Some users were directed to the unaltered version of the site, and some would see the new one. One of the intriguing cases involved the testing of website registration methods:
Results in numbers
Once we had developed the configurator and Mighty Buildings concluded the lengthy closed beta testing, they launched their product publicly, raising $40 Million in Series B Funding. And they haven’t stopped there — during the subsequent funding campaigns, they’ve raised more than $100M from leading investors, including Khosla Ventures and Arctern Ventures.
- $40M
Raised in series B Funding - $40M
Raised in series B Funding - $40M
Raised in series B Funding
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Problem
The lack of simplicity in Wrangle’s design made it challenging for users to navigate the page, hampering their ability to identify its main features. For this reason, some users struggled to even test the tool’s functionality, resulting in a less-than-optimal user experience. Additionally, Wrangle’s design lacked the colorful dynamic elements needed to attract attention to the interaction buttons.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba9246f6_66aa30b83bd46cf3d1d2f88e_648951c1e4e3c51c80431d32_illustr-img-wrangle-2.webp)
Solution
Having examined issues with Wrangle’s existing design, Halo Lab took action immediately. Our team created a new, more visually appealing landing page that features animated illustrations to demonstrate how Wrangle works. We also added dynamic CTA buttons to make it easier for users to download the tool. Thanks to these elements and our team’s hard work, Wranglesoft can boast a management platform that is both compelling and understandable.
![](https://cdn.prod.website-files.com/63fc977c14aaea404dce4439/66d08b70cce325ddba924703_66aa30b83bd46cf3d1d2f886_648951c7b82192a5c6d642a3_illustr-img-wrangle-3.webp)
Redux and Redux-saga
To handle data management, we employed Redux and Redux-saga. The Redux library helps us manage the state of the application in a centralized and predictable manner, while Redux-saga enables us to manage and test side-effects such as data fetching and backend communication.
The combination of these libraries has allowed us to create a robust and maintainable front-end that is capable of handling large amounts of data and state changes.Redux and Redux-saga
![](https://cdn.prod.website-files.com/63f38a8c92397a024fcb9ae8/64783cd70a830d21986d23c1_case-body-04.avif)
Redux and Redux-saga
To handle data management, we employed Redux and Redux-saga. The Redux library helps us manage the state of the application in a centralized and predictable manner, while Redux-saga enables us to manage and test side-effects such as data fetching and backend communication.
The combination of these libraries has allowed us to create a robust and maintainable front-end that is capable of handling large amounts of data and state changes.Redux and Redux-saga
![](https://cdn.prod.website-files.com/63f38a8c92397a024fcb9ae8/64783cd70a830d21986d23c1_case-body-04.avif)
Thank you!
We will contact you ASAP!
![error image](https://cdn.prod.website-files.com/63f38a8c92397a024fcb9ae8/6466312f14415ae38f7bb897_error__img.webp)