Overview

Fruitful Room is a contemporary Christian software agency offering Churchable, a versatile and customizable development platform for churches to foster congregation connections. Their mission extends beyond product offerings, as we aim to share our beliefs, goals, and mission with the community.

Challenge

The client encountered a complex challenge due to the absence of an online platform that accurately represented their digital software agency, including Churchable. This absence prompted concerns and prompted the client to proactively respond.

It was crucial for the client that visitors grasp their identity as a Christian-focused digital software agency. To achieve this, the client aimed to authentically showcase their faith-based approach and commitment to community building. They sought to prominently feature these values on their site, aspiring to establish a meaningful connection with like-minded users. Recognizing the importance of authenticity in the digital sphere, they aimed to resonate deeply with their target audience.

Essentially, the client's focus on effectively conveying their core values was a strategic move to align their digital presence with their unique identity. This emphasis guided visitors to not only understand their offerings but also form a profound connection, fostering trust and affinity with the agency.

Solution

Our goal was to craft a seamless and impactful user experience that effectively communicated the client's core values, we designed a concise yet compelling landing page.

Key Components:

1. Distinctive Sections: Organizing the page into sections such as "About Us," "Beliefs," and "Goals" allowed us to concisely present the client's identity, mission, and vision.

2. Integrated Churchable Product: Seamless integration of the Churchable product within the page unified their offerings with their mission, providing users with a comprehensive perspective.

3. User-Friendly Contact: A user-centric "Contact Us" section facilitated engagement, enabling meaningful interactions and strengthening user-agency connections.

4. Visual Cohesion: Employing a consistent visual language, we used imagery and typography aligned with the client's values, enhancing authenticity and visual appeal.

The resulting solution is a cohesive landing page that effectively communicates the client's essence while guiding users through a purposeful journey.

Process

Role

Tools

Duration

• Discovery

• Ideation

• Design

• Dev Handoff

• Reflection

• UX/UI Designer (Team of 4)

• Figma

• Fig Jam

• Google forms

• Zoom

• 5 Months

1

2

3

4

5

Discovery

Kick-Off Call

Our design team seamlessly united to forge a cohesive vision for the project, embarking on a collaborative journey that commenced with a comprehensive kickoff meeting. Within this meeting's framework, we delved deep into the project's expanse, objectives, and timelines, fostering an environment enriched by open dialogue and fostering synergistic cooperation among every team member.

The kickoff meeting emerged as a pivotal cornerstone, adeptly harmonizing the team's perspectives, elucidating expectations, and sowing the seeds for a collective and resolute focus essential to the project's triumph.

Key Takeaways:

1. Defining Scope, Objectives, and Timelines: During our discussions, the primary goal was identified: crafting a landing page. It was established that any additional pages would fall beyond the project's scope. Furthermore, we collectively agreed on a definitive timeline, committing to presenting the designs to the client within a span of five weeks.

2. Cultivating a Shared Vision: A paramount achievement of the meeting was the cultivation of a shared vision that permeated every team member. This alignment ensured a unanimous understanding of the project's aspirations and goals.

Questions for the Client

To ensure we gathered essential information and insights from the client, our team engaged in detailed discussions and crafted a set of questions. Our primary focus was to understand the client's business goals, desired outcomes, expectations for user experience, adherence to brand guidelines, and specific functionality or features they wished to incorporate.

Key Takeaways from the client's responses:

• Message and Promotion: The landing page should effectively convey that the client's business is a Christian digital agency dedicated to helping the community. It is crucial to promote the business and its product.

• Desired Outcomes: The client aims to attract more potential customers through the landing page.

• Visibility of "Churchable": It would be ideal to have "Churchable" accessible in the navigation bar or on the page. If not, at least having a dedicated block or section for it would be appreciated.

• Essential Features and Functionality: The landing page should include a contact form and social media links in the footer.

By considering these key takeaways, we gain valuable insights into the client's specific objectives, requirements, and preferences for the landing page. This knowledge will enable us to better understand and meet the client's expectations during the design and development process.

Competitive Analysis

