Design from 0-1
Design from 0-1
Establishing design that leads to growth at a new venture
Establishing design that leads to growth at a new venture
Genesis
BuildFullStack
BuildFullStack
Project type
brand identity, product identity, UX, UI,
brand identity, product identity, UX, UI,
Services
brand guidelines, component library, lead generation website, browser based IDE
brand guidelines, component library, lead generation website, browser based IDE
Timeline
4 months
4 months
Design team
Solo designer
Solo designer
Overview
Overview
Build full stack is a start up by a highly skilled and enthusiastic team of developers with an aim to help full stack developers apply the coding concepts they have learnt in practical scenarios to build real world application.
Build full stack is a start up by a highly skilled and enthusiastic team of developers with an aim to help full stack developers apply the coding concepts they have learnt in practical scenarios to build real world application.
The Challenge
The Challenge
Build full stack was a new venture. It did not have a any brand guidelines or assets. Everything needed to be built from the ground up. The challenge was to establish design principles that would help it become a timeless brand while retaining it’s fundamental identity and vision.
There was also a requirement to create a browser based IDE which the developers would use.
Build full stack was a new venture. It did not have a any brand guidelines or assets. Everything needed to be built from the ground up. The challenge was to establish design principles that would help it become a timeless brand while retaining it’s fundamental identity and vision.
There was also a requirement to create a browser based IDE which the developers would use.
Target Market
Target Market
The company focused on full stack developers with less or no experience who are unable to get placed or have been placed but find it challenging to apply the coding syntax they have learnt in real world situations.
The other market were companies recruiting full stack developers. Our program developed a pool of practically trained engineers who would perform very well. Companies had the opportunity to get ready and trained developers or use the program themselves to assess their developers.
The company focused on full stack developers with less or no experience who are unable to get placed or have been placed but find it challenging to apply the coding syntax they have learnt in real world situations.
The other market were companies recruiting full stack developers. Our program developed a pool of practically trained engineers who would perform very well. Companies had the opportunity to get ready and trained developers or use the program themselves to assess their developers.
Our Approach
Our Approach
The client’s requirement document listed:
Homepage for the brand encapsulating the product and companys’ vision while catering to our target customers
A browser based IDE
Diving head on into the homepage would be a big challenge in the long run. There would be no clear identity of the company, no guidelines for future designers to follow and no reasoning behind the decisions taken. So I revised the requirements for myself:
Study the brand’s vision, the target consumers; Explore some designs and prepare a basic brand identity and component library.
Document the guidelines and handover after feedback from the founder.
Then prepare screens with a focus on customer delight.
The client’s requirement document listed:
Homepage for the brand encapsulating the product and companys’ vision while catering to our target customers
A browser based IDE
Diving head on into the homepage would be a big challenge in the long run. There would be no clear identity of the company, no guidelines for future designers to follow and no reasoning behind the decisions taken. So I revised the requirements for myself:
Study the brand’s vision, the target consumers; Explore some designs and prepare a basic brand identity and component library.
Document the guidelines and handover after feedback from the founder.
Then prepare screens with a focus on customer delight.
The requirements before the actual requirements
The requirements before the actual requirements
I know I said it would be foolish to start directly with the screens. It’s even more foolish to contradict yourself. But yes, I started with experimenting a bit with the screens. This helped me get an idea of what kind of design needs the product would need. It would go on to save my efforts as well. Instead of spending months planning to make in-depth design libraries, it helped me set the boundary conditions based on the need of the product. It helped me balance out delivering the results along with setting up systems.
Alongside, I was also in discussions and iterations with the client, establishing the fundamental brand identity; the color system, brand messaging, some primary illustration etc. With that, I was soon ready to begin (although had already began so much). I had:
Atoms for component library
Component library
Information architecture
I know I said it would be foolish to start directly with the screens. It’s even more foolish to contradict yourself. But yes, I started with experimenting a bit with the screens. This helped me get an idea of what kind of design needs the product would need. It would go on to save my efforts as well. Instead of spending months planning to make in-depth design libraries, it helped me set the boundary conditions based on the need of the product. It helped me balance out delivering the results along with setting up systems.
Alongside, I was also in discussions and iterations with the client, establishing the fundamental brand identity; the color system, brand messaging, some primary illustration etc. With that, I was soon ready to begin (although had already began so much). I had:
Atoms for component library
Component library
Information architecture
One of my biggest learnings in UX
One of my biggest learnings in UX
Failures are seldom spoken of, but they teach the most. This was my first big project as a beginner, designing from scratch. If I played it safe, I would’ve made a template product (which is not wrong when the template is right). But to learn, I went bold.
The purpose of the website was lead generation. To enable that, a good brand identity could go a long way. Based on a short research with 10 people in my social circle, I came to know that users appreciate and even spend more time on your site if it had some unique design hooks. So I made some unique Scroll animations and interactions. The downside? Technical feasibility and business viability. While the features would delight the user, it was not technically feasible within the budget and time constraints of the business.
One of the biggest lessons I have ever learnt in UX is to marry user desirability with technical feasibility and business viability; and it was possible because of this failure.
Failures are seldom spoken of, but they teach the most. This was my first big project as a beginner, designing from scratch. If I played it safe, I would’ve made a template product (which is not wrong when the template is right). But to learn, I went bold.
The purpose of the website was lead generation. To enable that, a good brand identity could go a long way. Based on a short research with 10 people in my social circle, I came to know that users appreciate and even spend more time on your site if it had some unique design hooks. So I made some unique Scroll animations and interactions. The downside? Technical feasibility and business viability. While the features would delight the user, it was not technically feasible within the budget and time constraints of the business.
One of the biggest lessons I have ever learnt in UX is to marry user desirability with technical feasibility and business viability; and it was possible because of this failure.
Learning implemented: technical feasibility
Learning implemented: technical feasibility
I am almost too embarrassed to share the first iteration of the browser based IDE I had done. Design aesthetics wise it was good, but I had missed out on user familiarity, something which even Google kept in mind when designing their version of Microsoft office. I fixed it by the second iteration and the client was happy with that. Since then, familiarity has become a key factor in my research for any new product, adding direction to my otherwise crazy innovations.
I am almost too embarrassed to share the first iteration of the browser based IDE I had done. Design aesthetics wise it was good, but I had missed out on user familiarity, something which even Google kept in mind when designing their version of Microsoft office. I fixed it by the second iteration and the client was happy with that. Since then, familiarity has become a key factor in my research for any new product, adding direction to my otherwise crazy innovations.
Value with words
Value with words
The requirement document from the client explained the value to the user in a few paragraphs. The need was to convey the same value on the website, resulting in more lead generations.
To be able to convey the value better with typography, I did a quick observation study of 10 engineers & others of similar age. There, each individual was shown a few marketing posters of different products/services. After a quick glance, the user was asked what they remembered from the posters. Based on the study, the following observations were made:
Big & crisp typography is better recalled when there is some rhythm to the phrases.
Anything explained in 3-5 points has a higher chance of being remembered. The lesser the better.
Design which consists of one element in bold has higher chance of building recall of that particular element.
Very good contrast between focused element and the rest makes it easy to grasp.
The value of our product was conveyed based on the insights of the research.
The requirement document from the client explained the value to the user in a few paragraphs. The need was to convey the same value on the website, resulting in more lead generations.
To be able to convey the value better with typography, I did a quick observation study of 10 engineers & others of similar age. There, each individual was shown a few marketing posters of different products/services. After a quick glance, the user was asked what they remembered from the posters. Based on the study, the following observations were made:
Big & crisp typography is better recalled when there is some rhythm to the phrases.
Anything explained in 3-5 points has a higher chance of being remembered. The lesser the better.
Design which consists of one element in bold has higher chance of building recall of that particular element.
Very good contrast between focused element and the rest makes it easy to grasp.
The value of our product was conveyed based on the insights of the research.
Impact
Impact
BuildFullStack was able to validate it's idea 10x faster and test out the product better leading to easier conversion of users. The number of users onboarded is confidential, but it was a substantial increase. The brand guidelines ensured consistency and help them even today to quickly design newer screens of their product.
BuildFullStack was able to validate it's idea 10x faster and test out the product better leading to easier conversion of users. The number of users onboarded is confidential, but it was a substantial increase. The brand guidelines ensured consistency and help them even today to quickly design newer screens of their product.
My Learnings
My Learnings
Importance of balancing out user desirability with technical feasibility and business viability
working with developers to ensure designs are executable
Importance of balancing out user desirability with technical feasibility and business viability
working with developers to ensure designs are executable