Circlez

Circlez is an innovative B2C mobile app that assists individuals in achieving personal goals by fostering a community of like-minded users. Users can join or create "circles" to track progress, set goals, communicate, and motivate each other, enhancing accountability and engagement.

Problem

Achieving personal goals is often hampered by a lack of sustained motivation and discipline, particularly when pursuing them in isolation. Recognizing this, our client sought to create a mobile app that connects individuals with similar aspirations, thus providing a communal space for encouragement and joint progress tracking.

Solution

We designed Circlez to allow users to connect with others who have similar aspirations, creating a collaborative environment where individuals can encourage each other and track progress together. By offering features such as group goal setting, progress tracking, and in-app messaging, Circlez transforms the solitary pursuit of personal goals into a collective experience. This enhances accountability and enriches the journey toward goal fulfillment with peer support and inspiration.

Tools Used

Figma
FigJam

Illustrator
Slack

My Role

Project Duration

UX/UI Designer

11 Months

Zoom
Google Suite

Discovery

Kickoff

The journey of Circlez began with an initial briefing where our client shared their vision for a mobile application that would revolutionize personal goal achievement with our team lead. Understanding the significance of community support in maintaining motivation, the client envisioned an app that connected individuals with shared aspirations. This session was crucial in setting the direction for our design process.

Client Questionnaire

Gathering Essential Insights

Following the kickoff, we initiated a comprehensive client questionnaire phase. This step was pivotal in refining our understanding of the client's specific requirements and expectations for the Circlez app. The questionnaire was meticulously designed to extract detailed information, ensuring our design approach aligned closely with the client's vision.

Key Questions and Client Responses

The questionnaire covered various aspects of the app's design and functionality. We asked about the client's preferences for color schemes, typography, and overall UI design, emphasizing the importance of integrating gamification elements. We also sought clarity on the roles of users within the app, specifically differentiating between those who would create circles and those who would join them. The client's responses provided critical direction:

The client preferred using the colors from the Circlez logo as primary colors, with a recommendation to adhere to UI best practices for typography.
While the client was flexible regarding UI design, they stressed the significance of gamification features to enhance user engagement.
It was specified that users creating circles would have control over access and all editing features within those circles.

Ideation

User Stories

At the beginning of the project, we sent our client a questionnaire, and based on their responses, we created a list of user stories that we would build on for the remainder of the project.

As a user, I want to create a circle
As a user, I want to add goals to my circle
As a user, I want to invite others to my circle
As a user, I want to send a message to my circle
As a user, I want to log progress in my circle
As a user, I want to accept an invite to join my circle
As a user, I want to accept a friend request from my notification screen

User Flows

Building off the user stories we could extrapolate from our client questionnaire, we set our sights on building user flows to determine the most important features we needed to organize around and what screens would be most important.

The process of developing these flows was collaborative. Each team member was assigned a user story, and we individually worked on creating corresponding flows. Regular peer review sessions were held to ensure consistency and coherence across all user flows. These sessions were critical in identifying and addressing potential design gaps or overlaps, particularly for screens standard across multiple flows, like the home and circle screens.

The outcome of this phase was a set of refined, user-centric flows that laid the foundation for the subsequent wireframing stage. These flows were pivotal in visualizing how users would interact with the Circlez app, ensuring that their journey from onboarding to achieving their goals would be seamless and engaging. My contribution in this phase was designing specific flows and actively participating in discussions that shaped the overall user experience of the Circlez app.

Due to the time zone differences of our team, I worked on the initial design of the home screen, which was very important in shaping other team member's user flows.

Low-Fidelity Wireframes

During the wireframing phase, my primary focus was on developing the home screen and its integral components. This involved designing an intuitive, user-friendly interface for navigating the notifications page and efficiently managing friend and circle requests.

The client's vision for a simple yet functional user experience guided my design process, emphasizing clarity and ease of use. My task was to ensure that users could effortlessly access notifications and respond to requests, tethering seamless social interactions within the app. This required careful consideration of layout, iconography, and interactive elements to create a cohesive and engaging experience.

Collaboratively, we fine-tuned these wireframes, ensuring they aligned with the client's expectations and enhanced the user's journey in Circlez. My contribution in this phase was pivotal in shaping a home screen that served as a central hub for user interactions, laying a solid foundation for developing a visually appealing and effective user interface.

Design

UI Inspiration

In crafting the Circlez app, we meticulously selected several applications as sources of inspiration, specifically focusing on their use of circular elements to enhance aesthetics and usability. Our objective was to incorporate as many circular design elements as possible without compromising functionality. Two examples of such are:

Makeitapp:

