Taking Further Steps with Unforgettable Block Style for Email Marketing

Profile2

Muhammad Al Mahdi

7 mins read

.

December 1, 2021

design_diary_thumbnail_flowstate

Project Background

"When Comfort Becomes the Greatest Enemy"

Flowstate.agency, an email marketing agency founded by my friend Simon, specializes in assisting e-commerce businesses in boosting sales and ROI through captivating email designs, email automation, and data analysis.

As a designer, I had the opportunity to be involved in the website redesign project for Flowstate.agency. Collaborating with Paul Johnson, the lead designer at Flowstate, we ventured out of our comfort zones and explored a bold and unique block-style website design.

 

My role in this project included:

 

  • Creating the layout of the landing page
  • Designing icons and symbols
  • Focusing on interactions between pages

 

 

 

 

Paul, with his expertise, reviewed and provided feedback on every change I made. This collaboration resulted in an enjoyable and exceptional workflow.

 

Previously, I have also assisted Flowstate in various client projects. This experience further strengthened our relationship and trust, ensuring that the website redesign project ran smoothly and produced an innovative and effective website.

Approach

"Offering a Human-Centered Experience with Block Style"

In collaboration with Paul Johnson, I employed Human-Centered Design to understand the Flowstate customers, identify issues, and develop innovative solutions. This approach considers emotions, cultures, and human values in the design process. Through this approach, Paul aims to utilize Block style to convey Flowstate’s brand image as an innovative agency.

 

Discovery & Understanding

"Nostalgia or Obsolescence? Flowstate Must Move Forward!"

As a first step, along with Paul Johnson and Simon, I comprehended the given brief and engaged in discussions to thoroughly understand everything about Flowstate. Besides my background in connecting with the Flowstate project, some challenges faced, leading to the redesign, are as follows:

 

  • The old website’s appearance has become outdated, giving an impression of lacking professionalism and innovation in the eyes of potential clients.
  • Visitor conversion has been steadily declining recently.
  • The branding image lacks modernity and innovation, potentially hindering Flowstate.agency’s efforts to expand its market reach and increase market share.

 

 

 

 

From these discussions, I also validated Simon’s redesign goals as follows:

 

  • Increase visitor conversion
  • Strengthen brand image
  • Enhance customer trust
  • Boost sales and ROI

 

Based on my experience collaborating with Flowstate on previous client projects, I have a profound understanding of their target market. Flowstate targets e-commerce business owners seeking to enhance sales and ROI through email marketing. Their ideal clients include:

 

  • Shopify store owners
  • WooCommerce store owners
  • E-commerce store owners in general
  • Direct-to-consumer brand owners
  • Entrepreneurs
  • Marketers

 

 

 

 

Flowstate.agency possesses several advantages, including:

  • Extensive experience: Having assisted over 150 clients worldwide.
  • Expert team: A team comprising experienced email marketing experts.
  • Guaranteed service: Providing a minimum revenue guarantee, or they will work for free.
  • Personalized approach: Offering services tailored to the specific needs of each client.

 

These advantages will be packaged in the appropriate structure and layout to effectively convey them to the audiences.

Solution Concept

"Offering a fresh face with enhanced fortunes in user experience"

With Paul Johnson and Simon, I presented several solution ideas to address the challenges and goals of redesigning the Flowstate.agency website. Here are some key solutions accepted by Simon and Paul to achieve objectivity:

 

  • Modern and captivating website design with stunning visuals.
  • Easy and intuitive website navigation.
  • Relevant and beneficial informational content for target audiences.
  • Clear and persuasive Calls to Action (CTA).
  • Clear and easy-to-use contact forms.
  • Professional and credible website appearance.
  • Clearly and prominently showcasing Flowstate.agency’s strengths.
  • Testimonials from satisfied customers.
  • Case studies demonstrating Flowstate.agency’s success.
  • Building assumptions about caring for the ecommerce community.
  • Informative and educational website about email marketing.
  • Trustworthy and user-friendly website design.
  • Use of clear and easily understandable language.
  • Increasing website visitor conversions into leads and customers.
  • Building strong relationships with customers to increase customer lifetime value.
  • Optimizing the website to increase efficiency and ROI.
  • Mobile-friendly and responsive website.
  • Integration with social media.
  • Use of analytics tools to track and analyze website performance.
  • Search engine optimization (SEO) solutions to win customer searches.

 

 

 

 

The solutions for the above-mentioned website design are formulated in Information Architecture (IA) to optimize the presentation of Flowstate.agency’s new face effectively communicating messages and strategies to audiences.

Designing Solution

"It's Time to Hit the 'Refresh' Button on the Website"

