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 a new marketing website. 

 
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 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.

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.

Design Process for Brand & Identity Improvement

Branding Voice Exercises
We started the project by completing a series of brand voice exercises together with the client. 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 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.

UI/UX Design Process for the Website

Agile Design Sprints
To follow the agile process within our short timeline, we also got started on the UX side of the project from the start to focus on the MVP pages. Our team created a detailed set of user-stories and 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. 

Once the user stories and site map were 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.

HAN-use s-min
HAN-sitemap-min
lofi-han-min

Final Design

High-Fidelity & Final Sprint
While the designers were wrapping up the low-fidelity wireframes, I was working 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