Our extensive user research and competitive analysis yielded valuable insights that guided our design decisions. We discovered industry best practices and benchmarks, enabling us to craft a standout user experience that surpasses competitors and fulfills user expectations.

Here are the key takeaways from our research and analysis:

• Simplicity in design: We found that keeping designs simple and uncluttered enhances the user experience. A clean and minimalist approach helps users digest information more easily and navigate the page without confusion.

• Consistent use of colors and styles: Implementing colors and styles consistently throughout the page helps to establish a cohesive visual identity. Consistency in design elements contributes to a polished and professional appearance.

• Aesthetic fluidity: Our research emphasized the importance of organizing information in a way that flows smoothly and cohesively. Creating an aesthetically pleasing layout ensures effortless navigation and helps users find desired content with ease.

By incorporating these key takeaways into the design process, we can create a visually appealing and user-friendly landing page. It will effectively communicate the client's beliefs and goals while providing an intuitive and engaging user experience.

Ideation

User Stories

Drawing upon user stories sourced directly from the client, we employed a strategic approach to both fine-tune the project's scope and delve into the intricacies of the intended audience's desires and anticipations. These meticulously crafted user stories offered a rich tapestry of user viewpoints, empowering us to tailor the interface with utmost precision. This user-centric method facilitated the creation of a solution that harmonized seamlessly with the users' expectations, transcending beyond a mere design to become a truly immersive and personalized experience.

User Flows

As a team, we collaborated on crafting user flows to map out the step-by-step journey of users within the interface. These thoughtfully designed user flows allowed us to identify key interactions, decision points, and potential pain points.

By meticulously optimizing the user experience through our user flows, our primary objective was to create a seamless and intuitive pathway for users, empowering them to effortlessly navigate the interface and successfully achieve their desired goals.

Within this process, I took responsibility for creating User Flows 2 and 3, which specifically focused on navigating the Beliefs and Goals sections. My goal was to ensure simplicity while also providing users with the ability to directly access these sections from the navigation bar. Through these user flows, we prioritized a user-centric approach, resulting in a highly functional and engaging interface.

Low-Fi Wireframes

Throughout the development of our low-fidelity designs, our team placed great emphasis on revisiting the research phase, valuing the invaluable input of senior designers. Extensive team discussions played a crucial role in ensuring meticulous deliberation over design choices.

In the design process, each team member was assigned a specific section of the web page, bearing individual responsibility for creating wireframes for their respective assignments. In my role, I took charge of crafting the wireframes for the "Our Belief" and "Blog" sections. This task demanded meticulous attention to detail and a strong commitment to a user-centric approach, ensuring a seamless and engaging user experience within those features.

To explore the initial layout and structure of the user interface, we effectively utilized low-fidelity wireframes. These simplified frames facilitated rapid ideation and iteration, enabling us to gather valuable feedback early on and make well-informed decisions regarding the user experience flow. As a foundation for subsequent design phases, the low-fidelity wireframes ensured a consistent user-centric approach throughout the entire project.

Mid-Fi Wireframes

By creating mid-fi wireframes, I was able to refine the layout and aesthetics of the website, ensuring coherence and consistency across all pages. Additionally, mid-fi wireframes facilitated collaboration with stakeholders by offering a clearer visualization of the final design direction, enabling informed feedback and iteration before proceeding to the high-fidelity design phase.

This approach helped streamline the design process and ensured that the final website design effectively met user needs and business objectives.

Design

Style Guide

In a collaborative endeavor, our team meticulously crafted diverse style and typography alternatives during the deliberation phase, contributing to the final determination of the style guide. Our color choices were carefully curated to invoke a feeling of familiarity and warmth, crafting an atmosphere that beckons with comfort and allure. Drawing inspiration from delicate lavender petals and the tranquil hues of a twilight sky, we infused the design with gentle and soothing shades, along with subtle apricot accents.

Turning to font styles, our selection was meticulously guided by the aim of seamless alignment with Fruitful Room's flagship product, Churchable. We embraced elegant and legible typefaces infused with a touch of modernity, creating a harmonious visual language that seamlessly melded with the established Churchable brand. These fonts were thoughtfully balanced to ensure both readability and a contemporary, welcoming tone, enhancing the overall unity of the design.

