White Paper

Smarter Mobile App

Design and Development
6 Key Steps

White Paper

Table of contents
Executive summary 1
In the not so distant future

Rising expectations

Legacy app design: Designing todays apps with yesterdays technology

The old web approach to app design

The trouble with designing apps in silos

- A lack of collaboration

- A lack of optimization

- A lack of multi-channel guidance

The 6 paths to designing in the multi-edge world

Breaking down boundaries with cloud-based technologies

- Cloud-based collaboration

- Asset reusability and sharing

- Real-time previews and simulators

Crossing multi-edge boundaries with real-time design

- Responsive web design

- Adaptive web design

Saying goodbye to the blank canvas

- Multi-edge form factors

Following the pathway to an experience-first app design

Conclusion
7

White Paper

Executive summary
Mobile app usage is growing at a remarkably impressive rate. Industry
figures predict the number of downloaded apps will rise to 254 billion by the
end of 2017. But while these industry projections are impressive, its not just
about the numbers. Alongside this increase in market size, users are placing
a higher premium on app design and user experience. Of those billions of
apps being downloaded, user engagement drops by 75 percent after the
first usage. Simply put, users are often unimpressed.
Because of rising competition and user expectations, it is no longer enough
for a business to simply offer an app. Instead, to truly compete, they must
be able to design an app that meets or exceeds the usability of the billions
upon billions of other apps in the marketplace.
In the not so distant past
A decade ago, the app landscape was much different than it is today. Traditionally known as gen 1
apps, these first mobile applications were simple programs: small arcade games, ring tone editors,
calculators, and calendars. Most users only owned one device. There were no smartphones or
tablets, and developers only needed to account for a handful of screen sizes and orientations.
More importantly, because user expectations for these single function applications were low, little, if
any, added attention needed to be given to the user experience and design expectations.
Rising expectations
Over the last five to seven years, usability and design expectations have increased dramatically, largely
thanks to the introduction of the iPhone and the app store. Seemingly overnight, users went from
playing arcade-style video games to expecting more robust functionality that would enhance their
lifestyles and improve daily tasks like banking, bill pay, shopping, and travel.

White Paper
These expectations are not limited to B2C apps, either. Users want the same intuitive experience
on their work apps as their play apps. That means organizations must take incredibly complex
systems with enormous amounts of data and functionality, and serve up a simple, easy-to-consume
interface. This is clearly easier said than done, but it is imperative; just like Apple changed the game
by simplifying the front end of a complex device with the iPhone, whatever business app creates a
seamless experience will, quite simply, win.
Adding to this already growing list of design, development, and usability considerations, users are no
longer restricting these interactions to one device. Today, 25% of adults are going online with three
or more devices, and 66% of the workforce is using at least two devices at the office.
In a mobile landscape where 120 plus billion apps were projected to have been downloaded by the
end of last year, this may be troubling news for app developers and designers. Due to rising user
expectations and an increased emphasis on device proliferation, many are asking: Is it even possible
to create an app that will compete in todays multi-channel world without negatively impacting the
design and user experience?

Legacy app design: Designing todays apps

with yesterdays technology
The truth is that for some designers those employing traditional web-based design processes and
tools the answer may be a resounding no. Too many designers are relying on tools and theories
that are firmly rooted in a web-based world, a task that any designer who has ever had to deal with
the seemingly endless number of varying mobile form factors will tell you is next to impossible.
The old web approach to app design
Traditionally, mobile app design has followed a four-phase linear process. Filled with any number
of redundant tasks and due to an overall lack of real-time collaboration, this approach is long and
cumbersome often taking as long as 9 to 12 months before the final app is developed.

