bld.ai Redesign
- Role
- UX/UI and Product Designer
- Tasks
- User Interviews, Branding, Illustration, Design Comps, Responsive Prototypes, Strategy, Interaction Design
- Platform
- Responsive Website
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. 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 prep 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 a great opportunity to set some standards of what our identity could be. 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 I started to build 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
User Interviews & Pain Points
People cannot instantly tell what we do or have done ⚡
Our website should showcase the capabilities of what our teams can do. It should feel like a product sample itself, 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.
“We aren’t selling what we do”
— 2-year Lead PM
You have to dig for information ⛏️
While we describe who we are and what we do within the site, each page has an extensive amount of scrolling to access this content. Once you do get a hold of the information, a lot of it requires more context, since users can forget the previous content after it has scrolled past.
“I get lost on this site, the information just goes over my head”
— 2-year PM
No distinct branding or personality 💁
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 showcase who we are as well through visual cues. We need to build the sense of emotion we want users to feel on the site.
“I want something modern and simple, but this is too simple”
— 2 year ExCo
Plan
Goals
Simplify information 🤏
We explain ourselves primarily through texts, which many users may not take the time to completely read through. So we need precision and simplification. All relevant information to a container should be visible without scrolling.
Scaling 🌍
Our largest goal is scaling, and to become a global name. Simplifying content would also aid in this. The more that users understand, the more potential we will have for engagement. We must also make sure to not use any language that may set limitations on what we can do.
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.
Iterate
Landing Explorations
Iterate
Icon Explorations
Iterate
Landing Explorations
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.
Plan
Navigation
I saw that in our previous navigation there were items that could be combined and room to add priority items. Since our main goal was sales and hire, it was important to highlight the type of work we’ve done, the services we do, careers, as well as a call-to-action to chat with us as needed. Other elements like processes, tools, and solutions can be combined and explained throughout the site in a digestible manner. These elements would be important to emphasize on our home page, services, and work.
Design
Landing Page
My goals with the landing page were to give prospective clients or talent coming in 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.
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 different 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. In comparison to our previous headline “We build digital products that you own”, I believe by 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 is a module that can be reused as needed to briefly explain our selling points and values. 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, and that is to build something beautiful together.
Design
Hiring
Previously users who were 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.
Iterate
Primary Nav Screens
Design
Mobile
Design
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 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 members of the company could leave specific comments on elements they would like to see modified or explored.
prototype
Web Animations
Reflection
Takeaways 💫
Asychronous indepdence
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 others wanted 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.