April 20, 2020
Our Focal team just finished an eight-month software development project building the latest iteration of our e-commerce and marketplace platform. We designed our whole project without any designers or UX developers. The magic tool? Apple’s Keynote.
We stumbled upon Keynote by accident out of frustration with the steep learning curves of popular design software. As a small startup team, we needed a simple and lean solution to begin designing our new platform. After a short time, we discovered how powerful Keynote was as a product design solution. It ended up being integral to our development process. Here’s why:
As with most Apple products, Keynote just works the way you expect. This is a huge advantage, because it means anyone on your team can make changes to the wireframes on the fly. Whether you’re the co-op student, a developer, or the CEO, it's easy to bring your vision to the canvas.
Here's what makes it great:
1. Auto Alignment is Amazing
Keynote just magically aligns components. This instantly turns non-designers into passable ones, because Keynote will snap things to margin and easily set spacing between similar objects.
2. Group Objects Together
Things like profile cards can be easily grouped together by boxing over a bunch of components and then right clicking to group them. Now you have a component that you can move around, resize, or duplicate. You can also easily ungroup or add additional components to groups.
Need to have those round profile pictures? Simply select the circle shape and then drag and drop a photo right on it. With other shapes, you can easily adjust the corner radius to get that modern rounded-off UI Style.
4. Copy & Paste Bliss
It’s a small thing, but I can’t get enough of how easy copy and pasting is in Keynote. I often like to reuse components from one slide to another. Whether its a navigation bar or a profile card, it’s super easy to box drag or command select a couple of components to copy. Then if you go to paste them on another slide/screen mockup, the components always land on the same place as where you copied them from. No need to re-align, distribute, et cetera. Copy a nav bar from one slide, paste on the next, and you’re done.
5. Send to Back/Bring to Front
Instead of messing around with layers, it’s easy to stack objects on top of each other by sending what you need to the back or bringing objects to the front. Just box the components you want and then right click to send to back/bring to front. This works for things like building a page where you want to apply an overlay on top of a hero image and then write text on top.
6. Need a drop shadow?
Click on a component and easily select Apple’s preset drop shadow styling. You're styling with Material UI!
You don’t need fancy animations or a fully interactive mockup to test your product’s user flow. Just use hyperlinks!
All you have to do to make your wireframes fully interactive in Keynote is to apply hyperlinks to a couple of components, put it in slideshow mode, and place it in front of a user. Within a minute of watching the user try and click on things, you will be able to tell if your UX design is working.
This ability to create a high-fidelity interactive mockup is really what makes Keynote so amazing, because it allows you to get user feedback without having to write code.
Finding ways to have productive communication between the non-technical and technical teams is always a challenge in designing software. One team knows the customers, while the other knows the technical limitations. Having a common ground to communicate and explore ideas is extremely important. Keynote makes it easy to discuss the mockups together and make changes quickly without having to consult your designer and then wait for changes to be made.
For us, we often had our non-technical team put forward their designs in sprint meetings, and it allowed us to get quick input from the developers about what was within and beyond technical capabilities. We could then quickly make changes, adapt our keynote mockups, and move forward with coding the product.
I can’t express enough how useful Apple’s Keynote was to the product development of Focal’s newest platform. It helped us lean out our development process, save a lot of money, and ultimately build a product our customers love.
Its intuitive ease of use and simplicity make it an ideal tool for lean startup teams to build effective wireframes that enable the communication between non-technical and technical teams. Sure, it probably won’t make the front page of Dribbble, but it enables you to focus on what matters: developing your product.
Before discovering Keynote, our team went back and forth with our developers about whether or not we should hire a designer. Being a lean startup, we tried wireframing with pen and paper. But our hand drawn wireframes were ugly and confusing. With Keynote, we were easily able to take this:
And turn it into this with Apple's Keynote:
And eventually launch this!
If you’re a bootstrapped startup lacking an in-house designer or UX developer, you might just want to give Apple’s Keynote a shot. Who knows? It might be the exact design tool you need to develop your amazing product.