The design phase of the Flowstate.agency website presents several challenges, particularly in creating a block-style website with easily digestible and fast information delivery. I conducted Wireframing & Flows, Visual Design, Illustration and Iconography, Hifi UI Design (Mockup), and Prototyping and Interaction Design. To ensure optimal results, I created several hi-fi design samples and presented them to Simon and Paul for feedback (A/B testing).

 

 

Testing & Iteration

"Review and Testing for the Perfect Styling Experience"

In our commitment to quality, I conducted an expert review alongside Paul Johnson and performed usability testing to ensure the excellence of our new website. A productive collaboration with Paul and Simon resulted in a successful usability testing phase. There were only minor feedback regarding UX writing, promptly addressed through iterative processes until achieving the optimal version.

 

 

 

Finally, design documentation was compiled to facilitate hand-off to the Webflow developers. This documentation provides comprehensive details on the Flowstate website design, enabling developers to implement it with precision and deliver a pixel-perfect website.

Results

"Once again, Flowstate's flowstate has brought forth meticulously planned success."

Here are several achievements resulting from the refinement of the Flowstate website:

 

Achieved Objectives:

  • Audience Conversion: Increased by 28%, demonstrating significant progress in converting audiences into active customers.
  • Brand Awareness: Enhanced by 43%, aligning perfectly with Flowstate’s goal as an innovative email marketing brand agency.

 

 

Optimal User Experience:

  • Click-Through Rate (CTR): Skyrocketed by 97%, indicating a more interactive website with clear and easy navigation.
  • Bounce Rate: Decreased by a factor of 7, from previous audience retention times of 2-9 minutes to 63 minutes. This signifies heightened audience interest and engagement with the new Flowstate website.

 

 

 

 

The redesign project of the Flowstate.agency website showcases my dedication and ability to collaborate with the company’s internal team. Working closely with Simon and Paul Johnson, we successfully completed this exciting and challenging project, including accommodating Simon’s desire to implement a block-style design on the new website.

 

My expertise in understanding client needs and translating them into innovative solutions proved instrumental in this project. I am delighted with the collaborative outcome and look forward to the opportunity to work with you on future projects.

Contribution

"I achieved these successes together with Flowstate."

A/B testing, Design Documentation, Expert Review, Hifi UI Design (Mockup), Illustration, Illustration and iconography, Infographic design, Information Architecture, Prototyping and Interaction design, Stakeholder Insights and Discussions, UI Styleguide And Design systems, UI/UX Brief (PRD), Usability testing, Visual Design, Wireframe & flows, Wireframing
design_diary_thumbnail_incluude

Enhancing Usability for the Incluude Platform

Incluude is an innovative platform developed through a collaboration between researchers, community members, and the Cultural Atlas team. It serves as a comprehensive directory and resource hub for religion and culture, providing valuable insights to support diversity, inclusion, and well-being.

design_diary_thumbnail_creativehub

Support and Create an Inclusive Creative Ecosystem through Empowerment

The Creative Hub is an innovative platform born out of the need for an ecosystem in the creative industry that lacks sufficient support for sustainability. Recognizing the challenges faced by the creative community regarding limited access to resources, connectivity, and necessary opportunities, owner Simon Laughin holds a strong vision to create a space where individuals and groups within the creative industry can grow, learn, collaborate, and access meaningful opportunities.

design_diary_thumbnail_givetree

GiveTree Contributes to the Goodness of Charitable Causes and Makes the World a Better Place for Everyone

GiveTree is a platform developed by Sam Joel that combines the NFT (Non-Fungible Token) market and the metaverse world with the aim of creating a positive impact on the world. Every transaction on this platform is environmentally friendly and contributes to charitable organizations. Artists can also utilize web3 and NFT technology to generate income while supporting charitable causes.

design_diary_thumbnail_guardgrooming

I Make Guard Grooming Always Competitive in Providing and Serving Customers So as to Become a Leading Hair Removal Brand

Guard Grooming is a leading Australian company specializing in hair removal products. With strong scientific research behind their product formulas, they are committed to providing safe and effective hair removal solutions for all skin types. Guard Grooming products are specifically designed to provide satisfying results without causing irritation to the skin, by prioritizing quality and safety in every product they offer.

design_diary_thumbnail_zimble

Zimble Integrated Solutions for Multi-Channel e-Commerce Businesses

Andy is the owner of Fishhead, a digital agency based in Sydney (fishhead.com.au). I have had the pleasure of collaborating with him on several projects and have become a valued client for my design services. Their team comprises some of the finest developers in the city, making working with them both enjoyable and effortless