DesignHub

Case study for an online design community

Frame 22 (2).png

Project Overview

MY ROLES

  • User Research

  • UX/UI Design

  • Branding

  • Prototyping

  • Usability Testing

TOOLKIT

DesignHub (1).png

TIMELINE

5 weeks, approximately 120 hours

BACKGROUND

Entering the field of design, I was overwhelmed by the amount of content and information out there. Additionally, I found it difficult to find mentors outside of sending a message into the dark void of cold outreach. After self teaching for numerous months, I enrolled in a UX Academy bootcamp where I noticed others feeling the same way. With this gap in the market I wanted to explore it for myself by designing a responsive website.

THE PROBLEM

UX Design is a growing industry, but lacks a go to platform for collaboration and professional development. The three problems DesignHub is working to solve are:

  1. Providing a platform for designers to find, save, and organize content easily

  2. Having access to reliable mentorship

  3. Staying connected in a world transitioning towards remote-first work

THE SOLUTION

DesignHub is a company focused on improving the life of designers and aspiring designers. In order to solve this problem, I will be creating responsive website designs for DesignHub.

Design Process

RESEARCH

Discovery & Immersion

My Biases & Research Goals

To get the most out of the research process, I not only outlined the research goals, but my assumptions and biases too.

As a UX Designer, working on a project that can benefit me directly is a difficult task. Jotting down my own biases helps me focus on the research, rather than what my experiences have led me to believe.

Competitive Analysis

I took a holistic approach in conducting market research to understand where the opportunities are for DesignHub. Research showed that:

  • Companies are transitioning towards remote work

  • Millennials value networking, mentorship, and career development

From here, I decided to analyze the strengths and weaknesses of ADPList, LinkedIn, and Design Buddies and noticed there were two main areas of opportunity:

  1. Design communities on Discord and Slack make it difficult to filter, save, and organize content to use in the future.

  2. The UX industry lacks a platform for collaboration and reliable mentorship

1:1 Interviews

Although I could interview anyone in the UX Design Industry, I decided to focus on the participants I like to call the “power users.” I interviewed 4 participants with various levels of experiences and backgrounds: an aspiring designer, 2 designers with 4-6 years experience, and a mentor with 10+ years experience.

Needs

  • Stay up to date on design trends

  • Form genuine connections with other designers

  • Have access to reliable mentorship

  • Organize resources and content to find it easily

  • Grow their professional network

  • Secure/trustworthy platform

Pain Points

  • Finding mentors on LinkedIn feels like sending a message into a dark void

  • Not being able to find the resource they’re looking for

  • Being overwhelmed by information without being able to digest it - white noise

  • High cost or limited access to free options

Empathy Map

After completing my research, I synthesized the qualitative data gathered from user interviews and curated an empathy map to identify patterns across users, uncover insights, and generate needs.

I discovered that no matter what level a designer is, at some point in their career they have:

  1. Felt lost trying to find accredited information on various topics

  2. Needed mentorship but not know where to go

  3. Felt the need to belong in the industry by connecting with other designers

User Persona

With the data gathered from market research, I generated a persona using the statistical knowledge I gained to represent a certain type of user for DesignHub. This persona helps me focus on tackling the most important needs and allows me to easily access the user’s goals and pains.

Although I’m only building out one persona for this case study, there is a second persona that exists for this project as well, the Mentor. To meet project deadlines, I focused on the user that needs to grow professionally through community and mentorship.

Let’s meet Rachel, a UX Designer in New York. She’s new to UX and is overwhelmed by the amount of content and is looking to connect with other designers.

DEFINE

Strategy Development

Goals, Defined

Identifying the overlap of goals was crucial for directing my product development while maintaining stakeholder alignment. These goals will later help clarify what is needed in the product and overall brand identity. 

Next, I combined these goals with my findings from competitive analysis to leverage the features I needed to have in my product. 

UX Strategy

Outlining the UX strategy prior to any beginning any designs helps align different product teams around a shared product vision. This means fewer misunderstandings, less rework, and helps teams maintain consistency across UX touch points to create frictionless experiences. Ultimately creating a successful product.

Product Roadmap

I put the solutions I brainstormed into a sorted list of product features to create a comprehensive product roadmap. Three key features to highlight:

  • Building a community for designers to connect with one another

  • Providing reliable mentorship to users

  • Allowing users to save and organize content that works for them

