bld.ai Redesign
A proposal to redesign our website to prioritize networking between potential clients and talent, maximize scaling, and showcase the quality and breadth of our products.
Overview
MY ROLE
UX/UI and Product Designer
TASKS
User Interviews, Branding, Illustration, Design Comps,
Responsive Prototypes, Strategy, Interaction Design
PLATFORM
Responsive Website
When I was first coming into bld, I was at the beginning of my industry career, so to test the waters, I was tasked with starting internal projects to prepare me for eventual client work. Sales were booming at this time, so many of our designers and PMs were too busy to focus on internal work, so it was an excellent opportunity to set some standards for our identity. Also coming in as a fresh set of eyes to the website and company, I could set parameters for what’s difficult for me to understand as a new user.
This would be a great perspective to build the designs after, since bld.ai is a startup, many users would need to be onboarded clearly into who we are, what we do, and how we do it. However, before building out the experience, I knew I had to gauge the point of view of native and long-time members of bld. This would help me establish the intent and demographic we would be seeking.
My Creative Process
Research / Plan / Design / Iterate / Test
Research
User Interviews & Pain Points
1. People cannot instantly tell what we do
“We aren’t selling what we do enough”
— 2-year PM Lead
Our website should showcase the capabilities of what our teams can do. It should feel like a product sample, like “if this is what we can do for ourselves, imagine what we could do for you?”. This helps to establish more trust and security between prospective talent and clients.
2. You have to dig for information
“I get lost on this site, the information just goes over my head”
— 2-year PM
While we describe who we are and what we do on the site, each page has extensive scrolling to access this content. And once you do get a hold of the information a lot of them require more context to understand since users can forget the previous content now that it’s already been scrolled past.
3. No distinct branding or personality
"I want something modern and simple, but this is too simple”
— 2-year ExCo
The layout is pretty straightforward. However, it doesn’t separate us from other companies. We need something to distinguish us and push our values as a brand. Currently, it is focused primarily on what we do, but we must also showcase who we are through visual cues. We need to build the sense of emotion we want users to feel on the site.
Previous site before redesign
Plan
Goals
1. Simplify information
We explain ourselves primarily through texts, which many users may not take the time to read through thoroughly. So we need precision and simplification. All relevant information to a container should be visible without scrolling.
2. Scaling
Our largest goal is scaling, and to become a global name. Simplifying content would also aid in this. The more users understand, the more potential we will have for engagement. We must also make sure not to use any language that may set limitations on what we can do.
3. Feel more emotion
Currently, the site doesn’t evoke many feelings, they feel very sterile, industrial, and robotic. Much of this comes from the language that reads are informative, however with no human nuances. While we are a software production company, we are still making products for humans, so building a connection of warmth is paramount.
4. Feel more emotion
Our current site doesn’t showcase what we offer in a digestible manner. Many elements distinguish us from our goals, workflow, process, and client output. They need to be pushed to the forefront and in a skimmable/straightforward format.
Design + Iterate
Design Explorations
Iterate
Icon Explorations
Introducing brand elements and consistency
Iterate
Hero Explorations
Creating the hero to be a product sample
Design
Final Hero
For the final iteration after feedback from multiple hats at bld, the company wanted to stick with something simple. But this time, we evoke a sense of emotion. Our tagline should be concise but bold, and ambiguous enough not to limit what products our prospects would envision. The background would also be a reel that displays relevant footage to display our values, industries, and product work. Rather than imagining a "product that you own" you can think more of what this product could look like at its best state. This will be something high quality, user-friendly, and beautiful.
Design
Landing Page
My goals with the landing page were to give prospective clients or talent all the tools they would need to understand who we are, what we do, and how we do it. The format is a hero section, a brief of what we do with stats, an about us story section, our process, client work, and partners, and then call-to-actions for each respective funnel within our pipeline.
Overall I wanted to emphasize easily accessible content, more relevant imagery, and visuals, as well as a modular format to allow a more playful form of interaction rather than scrolling.
Original process
Process redesign
Design
Concise Process
Previously it would probably take 10-page folds to get through website content, with this new module all the process content is accessible without scrolling. It is also laid out in a digestible way and is easy to comprehend from multiple perspectives. Right away you get a definition of how our process works, and what composes each step,
Design
Call to Actions
This area highlights the relationships we expect to build with users on the site. Overall, we want our community to grow and scale whether it is as a client, partner, or talent.
I also tried to focus on more human-centered and emotional language for this prompt. Compared to our previous headline “We build digital products that you own”, I believe that displaying the idea of comfort and ease will demonstrate our goal of creating products catered towards an easier way of life.
Design
Quick Pitch
This module can be reused throughout the site to explain our selling points and values briefly. It was essential to keep this simple, digestible, and appealing. I also paired it with building block imagery to symbolize the relationship we want with clients, which is to build something beautiful together.
Design
Hiring
Previously, users interested in applying had to complete a Google form and select their position through a dropdown. With this redesign, I opted to make careers its page. Here users can select between cards to get more position details.
Previously there was no way for users to view the job position details, and if they did get access, it was a google doc with the job description. With the redesigned job details page, I hoped to localize it to the website and make it more dynamic since it incorporated the newly established branding.
Design
Primary Nav Screens
Test
Responsive Prototypes
To best demonstrate the micro-animations and flow of the site, it was essential to prototype the desktop and mobile flows. This made walkthroughs during user interviews productive and efficient so that I could receive more accurate feedback and revisions towards the experience.
Real users could see how the flow would interact, the organization of content, CTA modules, and interconnections from page to page. Also since we are a global network, the prototype helped us interact asynchronously, and company members could leave specific comments on elements they would like to see modified or explored.
Prototype
Web Animations
Navigation interaction
Leadership
Partners hover state
CTA animation test
Card hover animation test
Content scroll animation test
Reflection
Takeaways
Takeaways
Asynchronous independence
As the only designer on the project it was up to me to lead the direction: from defining the MVP milestones through user interviews, keeping the Figma document organized for other members to review, and updating the prototype live. That way if I’m not there to present screens and flows, they could be straightforward for anyone coming in. This prototype was also available for anyone of our 250+ members to review or deliver feedback on.
Filtering feedback
Since we didn’t have any set foundation for our branding, everyone had varying opinions and visions of what it could be. Some preferred modern and bold, while others preferred simple and grounded. Others would want something completely out of the box or something that felt corporate.
It was up to me to take elements to separate between preference and what was required to meet our demographic needs.