Our exploration led us to Makeitapp, a versatile platform known for developing native applications for iOS and Android, often used for creating educational games and quizzes. The app's design, mainly circular shapes and icons, provided a valuable reference point. We admired how Makeitapp effectively utilized rounded design elements to create an engaging and intuitive interface. This helped us conceptualize how circular elements could be integrated into Circlez's UI without sacrificing user experience.

Fitness Tracking App:

Another significant source of inspiration was a popular fitness tracking app. (On the bottom left). We were intrigued by its layout, which featured circular icons in a clean, left-aligned format. This design choice aligned with our client's vision for circular motifs and demonstrated how to maintain functional simplicity. We drew on this approach to develop Circlez's log progress and progress screens, ensuring they were user-friendly and visually consistent with the overall design theme.

UI Iterations

Our team adopted a unique approach: each member independently iterated on the home screen design. This method was chosen to ensure a broad exploration of styles, which would later define the overall feel of the app. Maintaining a cohesive look across the app was paramount, and the home screen, being the most crucial, served as the starting point for this stylistic journey.

During this phase, we worked individually, allowing for diverse ideas without the risk of homogenizing creativity. We used my medium-fidelity wireframes as a foundation, branching out to experiment with different color schemes and design elements. This independent exploration was vital in identifying which styles were most effective and which didn't align with the app's intended aesthetic.

My contribution focused on experimenting with dark mode themes. Aware of the general preference for Dark UIs, I aimed to explore how this could be integrated into Circlez. However, despite the popularity of dark themes, it became clear that this direction did not fit with the client's vision for a gamified-style app. As a result, this iteration was set aside and didn't pass the final voting in favor of a design that better matched the app's playful and engaging nature.

The iterative process was critical in allowing each team member to bring unique perspectives to the table. Through individual exploration and subsequent collective reviews, we were able to converge on a final design. This design not only resonated with the client's preferences but also adhered to user-centric design principles, resulting in an engaging and intuitive home screen.

Selected UI

Style Guide

As part of the Circlez project, we developed a comprehensive style guide to ensure consistency in our design approach. This guide included detailed specifications for typography, iconography, color palettes, and UI components. It served as a crucial reference for our team, facilitating a cohesive visual language across the app. The style guide, developed in tandem with high-fidelity wireframes, was essential in streamlining the design process and ensuring that every element aligned with the overall aesthetic and functional vision of the Circlez app.

Hi-Fidelity UIs

As we progressed to creating high-fidelity user interfaces, our central focus was on refining the design to ensure a consistent visual style and seamless user interaction. My primary role involved aligning the notification screen with the overall aesthetic of the app, adhering to the principle of intuitive usability. This meant simplifying designs and avoiding elements that could disrupt the user's experience.

The revision process was guided by the key user-centric design principle of intuitive interaction. We aimed to create an interface that users could navigate effortlessly, without the need to learn new functionalities. This approach was crucial in adjusting the notification screen design, where I opted for simplicity and familiarity, drawing it closer to the initial wireframe concept.

As the client introduced additional features, our challenge was to integrate new screens and functions without compromising the app's intuitiveness. This step involved a delicate balance of covering all necessary functionalities while "trimming the fat" - removing any superfluous elements that didn't contribute to a streamlined user experience.

Throughout this phase, our team worked diligently to ensure that each design change not only enhanced the visual appeal of Circlez but also adhered to the ethos of user-centricity. The final high-fidelity UIs were a testament to our commitment to creating an interface that was not just visually engaging but also highly intuitive and user-friendly.

Developer Handoff

Measurements

For the development handoff phase, precise measurements were crucial to ensure a smooth transition from design to development. To achieve consistency and accuracy, we utilized the measure plugin in Figma, which allowed us to provide detailed dimensions and spacing for each element within our high-fidelity designs. This tool was instrumental in accurately conveying the design specifications, such as the size of buttons, spacing between elements, and layout proportions, ensuring that developers had a clear and comprehensive guide to follow. By leveraging Figma's measure plugin, we streamlined the handoff process, reducing the potential for misinterpretation and ensuring fidelity to our original design vision in the final product.

Reflection

Learnings

Working on Circlez was a profoundly enriching experience that honed my collaborative design and innovative thinking skills. Working closely with a diverse team, I contributed significantly to various phases, from wireframing to high-fidelity UI design. I learned the importance of working quickly in a team to deal with different time zones. Navigating client feedback and translating it into functional and aesthetic designs was particularly rewarding, as it pushed the boundaries of my creativity and problem-solving abilities. This project enhanced my technical expertise in design tools like Figma and deepened my understanding of how effective design can directly impact user experience and engagement.