White Paper
The traditional 4 phase approach to app design
Phase 1: Requirements gathering
During this phase, the concepts, functionality, and usability of the application are defined.
Whats produced? Concept, design expectations
Tools used: Whiteboards, pen and paper
Challenges of this approach:
Inefficient meetings: An endless series of meeting are needed to finalize and prioritize each requirement.
Impaired project visibility: There is an overall lack of visibility into whether each requirement is being
interpreted accurately.
Inconsistent toolsets: Because the business user is using a different set of tools, many of the requirements
are mistranslated.
Lack of collaboration: Due to a lack of collaboration throughout the process, the original scope and intentions outlined during this phase are often misinterpreted.
Phase 2: User experience and app workflow design
During this stage, the workflow, content, and interactions of the application are defined.
Whats produced? Wireframes, mockups, and prototypes
Tools used: Whiteboards, pen and paper, prototyping software
Challenges of this approach:
Blank canvas toolset: Traditionally, the tools used in this stage fail to account for the endless combination of
screens size, layouts, orientations, and platform capabilities.
Graphically inaccurate prototypes: Most prototyping tools fail to produce a graphically accurate depiction of
the app.
Throw-away work: Prototypes are considered throw-away work, as they cannot be reused by the designer
or developer.
Limited multi-channel support: Because these tools do not support multi-channel design, the designer is
expected to learn the limitations and capabilities of every device and platform.
Phase 3: Graphic design
At this stage, the wireframes and mockups are handed off to the graphic designer, who is responsible for the
creation of each individual design asset.
Whats produced? Image assets and style guides
Tools used: Graphic editing software, collaboration tools
Challenges of this approach:
Individual asset creation: Designers are expected to create designs for each device and screen orientation.
Endless forms factors: Due to a seemingly endless number of form factors, the designer cannot hope to
create a design capable of accounting for every variation.
Static image files: Each design element that is created is a static, throw-away file, and it cannot be reused by
the developer.
Throw-away style guides: Designers must write elaborate throw-away style guides, which describe every
design detail.
Phase 4: Development
During this phase, the style guide is given to the developer. Keep in mind, it is not until the development
stage months after the initial concept was first developed that the app receives its functional usability.
Up until this point, the progress of development has been communicated largely through abstract concepts
and static imagery.
Whats produced? Finished app
Tools used: IDEs
Challenges of this approach:
Inconsistent platform approach: IDEs are only able to cater to either HTML5 or a specific platforms (iOS,
Android, Windows, etc.)
Redundant processes: Developers must use the style guide to recreate the design, even though it was
already produced by the designer.
Inefficient file sharing: Review during the development stage is difficult, due to a lack of file sharing and
collaboration among stakeholders, business users, designers, and developers.
Lack of transparency: The lack of collaboration and transparency throughout this process can lead to missed
requirements, unmet expectations, and gaps between the initial vision and the final product.

White Paper
The trouble with designing apps in silos
When considering the gaps and roadblocks outlined above, the three major challenges of todays
traditional design approach include:
A lack of collaboration: Traditionally, each phase of the above design process takes place in
its own separate silo. Designers, developers, and business analysts are each expected to work
independently of one another, apps cannot be shared with stakeholders before development, and
little real-time feedback or collaboration takes place.
A lack of optimization: Because each person throughout the design process uses a separate set
of tools, everything created up until the development phase is considered throw-away work: The
designers cannot reuse the mockups and wireframes created during the user experience phase, and
the developers must recreate the style guide and assets already created by the designer.
A lack of multi-edge guidance: Because of the thousands of varying form factors and design
elements, the designer cannot hope to create a robust design capable of fulfilling user expectations
across every device.
Thus, after months in the development process, the design fails to meet the usability and design
standards originally outlined. Worse, because not every device and form factor was accounted for,
the apps overall usability in a multi-channel, multi-edge world is suspect.

The 6 paths to designing in the

multi-channel world
In spite of the gaps between the design process, legacy tools, and multi-channel environment,
designing an application that delivers an excellent user experience across all channels is still within
reach. Developers and designers have already begun looking to the future, and in doing so, they
have uncovered a number of technologies and processes capable of helping create a premium user
experience across this changing mobile landscape.
When used in conjunction with one another, these new technologies and processes combine to
create a new pathway toward a robust and efficient multi-channel app design strategy:
Cloud-based UX collaboration
Asset reusability and sharing
Real-time previews and simulators

Responsive web design

Adaptive web design
Multi-channel form factors

