HYPE

Dynamic website for premier young professional organization

The Challenge

Young professionals need a community that can help them flourish and grow throughout their careers and make meaningful connections with like-minded peers. HYPE is that community but it does not hold influence in the crowded Houston marketplace.

Houston Young Professional & Entrepreneurs (HYPE) is one of the few young professionals group in the city that offers professional development and meaningful connections to the early-career business community. HYPE is able to curate such high quality events because it is a branch of Greater Houston, a business advocate for the Houston region.

Key Goal

Design and build a custom CMS website so HYPE can clearly position themselves as the premier young professional organization.

CHALLENGE

At project start, potential members don't know that HYPE existed, just read their Facebook page reviews from 2017!

Project timeilne

From strategy through development, it took the team 6 months to launch.

Tools

Paper and Pen
Google Docs
Sketch
Webflow
Trello/Slack

Year

Summer 2018

My Role

I was the visual designer for the website

This was my first major project on the job. I was designing mockups from start to finish, the lead designer helped me flesh out ideas before internal reviews and showed me the ropes. My proposed mockups would go through a few internal sessions before I presented them to the client.

My Role

  • Visual Design
  • Secondary Research
  • Content Strategy + Writing
  • Webflow Development
  • Visual QA

DESIGN SPRINT

During this strategy phase, I designed and developed a splash page to announce HYPE's new logo. This design sprint generated a lot of excitement from our stakeholders and set the stage for a great partnership.

When the contract began, HYPE was approving a new logo. HYPE wanted to take this opportunity to announce the new brand and drive traffic to their HYPE email list and  social channels. In less than three weeks and with no brand assets, I designed and built a splash page that embodied the new HYPE brand.

RESEARCH

During strategy phase, I conducted secondary research and added my 2cents to the agency's recommendation list. This phase was an introduction to research fundamentals

I learned how to craft an interview dialog, create a content strategy and identify some use cases.

Two of our research goals were:

  • Define the motivation and needs of event attendees and current HYPE members
  • Understand what makes a HYPE event stand out above comparable professional programming

Market research

First I conducted secondary research to familiarize myself with professional organizations, I reviewed event programming and membership pricing of local and national professional organizations to identify event standards and user expectation.

Indirect Competitor Analysis

Building off my secondary research, I analyzed three young professional organization, indirect competitors of HYPE. I reviewed the strengths and weakness of their websites and membership structure.

Secondary Research Insights:

  • Event photos go a long way to make the group more approachable
  • Member benefits and programming should align, I found several organizations thats benefits were not reflected in their events
  • Clear event descriptions and event archive allow users to clearly understand the organizations offering

Interview Analysis
& Personas

Though i collaborated with my team on stakeholder interview questions, I was not able to attend these interviews, so I reviewed the interview recordings.

Take-aways

  • Members want to make connections with other young professionals and develop their careers.
  • Potential and existing HYPE Members need clarity on how to get involved and an easy way to register for events.
  • Sponsors choose partners to provide them with exposure in front of the right audience and promote their business. In return, they provide support to these partner organizations.

Provisional Persona

My team created simplified personas for each user type  After the project, I developed a member persona profile to learn how to better communicate our primary users needs.

To wrap up the strategy phase of the project, the team emphasized and identified both user and business goals to make our recommendations

Content

Primarily, I was the visual designer for this project. During the design phase I wrote copy for the website, collaborating closely with my team and client to get the tone (and grammar) just right.

As this was my first project on the Poetic team, I learned a wide-range of lessons from research fundamentals to client communication in all mediums.

After this project was complete I developed a chart of priorities. I remember the design lead and i struggling to develop a sitemap for the project, I believe creating a prioritization chart would have helped us create and get approval of the sitemap

Design

With a clear path forward, the team moved into design. The most time was spent designing the homepage because it determined the design style for the rest of the site. After several internal review rounds, I was able to present design to the client directly in person and during digital meetings.

Low Fi

When starting a new page design, I sketched my ideas out on paper to get a good grasp on how components could work together.

Homepage

I took the opportunity to get creative with color and photoshop because we had minimal photo assets and no brand guideline at project start. The HYPE logo is quite complex and colorful, I relied on colorful gradients to achieve a fun but clean site.

Goal of the page

Emphasize connecting with peers at the best young professional events in town

hero

Most HYPE members hear about the organization through their event programming. We state HYPE's value to potential attendees and create a clear path to the event page.

Navigation

Become a Member is the emphasized page in the navigation because HYPE's overall goal is to build a large member community.

Clarity

From the top, the homepage consistently addresses both sponsors and potential members need of clarify who HYPE is and what they are all about.

Scroll to view this mockup

EVENTS

Goal of the page

Allow potential attendees to skim upcoming events that fits their schedule

Event List and Filters

During the design phase, I experimented with lots of new colors and several tagging systems. In the end, we kept a simple tagging system where a hexagon icon notates a high-quality event.

Membership Chart

Educate users on the value of a HYPE membership, anticipate users questions about membership

Scroll over the image to view the entire mockup

Membership

Goal of the page

Educate users on the value of a HYPE membership, anticipate users questions about membership

Testimonials

After stating HYPE's mission, we showcase several testimonials that emphasize the quality of events and the connections memebers have made through HYPE.

Membership chart

HYPE has a membership but their events can be attended by non-members. To reduce confusion at events and on the back-end, we call professionals who do not pay dues: Community Members.

Scroll over the image to view the entire mockup
View the Live Site

Outcomes & Lessons

Both HYPE and their parent organization have reported increase in email signup, membership inquiries and increase in page traffic.

Professionalism

This was the my first major project on the job. I learned how to practice and present mockups in person and online to internal teams and to clients — I spent a lot of time typing.

Visual Design

I think creating a mood board for the website design would've helped me narrow down the style of the website quicker.


more work