Designing a new product or process from scratch can be daunting. In this post, I take you through my approach.
I’m always interested in how other people approach new projects. What do you do first? How do you go from idea to development? What tools do you use?
Everyone’s creative process is unique, but we can learn from others and get ideas that help us evolve our own approach to development.
In this post, I’ll take you through my approach to designing and building new projects, some of the tools I use, and share how I balance creativity with repeatable process.
Step 1: Design by Hand
My first step with every new project is to start designing by hand with paper and pencil. This is old school, I know. But even if I can fully visualize what I want to build in my head, there’s something about sketching by hand that helps my creative energy flow better and helps me foresee issues that I’ll need to address.
In this first step, I always use a blank piece of paper (often from my printer tray!) This is the ultimate blank canvas for me to start with. I’ve tried using lined paper from a notebook, but there’s something about the rigidity of those lines that keeps me from being fully creative.
On this blank page, I sketch the framework of a browser, or a mobile screen, and I start putting in basic elements like buttons, text and data. Along the borders of my design, I often put notes to explain something, or a reminder to come back to an area I’m not sure about. I use arrows to indicate basic functionality, like movement from screen 1 to 2, or steps in a multi-step function. I sometimes put in notes like which fields have required data elements, but I try not to go too much into the weeds.
Using a pencil is important at this stage. I often erase things and start over. It doesn’t matter if I make a mistake, I just want to get my ideas down on paper and then use that as a framework for continuing to build the project.
Seeing the outline of a product visually, even in a simple form, helps me think through all the basic details of what I plan to build.
Step 2: Digital Mocks
Once I have my basic design down on paper, I then start to work on design mocks in a digital tool. This stage is particularly helpful when I’m working with a partner and need a way to share ideas and solicit feedback or questions on the direction I’m taking.
I use multiple tools and they all have pros and cons. Here’s a quick breakdown of some I recommend:
Figma - This is one of the more powerful tools for visual design. It’s helpful for going deep on functionality and layout. The output can often be transferred directly to a development tool (e.g. if you are building web styles and want to copy over CSS data). You can also create mock functionality to demonstrate a workflow, such as showing how a button clicks through to a specific screen.
While powerful, Figma can be complex to use and has a learning curve. I recommend using this tool mostly in cases where the partners you’ll share designs with are already familiar with Figma functions.
Canva - This is a web-based design tool that’s useful for creating any sort of graphics you need, from banner ads to icons to social media posts. I started using Canva for creating web graphics and have found that it’s also very useful for creating design mocks. In my case, the partners I generally work with are less technical, so Figma is too complex. Canva is an easy-to-use tool that I find partners can learn quickly. It’s easy to collaborate and share comments on designs and you can quickly duplicate designs to create new versions for discussion.
Canva doesn’t offer a way to import design work into a development tool, but given its ease of use in collaboration, and the large number of design templates they offer, it’s one of my go-to tools for sharing mock ups and asking for feedback.
Google Slides/ Microsoft Powerpoint - if you’re looking for a simple visual canvas to work on and don’t want to invest in learning other tools, using a simple slide editor like Google Slides or Powerpoint is a quick way to create a design mockup and share it with others. When using these tools, I generally start with a blank slide and use basic shapes from the editor to map out features, as well as the Comments feature to explain functionality or pose questions. It’s a no frills approach, but something simple is the way to go!
Step 3: Product Specs
Once I have my basic design and functionality sketched out, and I’ve gone through a round or two of feedback and discussion on a project, I look to get more formal in putting project specifications into a document. The purpose of this document is to start capturing requirements and the details that will be needed for development. This includes things like data structures, steps in a workflow, and key decisions that need to be made during the development process.
There’s no required format for a product spec document but often I start with a general description of the product and follow that with sections for data requirements, workflows, and user stories.
In addition to capturing functionality, the product spec can also be used to start writing down notes on testing. I like to ensure that I’ve fully tested my product functionality in a test environment before pushing to a production version. Documenting the use cases I'll test as I build is a good way to ensure all functionality gets tested.
I also start to capture notes on functionality that might lead to an FAQ or Help Center information later on. By starting to capture notes here, the creation of user help documents later on becomes easier.
Step 4: Start Building
Once I have my visual mocks and specs set, I start to build. Every project is different but often when I start building, I break down projects into features and functions. I build the outline of a web page, with a header and footer, and then insert main content. Or I build the outline of a multi-step process and then start filling in the details.
As I build, I use test data to ensure that data elements I’m inserting look correct and are the correct elements I’ll need once I go to Production.
I solicit feedback often from my partners. I’ll build and release test functionality in groupings and ask for feedback from my partners frequently, as opposed to waiting until a project is pixel perfect.
Building is the fun part where you get to see your ideas come to life. As I create functionality, I refer back to my initial designs and use my product spec to take notes on key functionality that changes.
Step 5: Launch & Iterate
Finally, once I have basic functionality built, I like to release it to production quickly, after testing is complete. I try to launch and iterate frequently, rather than hold stuff in a test environment for a long period of time and try to get it perfect before launching.
Given the speed of development in today’s world, it makes more sense to move fast to test out ideas and then iterate based on feedback from users. For me, this leads to a better product in a smaller amount of time.
And that’s it!
From designing by hand, to documentation, to launching and iterating, I’ve found that this process helps me move quickly from idea to functioning product in a methodical way. I hope it’s helpful to you!
Comments