NETWORK NEXT GEN

Designing a responsive website to help creatives network and build lasting relationships.

COMPANY OVERVIEW

Network Next Gen connects A-list designers in their 20s-30s with top Design Brands and Manufacturers. By hosting dinners for a curated group, young designers are able to easily connect with one another over personal design journeys and various design topics.

MY ROLE

UX Research, UX Design, UI/Visual Design, and Product Management. I performed market and user research, and also validated ideation with a participatory design activity. I facilitated the usability tests and also completed wireframes, prototypes, and revisions. I also coordinated with the developer to ensure a smooth product launch.

THE CHALLENGE

Even though Network Next Gen has great success with in-person dinners, their users struggle to stay connected with one another afterwards. Network Next Gen’s online presence is limited to social media and an outdated website that most users don’t utilize.

How might we help Network Next Gen establish a stronger online presence and help people within the network stay connected and feel like part of the community?
‍
See Prototype

DISCOVERY

Project Kick-Off:

CONNECTING WITH PROJECT STAKEHOLDERS

I arranged a meeting with Network Next Gen’s CEO and head of marketing. It was important for me to start this project by introducing myself via video call, giving a brief overview of the design process, and establishing weekly meeting times to allow for progress review and feedback. The purpose of this initial meeting was to set project milestones and gain a better sense of their business needs and goals.

PROJECT ASSUMPTIONS

By asking open-ended questions during the interview, we uncovered three big insights/assumptions about their business goals and existing website. I used these as a starting point for my research.
‍
Here’s what I learned:
Assumption 1:

Designers are currently not utilizing the website

Both the CEO and the Head of Martketing felt that designers were not visiting the website and using the resources on there. However, both felt strongly that the resources and blog were important for the community.
Assumption 2:

Developing the design blog will draw in users

The CEO is very passionate about this new project and felt that once the blog is more established, users will want to visit the website more for project inspiration.
Assumption 3:

Next Gen’ers want an online community

Looking ahead, Network Next Gen sees a more developed website that includes a featured blog and an online community where Next Gen’ers can stay connected. They also hope to expand to more cities.
Research:

HYPOTHESIS VS. VALIDATION

Before I started my research, I created a research guide to help me define research goals, assumptions, and methodologies. This allowed me to organize my thoughts, identify which methodologies would be most effective for this type of project, and generate a solid direction/timeline for my research. I shared this document with my stakeholders to set expectations accordingly.
Find my full research plan here
Secondary Research:

UNDERSTANDING THE MARKET

I wanted to gain a better sense of Network Next Gen’s target demographic, networking strategies amongst designers, and how professionals keep in touch.
‍
Here’s what I found:

9 in 10 people

say small meetings are their favorite communication method
‍*EICC

99.9%

of people say face-to-face meetings are essential for long-term business relationships
‍*NCMA

85%

of jobs are filled through networking
*NCMA

68%

of entry-level professionals value face-to-face networking more than online
*EICC

IDENTIFYING THE COMPETITION

I also conducted a competitive analysis of Network Next Gen's potential competitors to evaluate their strengths and weaknesses.

Based on my stakeholder interview, the CEO and head of marketing felt that there currently wasn’t anything like their organization out there. This was true, however, I did find several other organizations that also focused on connecting designers and architects and creating a community within the design industry. I studied the following companies to gain a better sense of how they are approaching networking strategies:
Products I analyzed for the competitive analysis.
Primary Research:

CONNECTING WITH USERS

Time to talk to the users! My market research supported Network Next Gen’s business goals and aligned with their strategy. I wanted to hear from their current user base to get a better sense of what their experience has been like partaking in Network Next Gen’s dinner and other networking events.

To begin, I arranged in-depth 1:1 interviews with 5 Next Gen’ers between the ages of 20 – 38, who are currently working at different architecture/design firms across the US. I focused on gathering qualitative data to gain a better understanding of their goals, needs, motivations and frustrations. The goal was to collect enough data to determine user patterns.

See my full interview script here
Research Synthesis:

LETTING THE DATA TALK

Following user interviews, I compiled all of my intel onto virtual sticky-notes. Creating this affinity map allowed me to quickly group commonalities together and better understand behaviour patterns and frustrations within users.

See my full affinity map here

KEY DISCOVERIES

The affinity map opened my eyes to a couple of interesting insights.
Here’s what I learned:
Key Insight 1:

People thought the email invite was a scam

100% of participants said that Network Next Gen’s email invitation felt like a scam with most designers getting invited the day before the dinner. The existing website did not ease their mind about the authenticity.
Need: People need to feel confident that Next Gen’s event is real.
Key Insight 2:

Designers want to hear about other’s experiences

100% of participants said that the dinner was a great experience. They were all deeply inspired by everyone’s raw honesty and felt more connected to the community by the end of the event.
Need: People need a safe space to forge genuine connections.
Key Insight 3:

Designers want to be a part of the design community

All participants formed meaningful connections during the dinner but did not have a good way of staying in touch afterwards. Due to this, these new relationships slipped over time.
Need: People need to maintain business relationships

TESTING THE EXISTING SITE

I also felt it important to test their existing website. Based on the feedback I received from my stakeholders, I realized that the site needed to be tested by people who fell within Network Next Gen’s key demographic (up and coming designers in their 20s-30s) but who were not yet a part of the network. I wanted to collect unbiased data from individuals who hadn’t interacted with the site before and who were not familiar with the company’s concept.

I arranged usability tests with 4 designers between the ages of 20 – 38. The intent was to gain a better understanding of their initial impressions, ease of use, and pain-points.

USABILITY TEST DISCOVERIES

By recruiting participants who were not familiar with Network Next Gen, I was able to gain a better understanding of initial impressions and how first-time users navigate the site. The affinity map allowed me to quickly identify interesting user patterns and pain-points. These findings played a key role in determining the information architecture and content of the new site design.

‍Here’s what I learned:

RESEARCH FINDINGS PRESENTATION

After I compiled my research findings, I created a presentation deck to share with my stakeholders. It was important for me to relay my findings to them before moving on the the next phase of the project. Presenting this to them was one of my favorite moments during the process! It allowed me to show them patterns they had previously not considered and helped us move the project forward in a harmonious manner.

During my interviews with current Next Gen’ers, it became clear that the blog may not have the desired impact that my client was hoping for. I relayed these findings as well but the CEO was adamant about proceeding with the development of the blog. They agreed that solving for ways to keep communication going between designers after dinners was important.

We also took this meeting as an opportunity to discuss bringing a developer on board to help build-out the website once the design was completed. As my client would be maintaining the site themselves after project completion, I strongly advised bringing the design to life on Webflow. This would allow them to make adjustments more easily without needing to implement code.

After getting the green light from my Stakeholders, it was time to dive into the next phase of the project!

DEFINE

Empathy Map
I was able to break my findings down even further by utilizing the patterns I uncovered to create an empathy map. This allowed me to connect to Next Gen’ers on an emotional level and kept the design process human-centered.
Persona

SAY HELLO TO BLAKE

Once I gained a better understanding of Next Gen'er's motivations, needs, and frustrations, I applied all of my findings and created the project persona. This persona is used throughout the design process to ensure that I’m designing for the users. Meet Blake!
Journey Map

DINNER WITH BLAKE

In order to fully understand Blake’s mindset, it was important to visualize what it would be like to walk in her shoes. I created a journey map by using all of the data gathered during interviews with Next Gen’ers and the usability test results. Based on this, it became apparent that the two biggest pain-points were getting the email invite and keeping in touch with peers met at the dinner.

DEFINING THE PROBLEM

In order to create human-centered design solutions with the collected data, I constructed POV statements using the user insights and needs from the research phase. This allowed me to frame problems from the user's perspective.
In preparation for brainstorming, I developed “how might we?” questions for each of my POV statements. These needed to be broad enough to encompass a wide range of solutions, but narrow enough to set constraints.

With the overarching question on my mind being: How might we make Blake’s networking experience better? I honed in on three specific questions to initiate brainstorming:

HOW MIGHT WE HELP BLAKE...

feel more confident about attending the first Network Next Gen event?

feel more connected to
other designers?

maintain business relationships?

CRAZY8s - THE SKY’S THE LIMIT

After defining the HMW questions, I began brainstorming possible solutions for each by conducting a couple of Crazy8 exercises. The intent for this activity was to generate as many ideas as possible without yet considering technical feasibility.

Crazy8s Reflections