White Paper
Breaking down boundaries with cloud-based technologies
It bears repeating: One of the single greatest roadblocks to multi-channel app design is a lack of
real-time collaboration.
Cloud-based collaboration: Document sharing and communication collaboration are what most
people envision when they think of collaboration tools. However, as an increased onus is placed on
intuitive design and functionality, designers and developers are discovering they need a tool that
allows them to move beyond those simple functions.
Cloud-based workspaces are capable of breaking down the silos typically encountered within the
collaboration process. Through these workspaces, designers and developers are able to collaborate
throughout each step of the design process. No longer does the user experience designer have to
wait until the app is in development to uncover workflow bugs and usability errors. Instead, business
users, designers, and developers can communicate in real time, instantly applying annotations and
notes to every asset as it is designed..
Asset reusability and sharing: Traditionally, app design has been filled with throwaway work. For
example, the designs and style sheets a designer creates for one application or one device will not
translate to their next project. In terms of recreating assets and design, this adds up to a lot of extra
time, energy, and resources.
Today, designers are turning to cloud-based asset libraries to help them eliminate these redundant
processes. Not only can they use their design assets across applications and devices, but they are also
relying on the cloud for asset sharing among other users and projects. Through these asset libraries,
designers are able to standardize their designs, while avoiding unnecessary and redundant processes.
Real-time previews and simulators: Designers do not traditionally code. Instead, they will typically
rely on prototyping tools and static imagery to provide insights into the apps overall functionality
and usability. Unfortunately, while these tools are a valuable part of defining workflow, they fail in their
ability to accurately communicate the look, feel, and functionality of the app across multiple devices.
In answer to this lack of real-time functionality, designers are looking to device simulators. Instead
of needing to wait for the app to reach development, these simulators and app emulators allow
designers to simulate how the app will perform on any particular device.
Crossing multi-channel boundaries with real-time design
As the list of devices and operating systems continues to grow, designers and developers are
uncovering a number of efficient solutions including:

White Paper
Responsive web design: Have you ever tried to view a traditional website on a mobile device?
Without responsive or adaptive design, the page renders itself to the screen. It will not account for the
apps usability, the devices screen layout, or the operating systems limitations. This can greatly affect
the overall usability of the application, as the majority of text and imagery will become distorted.
Responsive design addresses these usability issues. Through responsive web design,
the applications layout will adapt to the layout of the web page. In essence, the layout
of the device is scaled accordingly, allowing for a better overall user experience.
Adaptive web design: Similar in theory to responsive design, adaptive design also scales the
application according to each individual device. However, unlike responsive design, the experience is
tailored specifically to work within the parameters of the device. Because they are intended to deliver
functionality based on device-specific parameters, applications using adaptive design are able to
create a more native user experience.
Saying goodbye to the blank canvas
Too many designers and user experience specialists are forced into taking a blank canvas approach
to app design. In other words, when considering the possibility of 10,000 plus separate devices,
screen sizes, and orientations, designers are limited to placing their designs within the framework of
a generic box. Without the ability to design and account for the seemingly limitless combination of
device aspects and ratios, this means that designers are essentially guessing at how the apps final
design will be interpreted.
Multi-edge form factors: As the list of devices that need to be accounted for grows longer,
designers are looking toward WYSIWYG (What You See Is What You Get) or WYSIWYM (What You
See Is What You Mobilize) design functionality to account for the varying multi-channel or multi-edge
device form factors. This ability to base their design within the actual aspects and ratios of each device
allows designers to reduce the amount of design iteration, while simultaneously improving the overall
functionality of the app.

Following the pathway to an experience-first

app design
The mobile landscape has transformed dramatically over the last several years. At one time, having an
app was all it took to capture interest and engagement. This, unfortunately, is no longer the case, as
users are now expecting a highly engaging and intuitive experience.
In answer to this new premium on user experience, designers are discovering they can no longer
rely on traditional web-based design tools and processes. Remember the traditional 4-phase linear
6

