Building Heiltsuk Nation’s site to grow, not just to be patched together.
My Contributions
UI Design
Usability testing
Prototyping
User research
Mobile Responsiveness
Company
Burst! Creative Group
Team
1 Product manager
1 Lead designer
1 Product designer (me)
Duration
6 weeks
Tools
Figma
AI
Illustrator
Overview
Heiltsuk (Hel-sic) Nation came to Burst, looking to create a digital space that can capture their community, culture, and history.
Burst! Creative Group brought me on to this project during my internship to rebuild the website to be more structured and scalable, while preserving the client's identity, such as their colours, community images, and typeface. I was appointed to be the main designer on the project, but there were only a few weeks left before my internship ended. To speed up the process, I used Claude AI to support the brainstorm-to-mid-fidelity process, then built and tested the pages one at a time. By handoff, I was able to incorporate most of the client's content and was ready for developing.
Before I left Burst!, I made sure to leave a separate set of mobile screens, along with developer comments so the project could be handed off smoothly to the next team.
Problem
As the Heiltsuk community grew, the existing website could no longer accommodate their expanding content.
Heiltsuk Nation was already an existing client of Burst. I was first brought in to add more content to their current website, but as I worked with the site, I noticed opportunities to improve its structure and make navigation more intuitive for the users.
For example, some of the additional updates were implemented as pop-ups, or content blocks throughout the page, making it increasingly difficult for users to find or revisit information. I recognized that the current website could pose challenges for the client's discoverability, recruiting new members, relaying other crucial information, and expanding the website.
Discovery
I gathered the requirements from Heiltsuk Nation, and we worked together to synthesize the information.
When I proposed revamping the website, the clients were excited about the idea, sharing that they actually had a lot more content they wanted to add, but had been limited by the same structural issues I noticed. For instance, the client wanted to include sections like daycare, social development, and health & wellness, which didn't fit into any of the existing menu sections. This was something I had to consider moving forward.
Keeping the content requirements in mind, I made multiple iterations on their sitemap, until I landed on five main sections, each able to hold its own sub-categories without needing a redesign every time the client added more.
Ideation
As the main designer working under a tight timeline, I used Claude AI to prototype two possible directions.
For the homepage, we weighed two options. Option one leaned into a classic homepage: full-bleed hero, a band of feature cards, then a content grid. Option two was a sidebar-driven interior page, closer to how a typical news site is organized. I built both prototypes, compared them side by side and asked my co-workers for their input to gain a more critical perspective and concluded that using option one's homepage structure was the better choice, as it was less overwhelming, letting users funnel into the content they want to access.
However, option two's sidebar feature was not fully scrapped. Instead, we decided to restructure this sidebar exploration into one sidebar, not multiple, and implemented it on the individual content pages. This gave us more ways to store information on pages, without making them too long.
Early feedback
Once my designs had been reviewed and approved by the client, I worked together with the client on the copy to refine and test the prototypes.
I prototyped and tested the entire website, incorporating feedback from both internal team members and the client as I went. Given my tight schedule, having to rebuild the menu every time a new section came in wasn't an option. So I built each row as one component in a repeatable auto-layout stack. To add a new section under the menu, we simply had to duplicate a row and rename it, as laid out in the figure below. Nothing else had to move. This made it possible to keep adding sections through the rest of the project without redesigning the menu each time.
One of the main reasons we decided to go with this side menu was to help guide visitors from a broader entry point, and funnel them towards more specific content. Looking at how other websites handled deep category nesting, the side dropdown made sense, allowing users to view more organized content at their own pace.
The figure above displays how the side bar will fit into the content pages. The content column allows the user to drill down into their desired sections.
The mega-menu concept.
A standard dropdown would have worked fine, but it felt plain. It didn't show off what the client had to offer, like their beautiful land and culture. This wasn't something they asked for, but we saw an opportunity. Our lead threw in an idea: what if we replaced the dropdown with images instead? Sustainability and a thriving future are central to the client's mission, so showcasing their land and community felt like a natural fit.
I went ahead and designed what it could look like. I worked out the overall layout, where the text would sit on each image, and how the hover effects would feel. I also tried to pick images that represented each navigation heading. Thankfully, I was met with positive responses from the clients, and they decided to move forward with it.
That said, the image-based menu came with trade-offs. It wouldn't scale well past six main sections, every section needed its own unique image, and the imagery could pull attention away from the navigation itself. We walked the client through all of this, and they were comfortable accepting those trade-offs for the experience it created for their website.
Mega-menu concept that was mocked up for the client to view.
Final design
Ideation paid off: the final design ties the homepage, mega menu, and category pages into one flow the client and developer could walk through before building.
The final design was a clear improvement over the existing website - it had a much smoother flow, intuitive navigation and room to expand down the road. We also looped in the developer early to talk through what was feasible to build, so there wouldn't be any surprises later. From there, we sent the designs off to the client so they could click through the prototype themselves and share any feedback.
Before: the old homepage, a single page that just kept getting longer as content was added.
My internship was coming to an end during development.
Though I would have loved to see the developers build from my wireframes, my final task was to prepare my work for hand-off. Since I wouldn't be around to answer questions, I annotated the interactions right in Figma, also putting together a separate set of mobile screens to make sure nothing got lost in the handoff.
Reflection
Set the pace early.
This was my first time leading a project this big, and as the main designer, there was no one to set the pace for me. I had to figure it out as I went. Next time, I'd plan out my timeline from day one and check in with the team more often, so feedback comes early instead of piling up at the end. I knew from the start that I only had a few weeks, and looking back, I could have moved faster and gotten feedback sooner.
Design for the person after you.
Since the website was not launched when my internship ended, I had to ensure the team or developers who picked up the project after me were able to understand my work. I did this by documenting decisions and my thought process in enough depth that someone new to the project could understand.
AI as a force multiplier.
AI tools played a real role in expediting the project. It didn't replace design judgment, but it gave me a way to move faster at a stage where I was the only designer driving the process, especially useful given the timeline.
Built to hold up.
The moment I felt the redesign really came together was when I developed the category structure. I validated the website's scalability by adding new content and confirming that the structure could accommodate it without needing a redesign, which solved the main issue. The site hadn't launched yet by the time my internship ended, but knowing the structure could grow on its own gave me confidence that it was built to last.
Other works
