An overview of my design process when tackling projects.
##1. Product Definition
What are you doing?
Why are you doing it? (Problems you’re trying to solve)
What does success look like? (Qualitatively and quantitatively)
Create your own document answering these questions then pass it around for everyone to scrutinize and discuss with; once a consensus is reached refer to it frequently throughout the process to constantly remind everyone of the problems and goals to design for.
Suggested Tools: Any text editor software (Microsoft's Word, Evernote, iA Writer, etc.). Use whatever as long as you distribute to every individual so they can reflect on each bullet point and mark it up with their own thoughts for discussion. When everyone agrees after discussion, send it to everyone AND put it up where everyone in the design team can see and refer to throughout the process.
##2. Competitive Analysis
Gather products with similar features and flows you’re trying to solve for. The most crucial part is to screenshot each step and print everything out so the entire team can evaluate every page with pros and cons and what you can you improve or avoid. Make sure to write all thoughts next to it.
If an existing version exists, you have to do the same: screenshot everything, print it all out, put it up on a board for everyone to see, and evaluate honestly just like you did with other products. Use the design history as a data point to improve upon.
Suggested Tools: What’s important here is a central way to discover, gather, and share visuals with each other quickly and easily. Screencasting product flows also helps. Most of all: PLENTY OF PAPER AND INK, A PRINTER, and MARKERS. Scrutinize the crap out of every single step, your current designs included. Also, get a foamcore to pin all those pages on.
##3. Map The Flow
What are the entry points to your design?
What are the exits and edge cases?
Are there decisions a user needs to make before moving forward?
Do people land on the page from outside your product?
Is it different than discovering the page/feature inside a product?
Important thing here is to map it all out; it doesn’t have to be fancy, but something that can be understood easily by everyone on the team.
Suggested tools: Pen & paper, Lucidchart, [Google Docs] (https://www.google.com/docs/about/), and/or a ton of Post-It notes. Low fidelity is okay as long as it’s very easy to understand.
##4. Design
Get something clickable as quickly as possible. Do competitive analysis here as well and find where the weaknesses and strengths of the design. Solicit feedback regularly and consistently and toss away dead ends and iterate it until it feels right.
Again, print everything out because “using physical artifacts makes for less bandwagoning” and closer inspection of flows since all the pages are visible all at once.
Suggested tools: Marker and paper, Atom, Sublime Text, and only when it’s necessary ie. you can’t directly code the design into working prototypes yet, there’s Photoshop, Illustrator, Balsamiq, or Sketch. (learn to code, see #7)
##5. Prototype
After filtering to a few solid options, put something together that’s functional (using the notes from your analysis with flows, and entry & exit points). Share with the team, get feedback and critique.
Suggested tools: Invision, Marvel, Flinto. But it’s always better to have live code with live data. The goal is to get as real as possible without losing momentum, an as simply and quickly as possible. What’s most important is having something you can actually test with.
##6. User Research
Get users and talk to them. If strapped for time and resources, get people you know or people from Twitter/Craigslist who somewhat match your user profile and bring them in for guerrilla usability testing.
Suggested tools: Silverback, Lookback, UserTesting.com
##7. Build
It’s highly preferable to code and work with your engineer/s. Why?
The ability to implement your vision is the hallmark of great craftsmanship. It teaches you both the limits and possibilities of your medium.
— David Cole, Director of Design at Quora
This is also when the visual polishing happens. Now you’re free to obsesses over typefaces, shadows, and gradients. BUT if you can’t live code (yet) you should learn to.
Suggested Tools: Whatever your team uses for visual design and development.
##8. Launch
QA and dog-food like crazy. Use your product under real live conditions (and preferable in multiple places and scenarios.) Gather feedback and make adjustments. Make sure you address everyone who must know about design changes:
- Is support prepped to answer questions about your new thing?
- Is your community team prepped ready to engage your most passionate users with confidence?
You MUST get involved in the entire process and make communication solid with everyone. Get everyone involved and excited. Be there every step of the way.
##9. Watch the Graphs
Gather and watch the data agains your measurable hypothesis that you defined on step one. Whatever the result may be, ask WHY it might’ve happened, form a new hypothesis, tweak the design, and re-launch.
The most important part here at the holy-crap-this-is-live-right-now stage is to not let yourself get discouraged when you don’t get the win you wanted on your first try. Accept that, more often than not, you’re going to be wrong and that you’ll need to iterate your way to success.
Suggested tools: Kissmetrics, Mixpanel, Piwik, Google Analytics
####Above all else keep your focus on the user. Do whatever it takes to:
Provide an amazing experience, that
Helps your users accomplish their goals, and
Enables your product and company to flourish
(During the collaboration process remember to use The Sliding Scale of Giving a Fuck)