Design Portfolio

CW

1on1 Social

UX Research | Mobile App Design

Untitled design (2)

Project Overview

1on1 is a networking mobile app designed to make connecting in Web3, a blockchain community, easy and efficient. The app allows individuals to effortlessly swipe and match with like-minded professionals who share similar interests and goals.

My role was to conduct UX research on competitor apps and work with a team to create the mobile app prototype, information architectures, app branding, and key components. 

I conducted a series of user interviews and developed user personas to better understand the target audience’s needs, preferences, and pain points, which informed the design decisions and helped optimize the app for a seamless user experience.

Details

Role: Product Designer

Duration: Dec 2022 – May 2023 

Tools: Figma

Defining the Scope

At the beginning of the project, I created a roadmap to outline our overall design process. This roadmap was essential for visualizing each phase of the project, ensuring we had a clear plan to follow. It allowed us to track our progress, stay on course, and make sure we didn’t overlook any important steps.

User Research

At the core of all design is empathy; we are designing to solve a problem or meet a need, and understanding the user’s experience is essential to creating solutions that are meaningful and effective. Before we can even think about the design process, we need a nuanced understanding of our audience. That’s where user research comes in. 

Through a series of user interviews, I aimed to identify the pain points, motivations, and goals of Web3 professionals.

I created a few guiding questions that would give me an overarching direction, then crafted a series of focused questions designed to reveal insights about how these individuals currently network, what tools they use, and the barriers they face in forming meaningful connections.

Here were several critical questions that I considered:

Research

Guiding Questions

what are the main pain points for individuals trying to enter the web3 community?

Which specific web3 professionals should we target?

How should we design the user interface and experience to cater to the needs of web3 individuals?

I conducted several 30-minute interviews with individuals in the Web3 space.  I chose individuals within a range of experiences, from a college student in a blockchain club to a veteran engineer working as a Web3 developer. Because the app was going to be for several different demographics, we needed to encompass multiple use cases and personas. These interview sessions allowed us to delve into their expectations, challenges, and preferences for a professional networking app that would meet their unique needs.

Below is a summary of the key insights we gathered from these interviews, which guided the design and development of the app.

Research

User Interview Findings

Needs

  • Simple navigation menu
  • Search bar for professionals and specific industries
  • Ability to customize user profiles
  • Real time messaging and notifications

Wants

  • Ability to have unlimited connections
  • Sharing profiles with external individuals
  • Design centered around Web3, catered to users
  • Professional but welcoming aesthetic

Desires

  • Integration with Web3 Platforms and Credentials
  • Easy and simple onboarding process
  • Connection recommendations Based on interests and goals

KEY CONCEPT: 

One striking takeaway from these user interviews was that it is important to not make design assumptions. Instead of relying on our own assumptions, the insights gained from real users provided valuable perspectives that we hadn’t considered. By listening to their needs, pain points, and preferences, we were able to challenge our initial ideas and validate later design choices. This process not only helped us avoid common design pitfalls but also ensured that the final product would be truly user-centered, addressing actual problems rather than perceived ones.

User Personas

I then developed user personas to gain a deeper understanding of our target audience. These personas provided visual representations of various segments within our consumer base, encompassing both young professionals and veterans, enabling us to tailor our product features and design elements to better meet the needs and preferences of each group.

'The Web3 Veteran'

'The Young Professional'

UX Research & Competitor Analysis

Then, I began researching and analyzing competing social media apps and mapping out their user flows. This involved a deep dive into the user experience of several popular platforms, including Hinge, Bumble, and Snack.

As the lead for UX research, I conducted a thorough analysis of these apps, paying close attention to the design elements that contributed to a seamless and intuitive user experience. I examined everything from onboarding processes to in-app navigation, identifying the features and interactions that made these platforms easy to use and engaging for their audiences.

Through this research, I was able to pinpoint the design principles that fostered a cohesive user experience, such as consistency in visual design, clear and intuitive navigation paths, and the effective use of interactive elements. These insights were instrumental in shaping the development of our app.

I paid attention to the subtle differences in the onboarding processes of these applications, aiming to determine what would be most effective for users in their 20s and 30s.

The landing page was another critical focus, as it serves as a user’s first impression of the app. I emphasized the importance of a visually concise home screen and an efficient sign-in process to create a seamless and inviting user experience.

I also conducted a case study on Snack, a newly launched app centered around video content. Given its recent emergence, I focused on analyzing the elements that contributed to its early success. This included examining its user interface, engagement strategies, and unique features that resonated with users. Understanding these factors provided valuable insights into effective design and functionality for emerging apps in the video content space.

