Core tools of Startup Product Designers
A fast paced environment is at the core of hyper growth in any successful startups. As a UI or UX designer, you need to come up with innovative ideas, quickly refine and modify changes, analyze the results — lather, rinse, repeat.
To cut down on the learning curve for those of you who are still working on honing your own process, I have compiled a list of tools that I — and designers I work with — spend the most time with on a daily basis.
Important note: this list is not necessarily the best tools for every designer and every project; they’re the tools that I’ve found myself returning to on a consistent basis due mostly to their ease of use and straightforwardness. — If you have any suggestions or use tools that you think are better than what I’ve listed, please add a comment under the article. I’m always interested in new tools.
Basic tools:
Paper & Pen
As designers, we all started out with the most rudimentary of tools: paper and a pencil or pen. These can’t be beaten in certain situations but learn when it’s time to move on. Many people go way too far with pen and paper, spending a lot of time drawing fancy shapes on their wireframes, drawing 150 lines under a 45-degree angle to show that there will be a darkened background , or adding embellishments . This is — not efficient.
Main uses:
Quick sketches that let you visualize the idea in 10 seconds instead of describing it for 2 minutes.
IA Writer
I absolutely love this app for making personal notes, as it’s extremely clean and lets you focus on the content you’re writing. I use the iPad version when I’m on the go. Note that a good alternative to iA Writer is Evernote.
Research & Testing:
Hot jar
Whether it’s looking up heat maps, creating polls and surveys or recording visitor behaviors, — this is the go-to app. Hotjar is extremely valuable for understanding how visitors navigate a site, how they interact with your UI , getting customer feedback and learning more about users — it’s even good for finding some bugs.
Google Analytics
To gain insight into how a site is used, Google Analytics is the main tool for monitoring and collecting information about bounce rate, exit rate, average time spent on the page, how many pages on average are people visiting during a session, and what are the most used devices. GA gives you a report about user flows, demographics, and information about new and returning customers. In short, — it’s amazing and should be part of your arsenal.
UserTesting.com
The perfect platform for remote user testing, UserTesting provides a ~15-minute video of a specifically- targeted person that will do all the tasks according to your scenarios. The users are usually well trained and provide good quality feedback; the quality does, however, depend on the quality of tasks you write — these need to be very well thought out, I highly recommend learning on how to properly write scenarios for user testing before starting your first test.
UsabilityHub
This is a fun tool that helps to solve some UI disputes in very short time, such as “are we sure people immediately get what the site is about upon entering?”. And the results come in incredibly fast, which is always a plus.
Tableau
Data is one of the most powerful assets for a designer, as it helps you find the choke points in the funnel, learn about the product every day, and see how small and big changes make an impact. Tableau helps make sure that you’re focusing on the right things and making the right decisions. Note that to fully utilize the absolute maxium potential of this platform a data team is needed behind it to operate it and flesh out its capacity — more suited for organizations.
Optimizely
Optimizely is probably the best A/B testing platform on the market right now. They are expanding rapidly, improving their features, and are very active in the conversion optimization world, as they’re trying to make the job of iterating easier. Recently, they have introduced Optimizely X — — you can now experiment broadly across the entire customer experience:, on any channel, any device, and any application.
Wireframing:
Omnigraffle
Perfect for writing down user flows and site-maps. The auto layout feature lets you save the time you’d normally spend on on drawing the lines and rearranging them at every iteration by taking care of that nuisance for you so you can concentrate on the content.
UXPin
Excellent browser-based tool for creating interactive wireframes and user flows in minutes. It has a set of premade elements that will save up a lot of time, and you can work on any computer, anywhere without requiring to download any kind of software. It also has an option to sync with Sketch and Photoshop saving even more time if you prefer to create your wireframes in either of those.
Alternatives:
Axure
Design tools:
Sketch
The new industry standard for designing UI since it came out and pushed away designing in Photoshop, which was a huge step, it allowed us to design interfaces properly in vectors instead of bitmaps (there were practices to design in Illustrator at that time but it was not really meant for that which was tedious and sometimes Illustrator did not cooperated)
Main uses:
Designing the UI, creating wireframes.
Photoshop
As stated above, there are things that Sketch does better than Photoshop, but nothing beats Photoshop when it comes to photo editing.
Main uses:
Photo editing
Illustrator
Vectors, but for print. Best thing is when you’re designing something in illustrator and you know you will use it in your UI design — just export it as an SVG and import into sketch — super useful for designing icons.
Main uses:
Print design.
Zeplin
Zeplin is the perfect collaboration tool between designers and developers. It allows developers to easily gain necessary insight into the designs without the complex layer of design apps. Specs, guidelines, discussions, assets, and updates to design and making sure that everyone is on the same page — that’s what Zeplin does best.
Prototyping
InVision
I’ve tested out several platforms but when I decided to go with InVision I never looked back. Their prototyping tools are extremely well done and intuitive, and their team is always coming up with something new every month. I’m really looking forward to the Craft Sketch extension that will allow you to create prototypes directly inside Sketch (currently in closed beta). The only downside is that they are currently the most expensive optiont — no doubt because they are the industry leaders. You might want to look for alternative such as MarvelApp if you’re just starting out.
Alternatives:
Flinto, Symu, Marvel App, proto.io
Mainly for:
Creating usable prototypes of an app.
Principle
Principle allows you to prototype interactions. It fills the gap that InVision is not fulfilling (yet), which are animations of UI elements. Instead of describing to a developer how a square will “flip 180 degrees, and then when you click on it, it will do a backflip while slowly disappearing into the horizon” you just do it and show the developer.
I chose this app because it’s extremely easy to use and it creates awesome results in a very short time (since time is something we’re always lacking this is a real plus!).
Alternatives:
Framer, Facebook Origami, Flinto
Framer
If you are interested in doing more complex interactions/animations I would highly recommend looking up Framer (or After Effects). They have just recently added the visual editor to make life a little bit easier, but if you know Javascript this might become a better option for you.
Side note:
A tool I haven’t listed above but I am looking forward to is Facebook’s Origami that has just come out. Their option to export animations as code sounds great, but so far I have yet to see an application that comes with WYSIWYG and generates a great, scalable, production ready code.
Thank you for hitting the ❤ if you liked the article.
Find me on Linkedin
If you would like to see more of my work, check it out at:
www.dribbble.com/patrickwestwood / www.patrickwestwood.com
