HAN Website Design 

 ux/ui  •  branding  •  identity

 

 

 

 

HAN Website Design 

 ui/ux  •  branding  •  identity

 

 

 

HAN Website Design 

 ui/ux  •  branding  •  identity

 

 

 

Overview
Huntington Angels Network is an organization that connects Northeastern affiliated start-ups with angel investors and venture capitalists. The main goal of this project was to increase HAN's professionalism and credibility through a brand identity refresh and developing a new marketing website from scratch.

 
Role
Project Lead
As a project lead, I led a team of two developers and three designers. I defined project scope and timeline as well as mentored fellow team members in a fast-paced and collaborative remote work environment. I led weekly internal check-ins, client presentations, director crits, and working sessions for four months. 
Role
project lead
As a project lead, I led a team of two developers and three designers. I defined project scope and timeline as well as mentored fellow team members in a fast-paced and collaborative remote work environment. I led weekly internal check-ins, client presentations, director crits, and working sessions for four months. 

Increasing Communication and Raising Awareness
A Brand Identity Refresh to Improve Thier Online Presence. 

HAN_checkerboard_right_1-min

Purpose
As a part of Mosaic's entrepreneurial ecosystem, Huntington Angels Network is dedicated to helping venture backable companies with the fundraising process to foster a supportive community and professional networks for the new entrepreneurs.

Huntington Angels Network (HAN)'s executive members reached out to Scout looking for a website rebranding to increase their professionalism and credibility. As a student organization engaging with investors and venture capital firms, HAN wanted to highlight their trustworthiness and confidence. HAN also aimed to better position themselves within the Northeastern's entrepreneurship community to become a reliable and well-respected resource. One of the most important criteria of this project was to enhace HAN's position through a clear, informational website. HAN wanted this new website to improve the experience of all of thier user types—potential investor and venture partners, potential student, and current students—so that anyone who visits the site can leave with a clear understanding of their mission, values, and recruitment / partnership process. 

UX Design Process: Discover & Define 

Agile Design Sprints
To follow the agile process within our short timeline, we immediately entered our user research phase by conducting user interviews with our client stakeholders. Based on our interview findings and our strategic working sessions, I spearheaded the team through the User Stories Development process and created a detailed set of user stories for each persona group that we have defined.

Then, we developed an expansive site map in order to maximize the user's experience and communicate the information as straightforward as possible. We wanted to ensure that all the necessary information was clearly laid out for each of the audience groups and the flow of each page was smooth. Using our site map as a reference, we also defined and prioritized key pages to ensure the delivery of a Minimum Viable Product (MVP) throughout the rest of our design process.

HAN-use s-min
HAN-sitemap-min

Low-Fidelity Wireframe Development
Once the user stories and site map were clearly defined, we developed a thorough set of low fidelity wireframes. Again, we primarily focused on information architecture and hierarchy at this stage so these wireframes were completely greyscaled with no branding elements. We presented our process and direction during our weekly director reviews and client presenations. Additionally, I encouraged the team to continuously iterate and refine by providing constructive feedback during our weekly internal reviews and working sessions. 


lofi-han-min

UI Design Process: Brand & Identity Development

Branding Voice Exercises
While the Define & Discovery phase of the UX process was happing, we also completed a series of brand voice exercises together with the client to identify their new identity. These activities allowed us to define HAN's new voice and understand the qualities that should be emphasized in the rebrand. We discovered that our focus would be to increase communication and raise awareness through a minimally clean yet inviting design approach.

HAN_PL
HAN_bannercaption_2-min

Two final moodboards that range from expected to boundary pushing.

Determining Visual Identity
With our new direction, we transitioned into our design strategy process, where we began to explore more specific brand elements, such as colors, typography, UI elements, image treatments, and an example of a stylized UX block. Our designers provided three distinct design strategies to explore all the different options that meet our client's criteria. With the emphasis on increasing credibility and professionalism in the investment world in mind, we initially explored ways to incorporate colors and line overlays to stand out against the intentional, white negative space. Our client wanted to maintain the soft gold element of the existing brand, so we chose soft, toned-down colors that would complement the gold and convey trustworthiness.

However, as we continued on with our development, we discovered that this new visual identity was straying away from the minimal and striking look the client had originally imagined. To accommodate this pivot, we revisited our initial design strategy and searched for a way to be cleaner but bolder. As a result, we increased the brightness and saturation of our color palette and streamlined the graphic treatments to just color overlays.

HAN-three-min

In the meantime, we went through many rounds of logo refinement. Our client wanted a new logo that was more modern and clean to go with the new visual identity. We explored various different approaches—from very minimal, abstract, to literal ones. However, after many rounds of refinement, we circled back to HAN's existing wing logo to keep the sentimental value. We cleaned up the wing to be more geometric and modern and paired it with HAN's new sans-serif typeface.

Final Design

High-Fidelity & Final Sprint
While the designers were wrapping up the low-fidelity wireframes, I worked closely with the developers to troubleshoot any feasibility issues and manage the development timeline. As a non-developer project lead, I wanted to make sure that my developers felt supported and their workload was manageable. Thanks to our very understanding client team and extremely talented developers, we were able to deliver the final product successfully.

The new website is now live. Check it out below!

High-Fidelity & Final Sprint
While the designers were wrapping up the low-fidelity wireframes, I was working closely with the developers to problemshoot any feasiblity issues and manage the development timeline. As a non-developer project lead, I wanted to make sure that my developers felt supported and their workload was managable. Thanks to our very understanding client team and extremely talented developers, we were able deliver the final product successfully.

The new website is now live. Check it out below!

hifi-han-min