The style guide underwent an exhaustive scrutiny as our team delved into every facet, ensuring a unified and consistent user interface. Encompassing typography, color palettes, icons, and various visual elements, this comprehensive guide stood as a testament to a meticulously curated experience, promising a seamless and cohesive user journey.

UI Iterations

Individually, we each took on the responsibility of crafting our own iterations. Once these individual iterations were completed, we convened as a team to engage in a collaborative discussion about our designs. Together, we made the decision to merge concepts from our respective designs, resulting in the creation of hybrid iterations.

After our hybrid iterations were finalized, a colleague and I assumed the responsibility of overseeing quality control for one of the UI designs. This marked the beginning of a collaborative process wherein our team adeptly integrated feedback and input from project managers and stakeholders. This iterative approach allowed us to meticulously fine-tune the layout, enrich the functionality, and polish the visual components of the interface. Our unwavering focus on user-centered design principles ensured the development of an intuitive and optimized user interface that seamlessly catered to the preferences and needs of our client and their customer base.

In the spirit of cohesive teamwork, we then presented the client with three distinct UI iterations, providing them with a comprehensive spectrum of options to consider.

The iteration my teammate and I collaboratively crafted stood out as the client's preferred and final choice. The client specifically appreciated the seamless integration of each section, likening it to a cohesive jigsaw puzzle where all elements fit together harmoniously. This recognition underscores our dedication to creating a unified and captivating user experience that resonates with the client's vision.

High-Fidelity Screens

In the development of the high-fidelity screens, our approach involved a dual strategy. We divided each section into independent assignments while fostering a continuous feedback loop among my team member and I. Beyond this, certain segments were marked for collaborative creation, most notably the "Hero Section & Footer."

Within this collaborative framework, I took the lead on crafting the "Our Belief," "Our Goals," and "Blog" sections. While my creative counterpart masterfully designed the captivating visuals for the hero section, intertwining seamlessly with the content. However, the notion to extend this connection across all sections of the website was one of my contributions. This collaborative synergy resulted in an unequivocal success, a testament to our collective efforts.

Dev Handoff

Subsequently, we meticulously annotated each section of the landing page, ensuring precise measurements and clear instructions for the development team. Our thorough detailing aimed to facilitate a seamless implementation process, minimizing any potential ambiguities and ensuring our designs could be readily understood by the development team.

Reflection

Learnings

This project has been a transformative experience that has not only expanded my skill set but also enriched my perspective as a UX designer. It has taught me the enduring importance of collaboration, user-centricity, effective communication, problem-solving, and adaptability in the pursuit of creating meaningful and impactful user experiences.

The significance of collaborative synergy became evident as my team, and I joined forces to craft a compelling user interface. The iterative process of merging our individual design concepts into hybrid iterations not only showcased the power of diverse perspectives but also underscored the magic that can emerge when creative minds unite towards a common goal.

Effective communication was another cornerstone of success in this project. Regular discussions within the team and open dialogue with stakeholders facilitated a shared understanding of design objectives and provided a platform for addressing potential challenges proactively. This experience underscored the pivotal role of clear communication in keeping all stakeholders aligned and fostering a collaborative environment.

Moreover, the project illuminated the importance of problem-solving and adaptability in the realm of UX design. Challenges inevitably arose, but each hurdle presented an opportunity for creative problem-solving. Navigating through these challenges not only honed my ability to think on my feet but also reinforced my belief in the inherent value of embracing the unknown as a catalyst for growth.

As I reflect on the journey, I am immensely proud of the impact our design decisions had on the overall user experience. Witnessing the client's appreciation for the seamless integration of design elements, akin to a well-fitted jigsaw puzzle, validated the diligence and passion that the team poured into the project. I am excited to carry these valuable lessons with me, leveraging them to continually enhance my craft and contribute positively to the ever-evolving landscape of user experience design.

Thank you for reading my case study!