Project Background
Bhlen, founded in 2014, is digital platform that specializes in creating uniquely personalized lists, called Bhlen Links, that connect users with local restaurants, businesses, hotspots, and more. Bhlen’s website did not effectively communicate their offerings, and they hired me in November 2024 to redesign their website.
The Goal
Develop a cohesive, clean design style that appeals to the wide range of individuals and industries that Bhlen caters to. Clearly showcase how Bhlen Links help businesses and end-users, and ultimately convince potential stakeholders and business partners to partner with Bhlen.
The Team
Lee Fisher (UI/UX Designer)
Jaimey Bembry (Bhlen Co-Founder, Director of Operations and Business Development)
Benjamin Tett (Bhlen Co-Founder, Director of Engineering)
Tools Used
Figma
Google Suite
Zoom
Timeline
7 weeks total
1 week- research
2 weeks- low fidelity wireframes
4 weeks- style guide, high fidelity wireframes, handoff
Phase 1: Research
After meeting with the client and learning more about Bhlen, I was able to narrow down the scope of the project and hone in on the goals defined in the above section. Bhlen’s main focus for many years was to build their technology and connect with local businesses, and, like many small businesses, a lot of their progress was lost during the COVID-19 pandemic. Now, with their technology fully developed, they wanted to focus on the user experience. Their current website was mostly blank, consisting of their logo, some FAQs, and a link to their blog. They wanted my help in redesigning their website to better communicate their offerings and make it easier for potential partners to learn more about how Bhlen Links can be an invaluable tool to further their business. We decided on a mobile-first approach- prioritizing a mobile web design over a desktop design to start with. Jaimey mentioned how he’s often out and about when networking, and having a fantastic mobile website that he could show from his phone would be a fantastic resource.
Key Takeaways
I conducted a heuristic evaluation of Bhlen’s current website and a competitor analysis of one direct competitor and two indirect competitors. My main findings are outlined below:
Make it obvious
Clearly explain the benefits of partnering with Bhlen right on the home page (preferably high up in the hierarchy). We want to catch user attention quickly and make sure they know who we are and what we do.
Eliminate common pain points and anticipate needs
Follow usability standards and make it easy to navigate the website. Anticipate user actions and needs and provide obvious solutions to create a seamless experience.
Prioritize aesthetic and minimalistic design
Limit the color palette, fonts, and images in order to create a cohesive design that appeals to a wide audience.
Phase 2: Low Fidelity Wireframes
With my research complete, I began ideating possible layouts for Bhlen’s new home page. A few screens from the first iteration can be seen below.
My main goal at this stage was to organize all of the information I needed to showcase in an easily digestible way, paying particular attention to the information hierarchy. After a few rounds of feedback, we decided on the following structure:
After talking with the client, we decided to update a few things. I originally had the “who we are” section immediately beneath the hero section, but the client wanted users to see examples of Bhlen Links more quickly. Additionally, the “Our Sponsors” page was added in order to have a place to showcase future Bhlen sponsors and to provide an opportunity for potential sponsors to reach out.
Phase 3: Style Guide
The client told me they were completely open to updating their brand colors, so I decided to slightly tweak the colors from their original logo. The changes are subtle, but I feel really elevated the design and work beautifully as the colors used throughout the final design.
I chose the middle blue shade from the logo as the primary brand color, and used that color to tint the black and the white in order to create a more unique, harmonious design. For the type styles I knew I wanted a different font for display text versus heading/body text, but I wanted both to be sans-serif in order to keep in line with the modern feel. I decided to use two fonts from the same family and further differentiated between them though the letter spacing. Finally, I chose icons and designed buttons and cards. You can view the style guide below.
Phase 4: High Fidelity Wireframes
With the style guide approved I began translating the low fidelity screens into high fidelity. My initial design for the Bhlen Link example cards felt flat and lacked visual interest, and so I decided to add drop shadows and neutral yet attractive images. Instead of clickable arrows, I opted for the user to be able to drag to scroll through the cards. I updated the pagination indicators below the cards to mirror that dragging motion, rather than simply changing color to indicate which card the user is on.
I created a clickable prototype so that the client could see my design in action and the developer can see how I imagine the interactions working. They were incredibly pleased with my design, and I am very excited to see it come to life.
View the prototype here.
Reflections and Thanks
I am so grateful for Jaimey and Benjamin’s trust in me throughout this project. I learned so much throughout this process and I am really proud of how the final product turned out. I’m very excited to see how this new website helps to expand Bhlen’s business.
I’d like to thank the whole Bhlen team (Jaimey, Benjamin, and Lola) for their valuable feedback and I look forward to future collaborations.