Computers are windows into the digital world, and mobile devices are windows into your own private digital world. Mobile is significant because it never leaves your side — it wakes you up from the nightstand, and before you even have breakfast, you're caught up on work, family, and friends. From then on, your mobile device is in your hands throughout the day until you set the alarm and place it back on the nightstand at bedtime. That's the power of mobile, and as a creator, I'm lucky to be part of that magic.
Most people use mobile devices, but not everyone has worked on a mobile project yet. If you have, you probably faced some roadblocks along the way, and you may be eager to find ways to improve the process. Oftentimes, it helps to learn best practices from another team's development workflow and incorporate them into a process that works for your own team.
In this article, I share my agency's workflow for turning ideas into completed apps. Omega Ortega is a small team of designers and developers who build compelling mobile apps using the latest technologies to support iOS, Android, and desktop browsers. By sharing how we work to develop mobile apps, I hope you will pick out the pieces that may help your own workflow.
Throughout this article, I reference three of the apps Omega Ortega developed to explain our mobile app development.
If you want to know who has an idea for an app, just ask people at random, and they will probably tell you that they do have an idea for at least one app. That's the great thing about mobile. The platform is so pervasive that those of us who use it see where the platform is lacking when we experience our own pain points. The power lies not only in coming up with an idea, but also in executing the idea. While it may seem mystical at times, just like any other project, it just involves a well-worn routine to get the job done.
At Omega Ortega, we have created apps for our own use and for our clients. Our own apps are purely our own ideas, whereas our client apps are a mixture of our ideas and theirs. The key to defining an idea for an app is to break down a problem into a simple idea and then present it as beautifully as possible.
We wanted something fun that would demonstrate to potential clients what we can do (see Figure 1). One of the first things a client will ask is to see samples of our work. We love being able to point them to an app they can download right away. The idea for Pay Up Sucka is to provide a fun way to remind friends that they owe you money.
We created Chore Score for a client who had a set of retail web services and asked that we come up with a great way to utilize them (see Figure 2). Three of us went back and forth with different ideas before we settled on an idea for an app that would help parents motivate their kids to do their chores.
The client wanted an app for the caregivers of heart failure patients (see Figure 3). We heard from caregivers, doctors, and the client, and we created an app that tracks caregiver moods and helps keep everyone informed about what's happening with the patient.
Functionality is key. We need to know what an app is going to do before we can begin to design or program it. Immediately upon settling on an idea, we get straight to work figuring out the core functionality of an app. Our goal is not to define 100% of the functionality, but rather to know what things we want to do with an app.
Mobile apps are typically broken down into common screens such as a login screen, a settings screen, or a form to collect a batch of information. Often, we start by defining these screens to make sure everyone has the same understanding of what the idea means. Sometimes designers and programmers will have a different approach to a project, so agreeing to a plan can save a lot of time by preventing someone from going down the wrong path. None of us likes to throw away work, but we are generally more open to changing our approach to a solution before any real work is done.
From these sessions, we define a high-level list that describes the purpose of the app as well as the basic functionality we need to address. The section below shows the lists we defined for each app highlighted in this article.
Pay Up Sucka
Adobe's creative tools have been a staple in the design industry for a long time. Among the plethora of tools to diagram mock-ups for a web, mobile, or desktop project, we prefer Adobe Illustrator CC. Illustrator is liberating because it gives us complete control over defining curves, edges, lines, and placements down to a pixel. We tend to be a bit obsessive about submitting the cleanest blueprints for our application design. Design matters, and it starts in the development phase of defining the user interface and user experience. Illustrator is the primary tool we use to streamline the design process for creating vector artwork before we switch over to Adobe Photoshop CC.
We use Photoshop CC to design rich and engaging graphics that enrich each screen in our apps to help enhance the user experience (see Figures 4–6). Photoshop speeds up our development process by enabling us to further define the design and layout of the screens to match what we want for the user interface. By using Photoshop to design the mobile and web application experience of our apps, we can more easily dissect the screen elements and define the code.
Our team has worked together long enough to have complete trust in one another's abilities. Once we agree on functionality, our designer can work without any input from the developers. What comes out of these design sessions are screenshots.
Screenshots provide a mock-up of each screen in the application and help show the application's workflow (see Figures 7–9). The screenshots also show any potential gaps in functionality. In that case, we define the additional functionality, and the designer creates the appropriate mock-ups.
These screenshots also function as a style guide by showing details such as the dimensions of design elements, fonts, and color schemes. The coders use these guidelines as their requirements document, and the designer can move on to the next project.
Once the screenshots are defined, we translate the screenshots into code. Each of the apps highlighted in this article are native iOS apps — two made for iPhone and one made for iPad. We used Xcode as our integrated development environment because it is made for creating iOS apps. First, we translate the screenshots into what Xcode calls "storyboards" (see Figures 10–12). The storyboards provide the views of the application to which we then bind code and properties. We use the Xcode source editor to write the native code (Objective-C) that provides the logic of the applications.
We use one Git repository per project, so each team member can just push and pull from the appropriate branch to ensure everyone is always up to date. While Xcode does support Git integration, we typically use a third-party app like Tower to manage our commits. We find that having one step removed from the code editor helps us focus on code reviews prior to check-in. We use IDEs for creating and Git tools for reviewing the changes we're about to commit.
Mobile app design may seem complex when all you see is the finished product. However, much like anything, once you break down mobile app development into manageable steps, creating a repeatable process is much more achievable. Any mobile app, no matter how simple or complex, can be broken down into these simple steps — the idea, design, and code.
Ideas change per app. Mobile platforms change over time. Teams change. However, the apps in Creative Cloud have been part of our creative workflow since their inception. Workflows have been part of the creative process since artists began sketching a subject before starting the final piece.
Our job as creative professionals is to help bring to life ideas for clients, employers, and ourselves — and to do so quickly and efficiently. Practical matters of cost and budget aside, we want more time so we can execute more ideas. I hope this explanation of how we implement mobile app ideas will inspire some new ideas to add to your workflow.
Check out these other great resources to get you started in taking an idea and turning it into a working app:
Tom Ortega is the owner/coder of Omega Ortega. He has been consulting and programming for almost 20 years. He's a natural problem solver who loves a good challenge. He is an expert coder and has the ability to visualize the end result to help his clients reach their goals.