This activity allowed me to quickly explore many different solutions to the HMW questions. I was particularly drawn to the idea of connecting Next Gen’ers to one another via the job portal. Since the COVID-19 pandemic impacted the architecture and design industry dramatically, many individuals within Next Gen’s network were looking for new opportunities. I felt that this would be an organic way to incorporate the missing connection component and could help give Next Gen’ers an incentive to reach out to one another.

Story Board

I wanted to think through this idea a little more. I decided to create a story board to visualize how users might interact with a feature like this on Next Gen’s website. I developed a possible scenario and then sketched out my idea.
Scenario:
Blake is looking for a new job and utilizes Network Next Gen’s job portal
After completing the storyboard, I had a quick call with my Stakeholders to share my design ideas with them. They were excited about the direction we were taking and encouraged me to develop this concept further. They also wanted to look into creating a Slack community and were considering incorporating this on the website in the future.
Information Architecture:

CARD SORTING

One of the biggest pain-points that emerged from usability testing of the existing site was the content organization. In order to develop a successful design, I needed to first examine the site structure and user expectations when interacting with the content. I decided to engage the audience further by setting up a card sorting exercise on OptimalSort. This feedback allowed me to gain a deeper insight into user behavior and allowed me to divide the content into five main categories:
What we do
Our locations
Meet our sponsors
Industry tours
Event photos
Attend a dinner
Feature/Spotlight
Design resources
Design inspiration
Job listings
Apparel

SITE MAP

I then developed a site map to structure the content above further. This allowed me to get a better sense of the site’s skeleton and how pages might interact with one another. Given my stakeholder’s feedback about wanting to create an online community, I wanted to have a placeholder in mind for possible future integration. Beta testing of this concept will be done on an established platform (such as Slack) first to gain a better sense of how an online community like this might be organized. This is why “members” is indicated as Phase 2. The intent is for this concept to be developed further in the future.

UNDERSTANDING INTERACTIONS

After creating the skeleton of the platform, I began thinking about how my persona, Blake, could interact with each page to complete a certain task. I created a task flow diagram to understand what a user might go through when engaging with the new features.

IDEATE

Wireframe Sketches

Once I analyzed all of my data and defined my solution, it was time to put it all together! I quickly sketched out a few ideas to loosen up and not get too bogged down on one type of layout right away. It was important to explore multiple layouts quickly and push myself out of my comfort zone. It’s better to have too many ideas to work with and reel yourself back in!

Lo-Fi Wireframes

After sketching out some loose concepts, I quickly organized a few lo-fi wireframes to make my ideas more concrete. This was an essential part of the process as it allowed me to solidify my concept and visualize the problems.

Homepage:

Jobs Page:

Job Listing:

Job Listing:

BRAND REFRESH

Once I reached a good point with wireframes, I shifted my focus to branding. Network Next Gen was looking for a branding refresh that would allow them to stay current and reflected their company spirit. I was very inspired by their culture and their target audience. Their users are young, fun, and dynamic. My goal was to create something timeless that also represented the social nature of their company. Much like Network Next Gen, my approach to the design was soft / gentle meets direct / bold. In my mind, the speech bubble reflected this perfectly. I prepared three schemes to present to my stakeholders.

DESIGN PROGRESS PRESENTATION

Once the wireframes and branding packages were at a good place, it was time to present my design concepts to my stakeholders and the developer. I scheduled another Zoom call with them and walked them through the wireframes and branding concepts. The above style tile was the favorite. Everyone was also very excited about the preliminary layout of the wireframes. The stakeholders and developer had a couple of great comments regarding some of the structure and the copy. With their comments in mind, I began developing the Mid-Fidelity wireframes and prototype!

BRINGING THE DESIGN TO LIFE

After finalizing the branding and UI components, I directed my attention back to my digital wireframes. I realized that some of the components that emerged through my branding exercise impacted my original layout ideas. I made the necessary changes and began developing my medium fidelity wireframes/prototype with direction on content from my stakeholders.

Homepage:

Jobs Page:

Job Listing:

Journal:

Journal:

‍
See Prototype

TESTS & REVISIONS

TESTING THE NEW SITE

The testing stage is my personal favorite - it’s where you’re able to see the design in action and observe how users approach the given tasks. The goal here is to identify areas for improvements, uncover confusion, and validate/invalidate assumptions. How are users going to interact with the design?

Before conducting usability testing, I outlined my plan and goals for the exercise. Given the current circumstances, I decided to facilitate testing via Zoom calls. I requested all participants to walk me through their thought process as they worked through the tasks I presented them.

