Witly offsets its clients' lead generation costs by connecting them with partners ready to purchase their leads immediately after they generate them — turning their marketing costs into marketing profits. Witly is an innovative automated advertising platform that empowers real estate agents by optimizing client conversions through automated remarketing campaigns. Witly has successfully established its presence in the real estate industry as a bootstrapped venture over the past few years. However, to stay ahead of the competition and meet evolving user needs, Witly recognized the importance of revamping its web app and website. Additionally, they aimed to introduce new digital products tto enhance their offerings further
The previous app had significant room for improvement, particularly in UI and UX. It lacked a sitemap and visually defined workflows. Upon navigating the app, We observed repeated workflows and identified unnecessary pages or sections. Therefore, the first step was to determine the scope of the new app.
Current App Sitemap
We created a sitemap of the current app to get a complete picture of its structure. This helped us to identify the workflows that were repeated across modules and to define the scope of the app by marking with X the pages or sections that were not needed.
Witly 3.0 Sitemap
We created a new sitemap with the scope for the new app. After three rounds of feedback, we got the client's approval and were ready to move forward.
In our design process, we place a strong emphasis on user-centered design, and this begins with the creation of user personas. These personas serve as our compass, helping us navigate the intricate landscape of our target audience's needs and preferences. By delving into the personas' personalities, goals, motivations, and even their frustrations, we comprehensively understand the individuals we are designing for. This empathetic approach allows us to craft solutions that go beyond mere functionality. Our designs are tailored to facilitate users in reaching their goals while addressing their pain points and enhancing their overall experience. This user-centric perspective guides our design decisions and cultivates a sense of empathy within our team, reinforcing the importance of creating products and experiences that truly resonate with the people who use them.
On our project, we harnessed the power of wireframes, developing more than 80 of them to meticulously outline the comprehensive workflows for every module. This strategic use of wireframes provided us with several invaluable advantages. Firstly, it enhanced clarity and communication among our team and stakeholders, ensuring everyone understood how the various components would come together. This not only expedited the design process but also facilitated seamless collaboration. Secondly, these wireframes were pivotal in User Experience (UX) design. By concentrating on the layout and flow, we could prioritize the user journey and functionality. Moreover, the rapid iteration and feedback mechanisms inherent in wireframing enabled us to fine-tune the design experience.
After finalizing the wireframes, our next phase entailed UI design, beginning with developing a comprehensive Guidestyle. This Guidestyle encompassed critical elements such as Typography sizing, Color Guidance, Elevations, and layout breakpoints, ensuring a consistent and visually appealing design foundation.The subsequent stage in our process involved the creation of a design system, drawing inspiration from the principles of Material Design 3. We meticulously defined all the components constituting the app's UI within this framework. This comprehensive approach aimed to provide a unified, professional appearance, reinforcing brand identity and guiding users seamlessly through the interface.In the final phase, we completed the UI design of all modules, prototyped them, and documented these designs to facilitate the Development HandOff. This documentation ensures a smooth transition from design to development and that the end product adheres to the established design guidelines.
As a part of Witly's strategy, they also revamped their website towards a Saas approach, highlighting the new Witly App and its main features and the ability to subscribe to Witly. We crafted a Bold, clean design with interactions to enhance user engagement and conversion.