UI/UX Case Study: Signup Process for a Networking App
Collabo Art is a networking platform precisely crafted to bring together artists from various domains, creating a vibrant hub where creativity thrives and connections flourish. However, like other networking applications, a cumbersome onboarding procedure, devoid of personal engagement with users, hampers the platform’s potential.
My main objective was to transform the sign-up process into a welcoming gateway to a beautiful community. I established an obstacle-free process, allowing artists to swiftly establish their presence, boost their visibility, and nurture their connections on the platform, contributing to creating a more engaging and supportive environment for the artists.
My Role
UX Researcher & Designer
Project Duration
July 2023 to August 2023
Research
In the quest to optimize the sign-up process, we conducted user research, comprising of artists’ interviews and surveys, engaging 10 participants from urban and suburban areas with diverse abilities and language proficiencies. These unveiled valuable insights regarding the challenges artists face while signing up on different networking platforms.
Pain Points
1. Lengthy Sign-up Process: A prolonged sign-up process can demand enormous time and effort, requiring users to provide extensive personal information and navigate through an overwhelming series of steps.
2. No Social Sign-Up: The lack of social sign-up options discourages users who are concerned about managing additional login credentials and manually entering their information, often causing them to abandon the sign-up process.
3. Confusing Interface: Unclear labels or a disorganized layout make navigation complicated, leaving the users confused. They may doubt the platform’s usability, potentially having a direct impact on user acquisition and engagement.
Through this study, I gained valuable insights, fueling the commitment to revamp the onboarding process, ensuring a smooth entry for artists into the community.
User Journey Maps
The user journey map provided valuable insights into specific challenges users face during their onboarding experience on the platform. It emphasized the crucial need for a sign-up process that familiarizes users with the platform as well as enables them to assess and customize their account preferences at the very beginning itself.
Ideation
Creating paper wireframes was the initial step in conceptualizing the Sign-up Flow. Over a series of iterations and persistent efforts, I progressively honed the design until reaching the conclusive version. These paper wireframes allowed me to explore a range of perspectives within the website’s framework, spanning from the overarching home page to the intricacies of the sign-up process and ultimately extending to the dynamic content of the home feed.
Digital Wireframes
Sign Up Page
Designed a simplified sign-up page, focusing on minimal elements for a clean user experience. Additionally, incorporated alternative sign-up options through popular social platforms, streamlining the registration process and offering users more convenient choices to join the platform.
Introduction
Integrated an initial segment to the onboarding process that serves as an introduction. I carefully considered the main goals that artists typically strive for within the networking platform and curated a list of goals that the users can choose during onboarding. This allows the platform to customize resources and align content with the individual’s preferences and needs.
Connect Your Socials
Provided users with the capability to input their social media profiles, enabling them to expand their network connections beyond just our platform. This is a valuable feature that promotes a seamless cross-platform presence, boosting the potential for broader collaborations.
Attach Portfolio
Incorporated a specialized portfolio section to nurture community involvement — a space for artists to share work, while leveraging the community to spark discussions, connect with like-minded individuals, and foster meaningful creative exchanges. This dynamic environment thrives within the Collabo Art network.
Low-Fidelity Prototype
The low-fidelity prototype (Lo-Fi) was crafted to provide a preview of the foundational structure and flow for the sign-up journey. I crafted navigational elements and interactive button responses to offer a more tangible preview of the sign-up process. Immersing myself in the prototype, I identified areas that could be confusing or less intuitive for users, laying the groundwork for further refinement and optimization.
Usability Studies
The first phase of usability research was wrapped up after gathering insights from five participants. This research was carried out in an unmoderated setting, utilizing video feedback to record participants’ interactions with the app.
Findings
- Users would benefit from having an extra sign-up option, like using their phone number, username, or user ID.
- Users should have a dedicated section where they can specify additional goals beyond the ones provided in the initial goals section, such as looking for job opportunities.
- Users should have the ability to set privacy controls for their social media profiles and other content.
- Users would greatly benefit from receiving personalized recommendations for events, meetups, and concerts that match their chosen preferences and artistic interests.
Commenced the integration of valuable insights obtained from usability studies, incorporating participant feedback and observations into the ongoing development process. To operationalize these insights, I generated fresh wireframes, later integrating them into the existing design.
Design Iteration
Sign Up Page
Get Ashriel Waghmare’s stories in your inbox
Join Medium for free to get updates from this writer.
The previous sign-up and sign-in choices were cluttered, causing confusion and a suboptimal user experience. In response, I revamped the sign-up page with prominent call-to-action buttons and ensured a clear and easily noticeable “Sign-in” option. To accommodate alternative sign-up methods, I reorganized them into a modal, making the process smoother and more intuitive for users.
Introduction
The prior system had limited goal options, restricting users with specific aspirations from fully expressing themselves. In response, I introduced a dedicated section where users can articulate their individual goals comprehensively. This enhancement aims to cater to a diverse community of artists with distinct objectives, fostering inclusivity and engagement.
Add Your Socials
The prior setup lacked options for users to tailor privacy settings for their social media profiles and shared content. This gap resulted in limited control over who could access their information and creative works, potentially compromising user comfort and security.
To address this, I introduced a feature enabling users to control content visibility during the initial sign-up, aiming to give users greater control over their privacy preferences. This provides a safer and more personalized experience within the platform.
Updated Low-Fidelity Prototype
Crafted from the recently generated digital wireframes, the refined low-fidelity prototype provides a more accurate representation of the user interface and interactions, capturing the intended user experience more effectively.
The sign-up page now features an extra sign-up button, triggering a dialog with various options. This streamlining approach reduces clutter, resulting in a more focused and user-friendly interface.
I extended the “add connections” page to incorporate space for events that may interest artists. This expansion accommodates diverse user preferences, creating additional networking opportunities within the platform.
Design System
Colors
Cambridge blue (Green) radiates professionalism due to its calm and soothing nature, making it an ideal color for conveying reliability. Moreover, it serves as a pleasant backdrop when paired with the colors of this website.
The deep muted tones of Gunmetal (Blue) convey a sense of elegance, adding a touch of luxury to the design. It's crucial role lies in highlighting key elements, improving visual hierarchy, and enhancing user engagement, making it a valuable addition to our color palette.
Mint Cream (Greenish White) is refreshing, while Papaya Whip (Light Yellow) is delightful and warm. Both are versatile options, suitable for text content and demarcations, blending seamlessly with other colors and adding a touch of vibrancy to the website’s overall aesthetic.
Typography
Helvetica Neue stands out as an exceptional choice for website typography due to its timeless and versatile qualities. Its clean, minimalist design and neutrality ensure excellent readability across diverse screen sizes, various design styles, and content types. Moreover, its widespread availability as a web font ensures consistent rendering across different browsers and devices, promoting a cohesive and professional look.
Final Designs
Below are the mockups for the website showcasing the four main pages in the signup process after the implementation of the design systems explained previously. Hope you like them!
The prototype visually guides users through Collabo Art’s sign-up process. To skip onboarding, click on the “Skip” button below or the “Home” button at the top. This is to assure the users that the onboarding questions are optional, though recommended.
Accessibility Considerations
- The color palette has been aligned with WCAG standards, ensuring fonts and elements achieve optimal contrast for enhanced readability and user experience.
- The typographical hierarchy of specific elements has been adjusted to enhance readability and amplify their visual emphasis. This refinement contributes to a more impactful and user-friendly design.
My Take
Impact
The realization that refining a seemingly small element like the sign-up process can dramatically transform the overall perception of a website or application is truly enlightening. It emphasizes how a brand’s commitment to a user-centric experience is evident right from the outset. This relates to my UX Design journey, where even the smallest design choices have produced a compelling impact in creating a welcoming atmosphere for the users.
What I learned
The key insights I’ve gained from this project revolve around the notion that a responsive design doesn’t necessarily have to be flawless, but it must ensure a uniform experience for every user. The inclusive nature of these responsive applications plays a crucial role in compensating for any imperfections, ultimately contributing to an elevated user experience.
Next Steps
- Refining the High-Fidelity Prototype: I intend to kickstart a second round of usability studies, aspiring to tackle potential pain points and further refine Collabo Art in pursuit of achieving excellence.
- Build a mobile app for Collabo Art: To offer a seamless on-the-go experience for all Collabo Art members, I envision the platform being transitioned into a mobile application. This move is targeted at significantly enhancing the overall customer experience.
Let’s Connect!
Thank you for your time and engagement. I’m glad to answer questions, so feel free to reach out on my socials:
