Prototyping for Mobile
Over the past two years, the idea of prototyping mobile applications before jumping straight into code has really taken off. Many great prototyping tools have been introduced and designers have seen the vast potential in trying out their ideas before going to production.
In early 2014 I started Treble with two other partners. Treble is a small and nimble mobile design and development agency. The three of us wanted to break away from the typical agency mold. We wanted to give ourselves more time to develop our own products alongside those we were building for our clients. Since the start of Treble, prototyping has been a key piece in our process and I thought I could share a few examples and suggest different ways of incorporating prototypes into your own projects.
What is prototyping?
Prototyping is a broad term that can be done a number of ways with many tools. To me, prototyping boils down to any way that you can take an idea or a design that you’ve been producing and test it in the real world. This could be as simple as linking mocked up screens together to illustrate the functionality on a phone, or as complex as programming components of the app to demonstrate how it reacts. Prototyping can also involve building quick animations or interactions in tools such as FramerJS, Pixate, and Origami.
The complexity of the prototype will depend on the needs of each individual project. The prototype is intended to get an app to a testable state in a short amount of time. When a design or idea is tested at an earlier stage, it gives every party involved time to make any necessary adjustments before development commences. Once development starts it can be costly to make major adjustments to the flow and functionality.
The rest of this article is going to talk more about how we approach prototyping and the tools we use. This Smashing Magazine article is great if you’re looking for a deep dive.
Why do we prototype?
In Treble’s infancy, we began to see a need for prototypes as a stand alone service offering. We were often contacted by both startups and individuals who had minimal budget. The cost of building an app was often higher than they anticipated. Even if a project had a substantial budget, the development phase could quickly eat up the budget if dramatic changes had to be made to the app once development had begun.
After noticing this trend, we changed the way we approached these types of projects. Working with a few small clients, we started with a planning phase, preliminary design work, and a quick prototype that the client could play with on their phones using Marvel, the tool we use most often. This new approach was well received. The cost to the client was much lower than a completely developed app but still produced a tangible product in the end. Clients could use this prototype during pitches to investors, as reassurance that their idea would work and to affirm their decision to continue development of the app.
How do we prototype?
The first step in our process is planning and learning about the project. Typically, we’ll sketch out a flow using sticky notes to visualize each screen.
When we have an idea of the screens involved in the project and what will need to be designed, we move into Sketch. Sketch is where we design all the front end views for a project. We like to design as many as possible including multiple interactions so that our prototype is as functional as possible.
Once the design has been refined through revisions back and forth with the client, we move to Marvel to help us build the prototype.
What’s great about Marvel is that it makes the process of linking together designed mockups easy. You can add hotspots which can be linked together with native animations to help emulate a realistic user experience. Marvel makes testing on a mobile device incredibly easy with built in functionality. It’s crucial that you experience your mobile prototype on a mobile device. The following video helps provide a better idea of Marvel’s capabilities.
Based on the needs of the project we may also supplement these mockups with more advanced interactions using FramerJS. FramerJS is a more powerful tool that allows for the creation of complex, specific animations. It requires a basic knowledge of javascript to get started but can be powerful when mastered.This example was built to showoff how the app Carousel was prototyped. (Please note, this example is best viewed in a webkit browser such as Safari or Chrome)
Lastly, we’ll validate our prototype with real users in order to reaffirm decisions we’ve made. We used to do this by sitting down with the client or other test users and watch them move through the prototype. Recently Marvel introduced new user testing tools that make this process much easier. Take a look at their recent post on this new feature. Watching users interact with your prototype provides much more insight into how your app will be perceived and how to find possible issues. I highly recommend working this step into your process.
In our experience, we’ve found the most success starting with a Marvel prototype. This helps establish the overall design and flow of the app. If there are any particular interactions that we feel need to be visualized before building in code, we’ll use FramerJS. We’ve found this allows us to take advantage of each of these tools strengths. Marvel for it’s speed and simplicity and FramerJS for it’s ability to build more complex interactions.
I highly recommend utilizing aspects from multiple tools to best fit the needs of your project.
Examples
KNIT
Knit is an iPhone app that allows you to leave hidden notes at your current location. Your friends discover the notes via a push notification when they are near the location where the note was left.
We kicked-off the project by determining an initial set of features, followed by the screen design, along with different states for each. Once the initial designs were complete I added them into Marvel and sent the prototype to my partners to try out. This provided our team with a high level overview of how the app would flow.
The core value of the Knit prototype was the speed it added to the design process. For example, in some of our earlier designs we thought about having the ability to add a friend to a note all from the post note screen. However, once we tried it out in the prototype we noticed that it felt cumbersome (Example). We decided to break it out into it’s own screen and once again tested the new flow out in our prototype. Ultimately this was the approach we took. Because we built the prototype first, we didn’t have to make a core change like this during development.
GIVESOME
Earlier this year we were approached by the startup Givesome. Givesome wants to change the way we think about giving and to keep donors connected throughout the life of a project. Our objective was to enable giving and connection through a mobile experience that is rewarding for donors as it is effective for fundraising.
We started the project with a collaborative planning session and the production of low-fidelity sketches for each screen. Sketching on sticky notes allowed us to collaboratively construct the user journey with our client. From there, we added detail to the sketches by creating a set of core interfaces that would allow us to create an accurate prototype.
We used the screens created in the design phase to build a functional prototype for review by our client. Using this prototype we could rapidly iterate on the designs and flow as a team. The prototype became invaluable as we noticed that several sections of the app required complex flows. What normally would have been a series of designs and phone calls to try and describe to our client what was happening in each screen became a collaborative effort. Looking at a functional prototype together we were able to discuss the finer details about how the app would work. The design was able to take more of a backseat in the process and allowed the creative thoughts to flow into how the app would actually feel and function for our potential users.
The Handoff
The most important part of a project, especially for designers, is the handoff of the design to a developer. Prototypes can provide a high level of detail for developers as they start to incorporate the designs. It allows designers the opportunity to properly demonstrate the vision for a project without needing the ability to code it. Not only does it help show off small details and interactions, it also brings the vision together through helpful flows and walkthroughs.
When a prototype is ready and the developers are about to get started on programming it’s a great idea to walkthrough the prototype together. Prototyping this way and involving your developers in this step can increase communication and create a more successful project.
Pitfalls
Prototyping provides many advantages and can be extremely beneficial during the planning process. There are some common pitfalls to avoid and mistakes that we’ve learned from in the past.
Be sure to provide plenty of detail in prototypes meant to help determine flow. For example, don’t leave out screens you feel are unnecessary or self explanatory. Try to make the prototype feel as complete as using the functional app.
When using animations and other transitions that these tools provide remember to keep it simple. We’ve found that using simple animations that don’t get in the way and that feel the most native are best. It can be easy to get caught up in ‘cool’ looking transitions but that can often overwhelm the user and distract from the purpose of the app. Here’s a great article on Functional Animation In UX Design
Take all feedback into account from your test users and clients. They may get hung up on a part of the prototype that you feel will be solved by using the completed app. This might not always be the case, they may be trying to point out a potential issue and could be having trouble communicating what that problem is.
Lastly, try as many options as you can. It’s easy to land on a solid solution and feel like that’s it, that’s the best option. There may have been very little feedback from your client and it could feel like the prototype is ready to go. Take a step back and try another option if time and resources permit. You’ll always discover a better option if you spend a little bit more time on it.
Wrapping Up
We have experienced great success with prototyping to create a better picture of the final product for our clients. We’ve found starting with a prototype allows the client to be involved in the process earlier on. When the client is involved earlier into the project, the rest of the process moves much smoother.
Keep in mind some of the primary advantages of prototyping:
- Prototyping provides a greater level of detail than a static design mockup
- It allows feedback to be incorporated at an earlier stage of the project
- Prototypes can be built very quickly
- Prototyping can be cost effective as a stand alone product
- Developers can see the flow and interactions of the app to better replicate in production
Be sure to take advantage of the many tools available for prototyping.
- Pros: Powerful for specific, complex animations
- Cons: Requires programming knowledge
- Pros: Great bridge of complex animations and static design flows
- Cons: A lot of options, almost tries to do too much
- Pros: More comfortable for designers that have never used other prototyping tools
- Cons: More focused on making presentations, doesn’t have the same specific tools tailored to prototyping
- Pros: Extremely visual way of mocking up animations
- Cons: Steep learning curve
- Pros: Incredibly simple and easy to use tool for static prototyping
- Cons: Doesn’t allow creation of complex animations
- Pros: Huge list of features as well as extra collaboration tools
- Cons: Can do more then you need sometimes and that can get in the way
- Pros: Another great static prototyping tool
- Cons: Isn’t always as up to date as some of the others with adding new features
The mobile industry is moving incredibly fast and the apps that we develop need to be built as quickly as possible with the highest level of accuracy. These many different prototyping tools have become a necessity in order to keep up and develop high quality applications.
Remember to utilize the various tools available; each has advantages and disadvantages. Find what works best for you and your clients and you will find success. Iterate, iterate, iterate.