In addition, I created a moodboard featuring colors and design details from various Web3 apps. This moodboard served as a source of inspiration for developing our own color palette, helping us identify trends and establish a visual direction that would appeal to our target audience while maintaining consistency with the Web3 aesthetic.

Lo-fi Designs

Using insights from the user interviews and competitor research, we began prototyping the onboarding process and developing low-fidelity designs.

I started by creating wireframes for the sign-on process and designing mockups for the key pages. This helped visualize the user journey and refine the initial layout and interactions.

We also defined the core features for our navigation bar, settling on five sections: Search, Likes, Matches, Messages, and Profile. I mapped out how each section would function and appear to users, ensuring a clear and intuitive navigation experience.

From the user interviews, it became evident that profile customization was a crucial feature for any social or networking app. I focused on integrating options for users to personalize their profiles with photos and relevant experiences, as well as providing a preview of how their profile would appear to others.

Information Architecture

Next, I created a detailed visualization of the user flow, mapping out a comprehensive outline of how users would interact with our app. This involved designing a flowchart that captured each step a user would take, from initial entry through various interactions to completing their tasks within the app.

By mapping out the user journey in this way, we were able to ensure a logical and intuitive progression, allowing us to refine the user experience and streamline navigation.

Brand Aesthetic

With the initial drafts complete, our next step was to establish the app’s color palette and brand identity.

We had two distinct options to consider: one theme featured vibrant neon colors, aimed at capturing a playful and energetic vibe that would appeal to the more dynamic side of Gen Z. The other theme used bold primary colors to convey a more professional and polished appearance.

Screen Shot 2023-08-29 at 1.20.45 PM

Option 1

Screen Shot 2023-08-29 at 1.28.15 PM

Option 2

After surveying over 300 participants aged 18-35 with the question, “Which color palette would you prefer for a professional networking app?”, 71% preferred the more professional theme (Option 2). Based on this feedback, we selected this color scheme as our final choice, and it also served as the foundation for our logo design.

We proceeded to finalize other design elements, including fonts, buttons, and icons, ensuring consistency and alignment with the chosen color palette. Additionally, we created a moodboard to guide the app’s visual direction and maintain a cohesive design throughout the development process. 

Screen Shot 2023-08-29 at 1.37.45 PM
Screen Shot 2023-08-29 at 1.37.26 PM
Screen Shot 2023-08-29 at 1.42.00 PM
Screen Shot 2023-08-29 at 1.41.42 PM

Prototypes

We then started developing the UI designs for our app, focusing on key components to ensure a comprehensive and engaging user experience. This included designing the landing page, which needed to be simple and effective. 

We also crafted the sign-on process to be intuitive and user-friendly, facilitating a smooth onboarding experience. Profile customization was another critical area, allowing users to personalize their profiles with relevant information and visual elements to enhance their networking opportunities.

Additionally, we designed the search functionality around efficiency, enabling users to easily find and connect with other professionals within the network. Each design element was developed to ensure a cohesive and streamlined experience, aligning with our brand identity and addressing user needs.

Screen Shot 2023-08-29 at 2.28.38 PM
Screen Shot 2023-08-29 at 2.29.15 PM
Screen Shot 2023-08-29 at 2.29.28 PM
Screen Shot 2023-08-29 at 2.29.41 PM
Screen Shot 2023-08-29 at 2.29.55 PM
Screen Shot 2023-08-29 at 2.30.04 PM
Screen Shot 2023-08-29 at 2.30.19 PM
Screen Shot 2023-08-29 at 2.30.59 PM
Screen Shot 2023-08-29 at 2.31.18 PM
Screen Shot 2023-08-29 at 2.31.47 PM

From there, we made several design adjustments, including:

  • Removing the onboarding steps caption, as it appeared too large and unnecessary.
  • Introducing an “Objectives” page to allow users to select the category or purpose for using the app.
  • Simplifying the interests page by enlarging the bubbles to make it less overwhelming.
  • Updating the design of the referral graph to improve its visual appeal.
  • Making minor grammar and wording adjustments for clarity.


These changes were implemented to achieve a cleaner and more sophisticated look, which is demonstrated in the demo video below.

Demo Video

Conclusion

Working on this project has taught me a variety of skills in product creation, UX research, and competitor analysis. One important takeaway was the need to adapt to different challenges and understand that designs are always subject to change; it is up to the team and designers to effectively communicate and implement these new ideas. 

Questions for future work: 

  • What is the emotional response we want an app to evoke?
  • How can microinteractions and animations enhance the overall experience?
  • How will the app evolve over time with scalability in mind?