Cadabra Studio

Marketing Website

Client Blue Tree is a digital PR agency that cooperates with established tech startups and SaaS companies. The main goal of the agency is to help businesses gain more profit with the search. Blue Tree strives to provide SaaS companies with helpful services on crushing organic traffic and generating more traffic. The agency is also involved in reviewing B2B software in the market and making use of the best products out there. Task Our task was to redesign a Blue Tree website considering the principle and concept of the existing website. A new design should be stylish, minimalistic, and user-friendly. Moreover, the client’s demand was to make the logo unchanged, so we needed to adapt a new design to the logo style. Also, it was required to create hand-drawn illustrations and use serif fonts. Mood Board Our designers paid a lot of attention to creating visual concepts, adhering to associative and logical structure. We built a structure of associations to the “Blue Tree” name. Thus, our specialist found the proper solutions for all logical chains. The primary task of the designer was to build as much intuitive website as possible. Visual Concepts Creating visual concepts was necessary to clear out the right design vision we need to keep up with. So we conducted research, and we provided the client with a few options to choose the one he liked. We also considered the client’s preferences and brief during the research. Architecture Mind mapping is the next essential step that we took during the Blue Tree website redesign. A mind map helped us build the website's informational structure, prioritize the hierarchy of elements, and understand the whole functionality of the website. Wireframes Wireframing is the process that any UX design creation requires. They were built to provide the client with a more precise understanding of how the redesigned website will work. That is, we showed the client what we wanted to achieve. It was an essential part that required an individual approach to clear up the right direction for our team. Site Pages Once wireframes were created and approved, we proceeded to the building of clickable prototypes and tested them. Then it was the turn of the UI stage. We faced the next challenging but interesting task during this stage — building a visual layout and responsive design that will be adapted to smartphones and tablets. Illustrations We created custom illustrations that reflect the particularities of the project and the brand. Our goal was to convey the effect of freehand painting and use the combination of watercolors. Besides, we needed to reveal the digital direction topic in illustrations, so we did our best to combine the illustrations with the company’s brand concept. Typography Typography is an important part of the visual style of the future interface. Therefore, it is important to pick a font pair that will convey the mood and emotion of this site to users. We used Libre Baskerville for the headings and Muli for the body text. Guidelines Finally, we prepared a UI kit that is required for further programming — developers need it to understand where and what element and component must be placed. It helps the development team reduce the time necessary for figuring out the following steps. Team Composition: UI/UX Designer, Illustrator, Project Manager Tools: Figma, Adobe Illustrator, Jira