How and why we created a new website for Deegloo and why did we choose to do a brand revitalization?
Part of this answer you can read in our previous blog post on the marketing perspective on developing a new website and brand revitalization. In this one, we turn the focus to the design process from start to finish. We’ll see how we got from brainstorming to the final product.
The role of a designer isn’t just to create visually attractive designs, it extends across the whole development cycle. Great collaboration and business savviness were integral to creating a whole new look and a starting point for the new era Deegloo was entering.
Why redesign an old website and do a brand revitalization?
The previous website had a low conversion, unorganized content, no personalized approach, pastel color pallet, inconsistent writing, and no user-centered focus. It wasn’t resonating with the message the company wanted to convey.
What was the challenge?
The company was switching its focus to more complex and challenging solutions. We needed to figure out what’s our voice, how we wanted to sound to potential clients, and how to reflect our good energy.
- Create a well-responsive website
- Provide a good UI/UX practice
- Good content organization
- Clear tone of voice
- Create a brand to send a clear message
- Personalized approach
- Adobe Illustrator
- Adobe Photoshop
Our overall timespan was around 3 months.
- Research (interviews, workshop, competitive analysis)
- Information Architecture, content optimization
- Wireframe building, testing (architecture testing/optimization)
- Mood board, UI design, testing (usability tests)
- Prototype development
- Development & testing (QA testing)
As a first step, we conducted an interview and workshop as a part of kickoff week. The idea behind this was to determine who is the target audience, who are our direct competitors and what our goal is.
The next step was a detailed competitive analysis (as much as possible). We wanted to figure out what works (and what doesn’t) for our competitors and what could work for us in terms of approach, color scheme, information architecture, content, etc.
We wanted to form a deeper understanding of our users’ goals, needs, experiences, and behaviors. To empathize better with our target audience, we created two personas that represent our target audience. We created a predicate user journey for each persona to optimize content for better user targeting. So, we created 2 personas for each of our user segments. They were based on our research.
With the business goal in mind, and created user personas, we made sure that our users can reach the goal effortlessly. So, we sketched a current-state user journey map, to identify and map opportunities for improvement. We identified unnecessary steps, inconsistency, and potential dropoff points in the flow. By optimizing these from the new design, we optimized content to be a more user-centered experience that eventually contributed to conversion rates.
As a starting point, we used existing information architecture and compared it with our research. After a few modifications, we were satisfied with the site map we created and marketing started working on content creation and optimization.
Sketching and low-fidelity wireframe was the next step in product building. With quick drawings, it is easier to generate and refine ideas. In this case, sketching was shared with the team and used for refining ideas, content brainstorming, and optimization. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.
After a while, I turned sketches and low fidelity into wireframes. In collaboration with the marketing team, we redefined and polished sketches using Figma. Wireframes served as a more detailed blueprint for web design to capture the look and feel of the product.
What about branding?
How we approached brand revitalization and what did we do in the process? First, we decided to move away from a pastel color pallet and from playful illustrations. With our research part, we concluded that we wanted to go with a bold and more definitive tone. And that is what mainly affected font, color selection, tone of voice, etc.
Fonts and colors
As stated in the first analysis we wanted to move from pastel colors and playful illustrations. We tested several fonts with color combinations. In the end, we were satisfied with our final choices.
We choose Plus Jakarta as our go-to font because it’s a modern and fresh geometric sans serif. The font consists of modern and clean-cut forms with balanced spaces to preserve legibility in a large range of sizes. We believe that Jakarta can deliver the look, message, and tone of voice we wanted to build.
A very dark shade of deep but saturated blue – Cetacean Blue as our main color.
After testing, content optimization, and revision I moved on to design the final screens in Figma. My goal was to create a visual identity that was aligned with the brand’s values and message. I’ve gone back and forth to my wireframes, mood board, and personas and took a deep dive into my catalog of references for inspiration.
In the process, I’ve created some guidelines and kept the responsive design in mind. As already established, I followed a dark-themed, modern, and bold look.
Before and after
We are monitoring our new website metrics. Yes, we know it is early for some real data and comparison, but early metrics are promising. We compared 45 days before release and 45 days after releasing new website.
This is only the beginning of something new in the communication of the values of our brand and our work. We keep monitoring our KPIs and constantly updating and refreshing our digital platform.