Chosn
Responsive web app dashboard for cultivating goal orientated connections.
Client: Chosn Founder Andre Smith
Role: Lead UX/UI Designer (Team of 5)
Toolkit: Figma, Miro, Zoom, Jira
Duration: 9 Weeks
Background: Chosn is a relationship web app designed to enhance and transform personal connections through behavioral science. This case study highlights its core features, user experience, and its positive impact on helping individuals achieve their relationship goals.
Challenge
Chosn's web app lacks clarity in communicating its core concept, leaving users confused about its purpose. The design is not operationally effective, with poor user flows and a layout that doesn't support a smooth experience. Our client seeks to revamp the app by enhancing functionality, appealing design to better engage users and convey Chosn's vision.
My Impact
I led a team of 5 designers, overseeing project timelines and providing guidance and feedback. I contributed by redesigning multiple product screens, with a focus on enhancing the dashboard experience. My work included improving user profile settings, managing profile picture changes, editing relationships, swapping goals, viewing achievements, and refining the overall layout design.
In a client meeting with the CEO and my team via Google Meet, we discussed the project scope and gathered requirements. We prepared a list of questions to better understand their needs and reviewed the current design file. The client expressed a preference for gradients and emphasized their goal of creating a platform that promotes mental health by fostering strong, connected relationships.
Our team conducted a Heuristic Evaluation of the current web app design and identified several issues:
Button colors are not WCAG-compliant.
Descriptions fail to clearly explain the purpose of sections.
Missing visual statuses prevent users from easily navigating back or exiting.
Poor visual hierarchy, misalignment, and spacing issues.
Lack of clarity on what happens next in certain screens.
Confusing wording used to define actions.
Inconsistent button placement, often in incorrect locations.
Competitive Analysis
The client shared a lot of informative articles and a competitive roadmap of features they liked about specific apps that could possibly be implemented into the Chosn brand. I researched the differences between these apps to determine what design decisions we should focus on to create our designs for this project.
I believe Calm is an excellent app to use as a reference. As a previous active user of Calm, I know that this app starts with a great on-boarding experience. It asks the users a series of simple questions to understand why a user is here. Based on the choices a user selects it will provide users with recommended content.
Promotes emotionally engaging on-boarding experience.
Personalized content by recommending the user's choices.
Clear UI patterns that direct the user and don't confuse them.
User Stories
I wanted to understand the goals Chosn intends to do in order to be a successful product for users. I took a dry-erase marker and some sticky notes to take down a few critical points to try solving the problem for users who may face using Chosn. I created a few simple statements and observations I received based on our client meeting. The most relevant insights I captured are for the design of the dashboard and user profile ideas.
How Might We (HMW)
After reviewing the research we gathered. I wanted to translate the most critical functionality and user pain points by creating these How Might We statements.
How might we implement gamification into our designs?
How might we recreate the on-boarding experience to provide a seamless functional and instructional experience?
How might we show users the importance of nudge notifications?
How might we offer challenges users can participate in and view completed challenges?
How might we show users they feel accomplished in completing certain activities?
How might we allow users to view their current goals and edit them when they want to?
Sketches
As a team, we selected the areas to focus on, and I chose the user profile screens. I brainstormed visual ideas and created sketches for key features, including adding a profile photo, editing relationships, viewing achievements, and editing goals.
First Iterations
Our team came up with some creative ideas, and we each got to design our own version of the dashboard. Since the client wants a fresh, modern vibe, I whipped up a few variations featuring gradients and calming, mental health-inspired colors. For fun, I also threw in a version using Chosn's default color palette on the right side, just in case we stick with the original look.
Dashboard Versions & Client Feedback
We pulled together the best ideas from our first iterations to craft a dashboard to present to the client. We then split into pairs to showcase a few mobile dashboard versions, using colors the client preferred. My partner and I worked on version 2. The client loved all of our design ideas and gave us clear feedback on what they liked and disliked about both versions.
Key Takeaways:
Prefers images of real people instead of illustrations.
Likes the goals progression chart
Prefers the way your goals are presented in version 1.
Likes the overall aesthetic of version 2 but prefers to use the original Chosn color palette.
Likes the way the nudges are displayed in version 2.
Likes the idea of the connections and social feed.
Style Guide
With the client's color preferences for the dashboard designs in hand, we are ready to develop a comprehensive style guide to ensure consistency across the project. Our focus was on defining the fonts, colors, typography, and iconography. We meticulously organized the design components and selected complementary accent colors that harmonize with Chosn's overall theme.
User Profile Iterations
Here are the iterations of the user profile design, refined based on feedback from both my team and the client. I updated the designs accordingly and included annotations to highlight the changes. These notes provide clarity on the improvements made, ensuring that everyone on the team is informed about the revisions.
Before & After Redesigns
Below are examples of before-and-after screens. I observed that the client's previous designs lacked clarity and omitted critical information needed for users to complete tasks effectively. The client also expressed uncertainty about designing certain screens and struggled to improve their visual presentation.
Final Design Screens
After receiving client approvals we decided it was time to redesign the rest of the screens. I wanted to make the Chosn color palette work with these designs, our focus was to make it look simple and intuitive for the users. I focused on designing the user profile and goals screens. I wanted to give users a way to add profile pictures, edit their relationships, view their achievement rewards, and edit goals.
Full Mobile & Desktop Prototype: With our high-fidelity screens now completed and approved by the client, we've developed a prototype presentation in Figma for both mobile and desktop views. This prototype clearly illustrates the user flows, aligning with the key objectives our client outlined. It also demonstrates the functionality of modals and interactive components. Click the button below to view the desktop prototype in Figma.
Task 01
When a user can add a profile picture by tapping on the icon and selecting to upload a photo or exit with the close icon.
Task 02
Users can view relationships they have added to their network here and tapping on the kebab menu will allow them to edit their connection.
Task 03
Users can view their achievements in the profile settings and see the badges they have collected for completing certain activities.
Task 04
Users can swap out a goal if they don't like their current goal. Tapping on swap and submitting here they agree to the changes and it will swap out their previous goal for a new goal.
Developer Hand-off
After we submitted our high-fidelity screens for final approval. My team and I prepared annotations for each mobile and desktop screen with detailed clarifications to help developers get an idea of the measurements they need in order to code the screens.
Conclusion
The primary challenge I faced was maintaining consistency across our designs, given the varied design perspectives within our team. To meet client deadlines and ensure cohesion, we planned meticulously and held numerous meetings to align our approaches. Despite the client's ambitious vision and the need for several iterations to refine the project, our efforts paid off. Ultimately, the project was a success, and I had the privilege of collaborating with an exceptional team to create a product that will foster stronger relationships globally.
Reached the end? Plot twist—there’s more to see!
