Growing the TRUE brand to better serve Hawaii’s businesses
Fresh out of bootcamp, I took on a freelance project. Working within Wordpress, I focused on getting the navigation and information architecture right.
Opportunity
Seize new opportunities by reworking and rebranding this site
TRUE creates a pathway for established Hawaii businesses to become tech-enabled through free events and valuable resources. By capitalizing on existing content, and restructuring for better visibility, we were able to increase engagement by local businesses.
Problem
One page that overflowed with unsearchable information
The TRUE website lacked navigation, was disorganized and wasn’t clear about what they offered leaving businesses confused and ultimately not engaging. Additionally, post-event feedback was low, offering little insights for improvements.
Solution
Drive engagement through dynamic content
To better showcase TRUE’s offerings, we restructure existing content, building new pages with clear actions that drive users to attend upcoming events, and learn about their resources that get local businesses informed, involved, and invested.
Discover
Taking an eagle eye to the current website experience
At the start of the project, I took note of the information overload on one page that lacked hierarchy and engagement opportunities for users to learn more.
At first glance
While the most important information was at the top, there wasn’t enough details that answer questions a business might answer after landing on the page: “What type of technology solutions?” ”How do I get involved?”
Overall, the first impression wasn’t engaging, nor did it give the feeling that this initiative was future-facing.
Lots of content, no way to search or filter
The bread and butter of TRUE was their free events that are valuable resources for businesses. There were 16 different events about various topics, but no way of knowing what type of topics. Also, text was within the imagery, so it wasn’t easy to search.
Important information low and unclickable
Another piece of valuable collateral for businesses was TRUE’s use cases. But this content was sparse, buried at the bottom of the page, without the ability to click on the image for more information.
Looking at comparative sites for inspiration
TRUE is a unique case because there are no direct competitors. I focused on comparative companies such as accelerators and major event platforms to discover how they talk about themselves, showcase events and share resources.
Define
Working within the limitations…
There was no budget to redesign the site and needed to be built within the current platform, WordPress. I took some time to learn the platform and templates through online tutorials and spoke with a developer to understand early on what could and couldn’t be done.
…and making some assumptions
Due to the lack of survey responses, I needed to make assumptions about the type of questions businesses might ask if they were to visit the current website and how the new design could help answer.
I did a solo exercise where I looked at each main section of the site and wrote questions a business might ask.
For example, a business might ask: “What kind of technology can I learn about?”
This influenced the design decision to create a tagging module on the homepage that shows technology topics that clicks through to that particular resources.
Creating structure out of existing information
One of the main requests from the client was to figure out a way to make it easy for users to filter through their vast array of topics. Due to the limitations of WordPress, we needed to come up with a creative way to showcase their offerings.
Tagging topics
Before we could design anything, we needed to understand the many forms the current content takes. To do this, my design mentor and I set up a working session with the client to define a set of tags against each resource:
Working in Mural, on the left is what the client wanted the original navigation to be. On the right, was part of our working session where we listed out every event and added tags to each event.
Redefine how TRUE talks about themselves
We started to add naming conventions around what happens after an event takes place. This influenced the information architecture and how the client talked about their offerings.
Design
Drawing on inspiration to implementing design decisions
Homepage
The homepage has a large hero image that showcases attendees at one of TRUE’s packed events with the mission statement and call to action button where a user can learn more.
To provide further details about what happens when a business works with TRUE, I wrote brainstormed keywords users should associate with TRUE (Collaborate, Cultivate, etc), and provided more context under each.
Tagging filter
Below “Our process” was the result of the tagging exercise. Here a business would be able to toggle between different tagging categories to search based on their needs.
New About page
The original TRUE website had all the information on the homepage. In the redesign, we took the opportunity to create a detailed About page that featured equally important information on its own that could be accessed by clicking the “Learn more” button.
Deliver
While most pages could be created by me in WordPress within the means of the existing templates, there was custom coding that needed to be done. We were able to partner with a local company and leverage their developer interns.
I collaborated closely with the development team via Zoom calls and Slack to bring the design to life ensuring every detail was pixel perfect. Additionally, we created documentation on how to maintain and create new content for the client, making the transition as seamless as possible for them to continue to do business.
A happy client
It was a race to the finish line, but we were able to get the site live on time for a major event.
“I am super appreciative of all your work and coordination for this project. This is above and beyond expectations!”
…and happy numbers
Lessons Learned
Designs will be designed as they are seen
Even though I tried to match the design to the WordPress templates, there were still things that wouldn’t match exactly. It took playing around in the template to get it right. But when the design was handed over to the developers, they began to hard code templates to match the mockups, which was good but creating new complexities.