PRODUCT DESIGN BOOTCAMP
Floof is a concept pet services app I developed as the main teaching project for Dribbble’s product design course. The framework of the course and this project gave me the structure to focus on developing my Figma skills, my mobile/app design acumen, and to expand my working knowledge of research methods, information architecture, the product design process/cycle and prototyping/user testing.
RESULTS
Figma has since become my main screen design tool which was one of my main goals for the course. I’m currently focused on learning advanced prototyping, design systems, and variables. Working on this project greatly improved my mobile design skills and I gave me a much more solid understanding of the product development process/cycle from initial research and discovery, to testing and refinement.
PRODUCT
DESIGN BOOTCAMP
Floof is a concept pet services app I developed as the main teaching project for Dribbble’s product design course. The framework of the course and this project gave me the structure to focus on developing my Figma skills, my mobile/app design acumen, and to expand my working knowledge of research methods, information architecture, the product design process/cycle and prototyping/user testing.
RESULTS
Figma has since become my main screen design tool which was one of my main goals for the course. I’m currently focused on learning advanced prototyping, design systems, and variables. Working on this project greatly improved my mobile design skills and I gave me a much more solid understanding of the product development process/cycle from initial research and discovery, to testing and refinement.
DEFINING THE PROBLEM
What is the problem we’re trying to solve?
We are trying to make it easy for dog and cat owners to connect with service providers for their pets.
Who are our users?
Dog and cat owners.
RESEARCH INTERVIEWS
& PROBLEM VALIDATION
With my loosely defined problem I then sought out dog and cat owners and conducted research interviews in order to validate my proposed problem as one that in fact needs solving.
Conducting these interviews helped me discover
How these prospective users think about the problem.
What the pain points in their current solution(s) are?
How can I refine or reframe the problem?
DEFINING
THE PROBLEM
What is the problem we’re trying to solve?
We are trying to make it easy for dog and cat owners to connect with service providers for their pets.
Who are our users?
Dog and cat owners.
RESEARCH INTERVIEWS
& PROBLEM VALIDATION
With my loosely defined problem I then sought out dog and cat owners and conducted research interviews in order to validate my proposed problem as one that in fact needs solving.
Conducting these interviews helped me discover
How these prospective users think about the problem.
What the pain points in their current solution(s) are?
How might we refine or reframe the problem?
RESEARCH RESULTS
Interview statistics
Quotes
Standout observational insights
RESEARCH RESULTS
Interview statistics
Quotes
Standout observational insights
POOLING AND
PROCESSING RESEARCH
I found the most beneficial aspect of the bootcamp to be the pooling of research in various FigJam workshops and parsing through that research as a group. This helped me acquire richer user research, insights, and flesh out a more refined problem statement. With that I was able to focus my ideas and solutions to address the problem statement, and the hesitations, concerns and pain points of potential users.
POOLING AND
PROCESSING RESEARCH
I found the most beneficial aspect of the bootcamp to be the pooling of research in various FigJam workshops and parsing through that research as a group. This helped me acquire richer user research, insights, and flesh out a more refined problem statement. With that I was able to focus my ideas and solutions to address the problem statement, and the hesitations, concerns and pain points of potential users.
MARKET RESEARCH
To inform my strategy and brand for a competing pet services app, I researched existing platforms, analysing features, interfaces, pricing, and customer reviews. I identified strengths like streamlined booking and personalised recommendations, as well as pain points like inconsistent certification and vetting and limited customisation. This research guided my approach, focusing on differentiation through superior user experience, transparent service standards, and a branding strategy that clearly communicated trustworthiness and reliability.
MARKET RESEARCH
To inform my strategy and brand for a competing pet services app, I researched existing platforms, analysing features, interfaces, pricing, and customer reviews. I identified strengths like streamlined booking and personalised recommendations, as well as pain points like inconsistent certification and vetting and limited customisation. This research guided my approach, focusing on differentiation through superior user experience, transparent service standards, and a branding strategy that clearly communicated trustworthiness and reliability.
REDEFINING THE PROBLEM
REDEFINING
THE PROBLEM
USER PERSONAS
With the problem statement refined and my user personas fleshed out, I then began to map out a rough user flow. Informed by the problem statement, I built out the flow focusing on finding areas and features that communicate/amplify trust and reliability while a high emphasis on simplicity/ease of use.
USER FLOW
Once I had completed several workshop exercises and had collated my groups shared user research, I created two user personas. This ensured I had the broadest data and research possible to base my persona’s on. Those persona’s would guide my creation of the brand and product.
WIREFRAMES
I started my wireframing with a simple onboarding flow, a service provider profile screen, a messages screen, and some service provider search screens.
LESSONS
LEARNED
I need to invest considerable time into increasing my knowledge of mobile design fundamentals.
I should research mobile grid systems and apply one, even for the wireframes. I can quickly explore ideas on paper but this is a good opportunity to learn mobile grids quickly with low-mid fidelity wire framing.
I need to revisit my user flow as I’m already discovering missing screens and gaps in the flow that will need to be addressed if I want to create a product that properly solves my problem statement.
LESSONS
LEARNED
I need to invest considerable time into increasing my knowledge of mobile design fundamentals.
I should research mobile grid systems and apply one, even for the wireframes. I can quickly explore ideas on paper but this is a good opportunity to learn mobile grids quickly with low-mid fidelity wire framing.
I need to revisit my user flow as I’m already discovering missing screens and gaps in the flow that will need to be addressed if I want to create a product that properly solves my problem statement.
LESSONS LEARNED
I need to invest considerable time into increasing my knowledge of mobile design fundamentals.
I should research mobile grid systems and apply one, even for the wireframes. I can quickly explore ideas on paper but this is a good opportunity to learn mobile grids quickly with low-mid fidelity wire framing.
I need to revisit my user flow as I’m already discovering missing screens and gaps in the flow that will need to be addressed if I want to create a product that properly solves my problem statement.
USER FLOW
Creating the initial wireframes helped me identify gaps in the user flow and refine the product further. This process allowed me to add much more detail, bringing this version of the user flow much closer to being ready for full wireframing.
WIREFRAMES
After a deep dive down the mobile design fundamentals rabbit hole and second iteration of my user flow I returned to my wireframes. I started by defining a grid system, a wireframe colour palette and some basic type styles following mobile typography best practices. By investing time up front my workflow was sped up signficantly. I also learned a great deal about various Figma plugins which really helped along this part of the process.
WIREFRAMES
After a deep dive down the mobile design fundamentals rabbit hole and second iteration of my user flow I returned to my wireframes. I started by defining a grid system, a wireframe colour palette and some basic type styles following mobile typography best practices. By investing time up front my workflow was sped up signficantly. I also learned a great deal about various Figma plugins which really helped along this part of the process.
USER FLOW
Throughout the wire framing process I found myself continuously returning to my user flow to adjust and orient myself in the application and updating the user flow. The user flow became less of a precise tool over time and more of a navigational tool to quickly work out the logic of missing screens or to note down features or small details of a certain area within the product.
LESSONS
LEARNED
If I was to start this project again I would have combined my wireframes and user flow into a “wireflow” rather than moving back and forth between the two. I believe this would greatly increase efficiency and make it easier to spot pain points, missing screens or logic gaps in flows.
Do not overcomplicate the flow. Let it develop organically and do not ignore edge cases in favour of “the happy path.”
Low fidelity wire framing is good for time constraints, testing ideas, but works better for me with pen and paper. It has it’s purpose in real world product development but for the purpose of this project I think moving to mid-high fidelity wireframes much earlier would have been more efficient.
Working out flows and ideas in the user flow rather than wireframing is the most efficient approach in most scenarios.
LESSONS
LEARNED
If I was to start this project again I would have combined my wireframes and user flow into a “wireflow” rather than moving back and forth between the two. I believe this would greatly increase efficiency and make it easier to spot pain points, missing screens or logic gaps in flows.
Do not overcomplicate the flow. Let it develop organically and do not ignore edge cases in favour of “the happy path.”
Low fidelity wire framing is good for time constraints, testing ideas, but works better for me with pen and paper. It has it’s purpose in real world product development but for the purpose of this project I think moving to mid-high fidelity wireframes much earlier would have been more efficient.
Working out flows and ideas in the user flow rather than wireframing is the most efficient approach in most scenarios.
LESSONS LEARNED
If I was to start this project again I would have combined my wireframes and user flow into a “wireflow” rather than moving back and forth between the two. I believe this would greatly increase efficiency and make it easier to spot pain points, missing screens or logic gaps in flows.
Low fidelity wire framing is good for time constraints, testing ideas, but works better for me with pen and paper. It has it’s purpose in real world product development but for the purpose of this project I think moving to mid-high fidelity wireframes much earlier would have been more efficient.
Do not overcomplicate the flow. Let it develop organically and do not ignore edge cases in favour of “the happy path.”
Working out flows and ideas in the user flow rather than wireframing is the most efficient approach in most scenarios.
VISUAL RESEARCH
& MOODBOARDING
With the wireframes and user flow completed I moved on to developing the brand and visual design of the application. In my visual research I looked at pet brands, illustration styles, and branding that strikes a good balance between being approachable, friendly and fun with trustworthiness, professionalism and reputability. I did a lot of research on Neobanks. Neobanks are a type of direct bank that operates exclusively online without traditional physical branch networks that are challenging the traditional banking model.
They are products that our Floof user persona’s would use and many have successfully overcome challenges very similar to my problem statement. They were an invaluable visual resource and reference in looking at how to communicate a very high level of trust and professionalism while visually setting themselves apart from competitors in order to appeal to digital native users. After compiling and analysing my visual research the first step was to loosely define a colour palette and create a moodboard.
BUILDING A BRAND
With the mood board complete I then chose 5 brand adjectives (defined by my problem statement) that emphasise the core principles of the product/brand. With the brand name, redefined problem, 5 core principles, and mood board established as my points of reference I defined a basic colour palette, selected a typeface for the brand and developed a logo, an illustration style, and an icon style.
BUILDING
A BRAND
With the mood board complete I then chose 5 brand adjectives (defined by my problem statement) that emphasise the core principles of the product/brand.
With the brand name, redefined problem, 5 core principles, and mood board established as my points of reference I defined a basic colour palette, selected a typeface for the brand and developed a logo, an illustration style, and an icon style.
MAKING IT FEEL REAL
I decided that it would be a valuable additional exercise at this stage to build out some collateral mockups and test the brand in real world scenarios. There is also the additional benefit of really testing a tone of voice and visual tone that I can refer back to as I begin to work on the visual design of the product.
MAKING IT
FEEL REAL
I decided that it would be a valuable additional exercise at this stage to build out some collateral mockups and test the brand in real world scenarios.
There is also the additional benefit of really testing a tone of voice and visual tone that I can refer back to as I begin to work on the visual design of the product and UX copywriting.
DEVELOPING
THE VISUAL DESIGN
In my previous defined icon style I built out an icon set and then replaced the icon placeholders in the wireframes. Then an illustration style and replaced the wireframe placeholders as well. Next I identified recurring UI components. I discovered outliers and paired down any unnecessary outlier components or design patterns.
I identified the most frequently used UI component, defined it as a component within Figma, and replaced it throughout the wireframes. This served as my testing environment for how to use colour for: primary actions, secondary actions, good/success, warnings, error/danger, inactive/disabled , background and text colour. After my colour system was defined I could then use that logic to apply my visual design to the rest of the application.
Once these steps were completed I did several rounds of reviewing all the application flows and marking up any inconsistencies, potential improvements, and then making those changes.
LESSONS
LEARNED
Accessibility is king. While it can be fun to inject colour and personality into your application, first and foremost it should be simple to use for the broadest user base possible unless you target user base is very specific and has little to no accessibility requirements. You can easily paint yourself into a corner with less conventional colour palettes and norm breaking design patterns.
More user testing! I was under time constraints but I think it would have been beneficial to test the visual design system on core user flows with prototyping before expanding it to all application screens.
Do not overcomplicate the flow. Let it develop organically and do not ignore edge cases in favour of “the happy path.”
Components, colour tokens, and variables can greatly speed up this process. It is best to define this at the outset of the visual design process which can then easily be updated across your screens at a later time.
I should focus on bolstering my skills in: nested interactive components, component properties, conditional logic in prototypes, expressions & formula based logic, and advanced prototyping generally.
LESSONS
LEARNED
Accessibility is king. While it can be fun to inject colour and personality into your application, first and foremost it should be simple to use for the broadest user base possible unless you target user base is very specific and has little to no accessibility requirements. You can easily paint yourself into a corner with less conventional colour palettes and norm breaking design patterns.
More user testing! I was under time constraints but I think it would have been beneficial to test the visual design system on core user flows with prototyping before expanding it to all application screens.
Do not overcomplicate the flow. Let it develop organically and do not ignore edge cases in favour of “the happy path.”
Components, colour tokens, and variables can greatly speed up this process. It is best to define this at the outset of the visual design process which can then easily be updated across your screens at a later time.
I should focus on bolstering my skills in: nested interactive components, component properties, conditional logic in prototypes, expressions & formula based logic, and advanced prototyping generally.
LESSONS LEARNED
Accessibility is king. While it can be fun to inject colour and personality into your application, first and foremost it should be simple to use for the broadest user base possible unless you target user base is very specific and has little to no accessibility requirements. You can easily paint yourself into a corner with less conventional colour palettes and norm breaking design patterns.
More user testing! I was under time constraints but I think it would have been beneficial to test the visual design system on core user flows with prototyping before expanding it to all application screens.
Components, colour tokens, and variables can greatly speed up this process. It is best to define this at the outset of the visual design process which can then easily be updated across your screens at a later time.
I should focus on bolstering my skills in: nested interactive components, component properties, conditional logic in prototypes, expressions & formula based logic, and advanced prototyping generally.
PHEW! THAT WAS A LONG JOURNEY... THANKS FOR MAKING IT TO THE END.