The Product Roadmap not only infuses the project goals into our product, but also ensures we prioritize the most important features in the development cycle, such as mentorship and community capabilities.

IDEATE

Interaction Design

Site Map

Based on my product roadmap I created a site map to plan the navigation of the site. The simplicity of the overall structure aligns with the company goals to reduce cognitive overload when users look for content.

I created two important sections for users: Community and Mentorship. The Community section allows users to find and organize relevant content; while the Mentorship area gives users the power to form genuine connections in a reliable setting.

Hierarchy and usability helped me make informed decisions when creating the relationship between the content of my product. Prototype & Testing

User Flow

Thinking back to Rachel I created this user flow and decided the 3 tasks she needs to accomplish. Those being: 

  • Looking for a new mentor 

  • Finding an article for empathy maps 

  • Finding a saved article for usability heuristics

This was essential for the steps to follow as I now ensured my site could be used to complete the tasks most important to Rachel. Developing this path helped me determine how many pages are needed, what order they should appear in, and what components are required for the user to complete the tasks successfully.

Wireframes

Ideating DesignHub was a difficult task. In order to really build out the process I created wireframes for the:

  1. Homepage and Community Page

  2. Mentor and Mentor Profile Page

  3. Onboarding Screens

I decided to design these pages based on my users' need for inspiration, information, browsing capabilities, and mentorship.

Wireframes: Responsive

After iterating on various layouts designs, I created an interface that aligned with DesignHub’s goal to be simplistic.

Creating different wireframes for a laptop, tablet, and mobile device allowed me to fully flesh out my design decisions. Each element was considered when constructing these wireframes which ultimately helped set the standard for the rest of the process. 

Designing an intuitive way to explore & sort topics

After researching how current products on the market display content, I noticed that there were two popular approaches to showing this information. 

  1. List-based: A text-based list where users can select topics displayed to them

  2. Drop down menu based: This view allows users to select the same topics, but are hidden behind a menu button that encapsulates all options

Additionally, I also worked to make the feed section more intuitive through numerous iterations. I focused on nailing down the hierarchy of content to ensure the functionality was easy to use.

DESIGN

Branding & UI Design

Style Tile

Once I completed the wireframes, I moved onto the UI Design and Brand Development part of the process. I decided to name the platform DesignHub because the goal is to make this a “hub” or a go to place for designers. The pop of purple combined with rounded elements and friendly illustrations made for a style tile that reflected my initial findings and project as a whole.

Final UI Designs

Rachel, our persona, requires a few key needs to be solved for DesignHub to be valuable for her. These needs are:

  • Connecting with other designers, especially in a world transitioning towards remote work

  • Finding and organizing resources/content easily

  • Receiving reliable mentorship

I built out different processes to ensure we solve Rachel’s most basic needs:

  • Onboarding process

  • DesignHub community pages

  • Mentorship process

  • Profile page

Responsive UI Designs

After completing my final UI designs, I adapted the homepage and community page to tablet and mobile screen sizes.

The community page was trickier to make responsive because of the numerous filters and functionalities. To reduce cognitive overload, I placed all filters everything behind a filter icon.

USABILITY

Prototype & Testing

Usability Testing

Keeping these design decisions in mind, I began to develop a brand strategy. I needed to create a product that reflected my user's goals and pain points. This meant utilizing colors and imagery that reflected a trustworthy and friendly brand. 

Task Completion Rate

  • 100% task completion among 4 participants

Wins

  • All participants felt the website was fresh, clean, easy to use and modern

  • All participants enjoyed having an area to sort, organize, and save content

  • All participants appreciated that this platform is free to all designers

REFLECTION

Final Thoughts

Conclusion & Reflection

Due to time constraints, I was not able to build out every single process for this platform. But I was able to solve the challenges I faced through in depth research, numerous iterations, and blending user and business goals to ultimately create a design platform.

Entering the field of design, I was overwhelmed by the amount of content and information out there. Trying to find mentors in the design field seemed impossible, outside of sending a message into the dark void of cold outreach.

The best way to complain about my experience is to make something, and that’s exactly what I did! I hope that one day I can develop DesignHub into a real website for designers nationwide to leverage.

Take a look at my other work ⬇

Google Fire Case Study

Google Fire Case Study

Exhale Case Study

Exhale Case Study

Justified Case Study

Justified Case Study

Next
Next

Google Fire Added feature to Google Maps to track wildfires & evacuation statuses