White Paper
approach to app design we outlined above? Happily, that siloed approach is no longer necessary.
Instead, designers, developers, and business now have the tools needed to break down those silos
and follow a more efficient and robust path to multi-channel app creation.
The new approach to multi-channel design
Phase 1: Requirements gathering
How is it different? No longer are a seemingly endless series of meetings needed to finalize and prioritize each
requirement. Instead, thanks to real-time collaboration and prototyping tools, stakeholders and business
users can now view the progression of the app as it advances through the design and development process.
Tools used: Cloud-based, real-time collaboration tools
Advantages of this new approach:
Consistent collaboration: Real-time visibility and status updates into the design and development process.
Real-time quality assurance: Misinterpretations in design intention and usability are quickly and easily
identified before the app reaches the development stage.
Uniform toolset: A uniform set of tools and assets are shared by business users, designers and developers.
Phase 2: User experience and app workflow design
How is it different? Instead of creating mockups and prototypes on a blank canvas, the user experience
designer can employ WYSIWYG technology and multi-channel form factors to create a concept that is
consistent across the varying screen sizes, resolutions, and layouts of each device. The result is the development of a consistent user experience without having to resort to the lowest common denominator.
Tools used: Cloud-based workspaces, WYSIWYG tools
Advantages of this new approach:
Multi-channel guidance: The user experience designer can easily account for the endless combination of
screens size, layouts, orientations, and platform capabilities.
Graphical accuracy: The prototype is based on actual device form factors, allowing it to offer a fuller, more
graphically accurate depiction of the app.
Usable prototypes: Prototypes produced during this stage are no longer throw-away. Instead they can be
used by the designer and the developer.
Phase 3: Graphic design
How is it different? Thanks to reusable asset libraries and cloud-based technologies, the graphic design
phase is no longer full of redundant and unrepeatable processes. Instead of creating any number of static,
throw-away files and style guides, the graphic designer can now create single assets that are compatible
across multi-device form factors and operating systems.
Tools used: Cloud-based asset libraries, WYSIWYG design tools
Advantages of this new approach:
Asset libraries: Asset libraries and WYSIWYG tools allow the designer to create reusable assets, while
simultaneously accounting for varying layouts, screen sizes and orientations.
Real-time previews: Real-time simulators allow the app to be previewed before it reaches development.
No more throw-away work: Each asset created by the designer can be reused during the development process.
Phase 4: Development
How is it different? Because of this new approach to multi-channel design, a process that took months can
now be done in weeks or even days. The developer no longer has to recreate work already completed during
the user experience and design phases. Additionally, simulator tools and WYSIWYG technology make it possible
for any design flow errors or usability issues to be identified before the app reaches the development stage.
Tools used: Adaptive and responsive web development, multi-channel form factors
Advantages of this new approach:
Adaptable designs: Designs are more readily adaptable to varying devices and platforms (iOS, Android,
Windows, etc.)
Reusable assets and files: Assets, images, and mockups created during previous phases are easily implemented.
No more silos: Uniform collaboration and transparency throughout the entire process ensures the
developed app remains consistent with the original design intentions.

White Paper

Conclusion
Thanks to todays cloud-based technologies, real-time prototyping tools, WYSIWYG or WYSIWYM
design platforms, and responsive development technologies, developers and designers can now work
productively alongside one another. The result is a new path to app design a path that allows for the
elimination of those inefficient design redundancies, while simultaneously furthering the development
of robust, multi-edge strategies.

Kony is the fastest-growing, cloud-based enterprise mobility solutions company and an industry leader among
mobile application development platform (MADP) providers. Kony empowers todays leading organizations to
compete in mobile time by rapidly delivering multi-edge mobile apps across the broadest array of devices and
systems, today and in the future. Kony offers ready-to-run business mobile apps to help organizations better
engage with customers and partners, as well as increase employee productivity through mobile device access to
company systems and information. Powered by Konys industry-leading Mobility Platform, enterprises can design,
build, configure, and manage mobile apps across the entire software development lifecycle, and get to market
faster with a lower total cost of ownership.
For two years in a row (2013 and 2014), Gartner has named Kony a Leader in its Magic Quadrant for Mobile
Application Development Platforms. Gartner also gave Kony the highest scores in 3 of 4 enterprise mobility use
cases in their latest Mobile Application Development Platform Critical Capabilities Report, released December
2014. In additional to these recognitions, Kony was also honored in the Mobile Star Awards for achievements in
enterprise application development; named the first place winner in CTIAs MobITs Awards in the Mobile
Applications, Development & Platforms category, and included on the Inc. 500|5000 list of fastest growing
private companies in America.
For more information, please visit www.kony.com. Connect with Kony on Twitter, Facebook, and LinkedIn.
7380 West Sand Lake Road #390 | Orlando, FL 32819 1.888.323.9630 | info@kony.com | www.kony.com
2015 Kony, Inc. All rights reserved.