How to Interweave Design with Product Development?
This post covers the process of working with design through your development process.
Disclaimer: Design is a huge space, and I’m no designer. What I want to talk about is the process of working with designers, especially if you’re a product manager or an engineer.
Good user experience design is magnetic. You start using a product, and everything just feels so easy to do. You continue using it and realize there are smaller thoughtful touches for you to discover along the way – maybe, you accidentally double tapped the space bar of your touch phone and realized that it inserted a ‘.’ and added a space. That’s just what you wanted to do, but it made using the keyboard feel easier.
Good design has a huge bearing on how you feel about a product. But if you are starting to build your product, how do you get there? And importantly, how do you reduce friction in getting left-brain dominated development work with right-brain led design? Let’s walk through a typical process.
Different aspects of design
Design in India is largely seen as interior design or web design. Many of us, if asked, will point out some of these tasks that designers do – design a web page, create/change an icon, make a ppt look good, change color schemes, etc.
But there’s more.
Here are some other design capabilities that you are likely to use in your development and design:
- Interaction design: how users interact with your product, what different contexts are, what buttons do, etc.
- Information architecture: a model or concept of various data elements organized to solve task flows
- Visual design: the look and feel of the product (this is what most folks think of when you say design!)
- Usability testing: closed-door or in-situ testing of design, prototype or near-final software with target consumer base to understand reactions and suggest modifications
You may have different designers work on these aspects or the same designer handle multiple roles. Here’s a typical journey of working with design.
Design interactions in product development
Some typical phases while working through your app are:
- Ideation/sketches
This is usually the abstract phase where you could put together ideas/sketches, either on paper, a whiteboard or using tools like Balsamiq, Omnigraffle, Adobe Illustrator or any wireframe generator.
Some topics you could discuss during ideation are:
- First time use and experience
- Return usage and experience
- Focus areas for your product
- Entry points for users on repeat usage
- Low friction tasks you want the users to complete easily (eg: quickly scan news headline or status repeat. Click for more info)
- Sharable elements and options
- Task hierarchies and flow
During ideation, do not start vetting ideas based on feasibility. Generate as many ideas and concepts first so that you have a rich base of experiences to choose from.
It is fine to not have rich UI elements in this phase. What’s important is to get overall model of content and interactions right, and then work on visuals.
- Design proposal
Once you have a sketch that addresses elements of your core value proposition, get a complete design proposal.
A design proposal is like a master blueprint that outlines major use cases of your product, proposed visual design and high level user journey flows.
Typically, a design proposal covers major task flows for your product and gives an idea of the visual constructs your product would use.
- Feasibility analysis
The technical team can use the design proposal to comment on feasibility, backend required to support the solution, estimates of work required, APIs required from 3rd parties (eg: map view), etc.
It also helps the marketing teams to visualize how the solution would look and bring in a consumer point of view.
And of course, the design proposal will help product management/founders to see if the solution aligns with the core value proposition.
At this stage, there may be multiple concerns from teams – the solution implementation requires 3rd party APIs that come with a license cost – the visual design is not conducive for first time users – the overall product design seems complicated to use, etc.
This is a good point in your development to catch these concerns, and modify the design.
You can also get estimates from the technical teams on development/testing timelines and resource requirements. Depending on these, you may decide to defer some of the cooler designs to a 2.0 product, if timing is critical.
- Prototypes
Prototyping is a great way to get early feedback.
The idea of prototypes is to have different mock-ups of the design proposal that you could play around with to see how it feels. Usually, you could choose dummy data for the prototypes that corresponds with your live data.
Prototypes can also be used for quick consumer reactions, to see how consumers react to your product design.
A key advantage of prototypes over a static design proposal is the ability to walk through user flows to see if there’s something that’s not intuitive.
- Finalize product/design roadmap
Once your teams are aligned on the design proposal, you can vet the design against the product roadmap and finalize the priority order of feature implementation.
This helps your designer plan their activities as per your implementation roadmap, so that they can start drawing out detailed specifications, work on logos and graphics, etc.
You may want to detail/break-up user stories into smaller chunks for implementation/design teams to handle.
The end outcome of this stage is a clear product roadmap with details on different development phases and what design needs to deliver.
- Specification of design
The specification stage is when user flows and visual design are detailed out for development.
The design specifications could also contain flow diagrams, corner cases, etc. (eg: what happens if user enters Wi-Fi zone and then leaves)
If you follow the method of creating user stories for your product development, you could pick user stories for the design team to flesh out and development team to work on.
- Usability testing
During development, you are likely to come across cases that are difficult to agree on the approach without observation.
You could collect use cases that you are uncertain about, and get a usability testing conducted.
Usability testing is a well-evolved discipline in the design world, more than just showing the design to a few people and getting their opinion on it.
Usability tests are typically conducted by a moderator with a section of the target audience, and check for generics like how users react to the design, how much of learning does the design encourage, where do users need a helping hand to figure out how to proceed, what is their reaction to specific use cases, etc.
- Final lockdown
In almost all product development processes that I have seen, there is a huge temptation to keep refining the product or the design to make it better. Once the development process is nearing completion, the designer gets to actually see how the product experience will be, and it’s likely that s/he will see loose ends (and hopefully only loose ends!).
Judging if a product or design is ‘good enough’ is a tough job. The best way to resolve this is to have either a single arbiter who can take a business decision, or get the founders and designer together to talk through.
Designers usually push for improving the user experience, while sales and business are keen on time-to-launch.
One way to finalize decisions is to have a clear-cut lockdown date prior to launch, and vet proposed changes with development to see if they can be completed in time.
If you’re building mobile software, it’s good to have a final design document at this time that corresponds to your release.
- Marketing collateral
The last stage of the process is usually getting the marketing collateral ready. The final design document is a source for screenshots and any other collateral you may need to publicize your product.
A fantastic depiction of the design process in action is the Government Digital Services design principles by the UK government. This was an overarching design process to fine-tune digital delivery of government services in UK.
Are there other aspects you would like to discuss? Let us know in comments or @shrinathv.