I recruited 6 participants ages 24-36 who fit into Network Next Gen’s key demographic (young designers) but were not familiar with the company. Participants were able to complete the tasks I put before them with minimal to no issues.

Design Iterations:

LISTEN, OBSERVE, IMPROVE

While participants were running through the tasks, I observed what they were doing via screen share. I was able to collect great intell from each session. I complied these into another affinity map by clustering sticky-notes with common themes together. By forming these groups, patterns began to emerge and I was able to identify key areas for improvement. My main goal was to ensure the design was human-centered.

Key Insight 1:

People were confused about connecting with Next Gen’ers on the Job Page

Original:

Added a link that would take users down the the feature section

Iteration:

Observations:

5/6 participants had trouble finding the “Connect with a Next Gen’er” feature. They didn’t realize that the link was located at the bottom of the page.

5/6 participants thought the dark blue background indicated the end of the page and didn’t scroll further.

Thought-Process:

Since some participants weren’t scrolling all the way down due to visual confusion, I relocated the feature to the top of the page.

DESIGN HIGHLIGHTS

After addressing the main pain-points of participants, I took some time to look at the positive feedback. The burning question on my mind: were the design assumptions validated during testing?

Highlight #1:

Clear layout and smooth navigation

6/6 users commented on ease of use and were able to find the target content quickly.

“I really enjoyed this, everything was clear and intuitive.”

Highlight #2:

Fresh branding and storytelling

5/6 users commented on the company branding and cohesive storytelling. It sparked interest among participants.

“This looks like a really cool concept - I want to join!”

Highlight #3:

Inspiring content and resources

4/6 users commented on design resources and feeling inspired by the available content.

“The jobs section is really helpful and the design journal is fun.”

MODIFYING FOR BUSINESS GOALS

After making iterations based on user feedback, it was time to share everything with the stakeholders and developer. I presented my design and user testing results to them and was eager to receive their feedback. The developer didn’t foresee any major issues with the proposed design. The stakeholders were very excited about the product. Before preparing the hand-off package for the developer, my stakeholders wanted me to make two crucial adjustments that were important for their business goals:

Stakeholder Comment #1:

Add a link for the new Network Next Gen Design Zine

Original:

Added a banner at the top of the hero image to the Zine

Iteration:

Stakeholder Comment #2:

Adjust content sequencing on the Homepage

Original:

Adjusted layout by moving the Design Journal up and adding a testimonials section

Iteration:

DESIGN HAND-OFF AND COORDINATION

Once the design was approved by the Stakeholders, I prepared a hand-off package for the developer. This included branding guidelines, UI kit, the prototype, and spacing requirements. We touched base frequently throughout the process and worked through design challenges as a team. There were a few times where compromises needed to be made. One of those instances was the left/right arrow scroll I designed. Unfortunately, we were not able to integrate that on Webflow so we found an alternative design where the arrows were moved below the carousel. I really enjoyed working with the developer! It was great to collaborate, gain a deeper understanding of some of the constraints of the design, and watch the project come to life.

REFLECTIONS

I feel very fortunate to have been able to work with such a wonderful client and developer. It was really important to find a harmonious balance between the business goals and user needs. Due to the site having such diverse content, the biggest challenge was simplifying the layout and navigation. Focusing on the Information Architecture of the site allowed the content to shine and eliminated user frustration. Testing the original site design and the new design allowed me to see how much of an impact hierarchy and content organization could have on a user’s experience.

If I were to do this project again, I would want to bring the developer on board sooner. I think some of the snags we ran into could have been addressed during the design process and would have made the production phase a lot more efficient. I would also think through the page interactions more. For the prototype, I didn’t design all of the pages and the developer contacted me a few times requesting more information on the design - we were able to tackle these questions quickly together. Team work on a project is always better!

NEXT STEPS

The site has officially launched and is actively being used by designers and creatives! I will continue to check in with my client to ensure that things are going smoothly. Some of the features that were designed (Connect with a Next Gen’er) were put on hold. These may come back down the road. My stakeholders also interviewed me and the developer on our process. Below is the video of the interview and the link to the website. Enjoy!

Interview:

Live Website:

Previous Project
‍
Next Project

"I believe in the balance between dreaming and building."
- Neri Oxman

Let's create something beautiful together!