Apps aren’t going away. In fact, they’re only getting more advanced, catering for even more of our needs. In 2020, there were over five million apps available for download across Apple App and Google Play Stores, and on average, smartphone owners use a hefty 9-10 apps every day. So it’s no surprise that investors are on the lookout for the next big thing.
In the last few years here at Fortnight, we’ve created apps for Simba Sleep, Bumble, Mindful Chef and Bear (to name a few). Even though all of these businesses are within different industries, they all need brilliant apps that cater for their individual audiences. Apps that feel seamless but also have the creative flair to make them stand out from their competitors.
Whether you’re just developing an idea or you’re reworking an existing product, the best way to establish your app and imagine its potential is to create a working, interactive prototype.
In short: a prototype is a sample – a mockup of your app. Prototypes can be simple, such as a drawn out mockup, but they should be able to show the app’s core design and function. Today, many digital teams create an interactive prototype as a separate design sprint during their app build project.
Interactive prototypes are powerful tools. Designed to look and feel like the finished product, you can click around and test out how specific functionality or design structures will work, but crucially, it doesn’t contain the finished details. We call this type of prototype ‘high fidelity’.
Prototypes can give you valuable insight when testing ideas and theories, preventing any drastic late changes. They help developers to understand the build stage of the app, which can streamline the project as the app nears compilation later down the line. And crucially to any startups, an interactive prototype also costs 1/15th of the price of a minimum viable product (MVP).
To get to the stage where you have an app mockup that’s investment-ready, we’ve devised a ‘Fortnight process’ made up of several design sprints that will create a cost-effective interactive prototype in just two weeks.
At Fortnight, we work with all different types of businesses, from startups through to high end brands.
Our first step is to establish where the client is with their ideas, and whether we fit together well as a client and a creative partner. Over the years, we’ve found that compatibility of personality makes the process flow and separates us from other agencies with our transparency and communication, allowing us to achieve the best results in the quickest time.
In our kick-off call, we’ll ask the client a few gently probing questions and work up an initial approach for the steps we’ll take based on their answers. This is tailored to each client rather than a one-size-fits-all approach, but there’s one thing we bring to every project: close collaboration.
We believe full transparency with clients is the key to a successful working relationship. We onboard our clients to the Slack communications platform so they have access to us for the duration of the project, allowing them to interact with us whenever they choose. In turn, we give them daily updates as to the current standing of their project. Over-communicating is encouraged.
We also don’t wait to do a ‘big reveal’. Clients see all of our working files with clear access to each part of our workflow. This creates clarity as clients can see how and why certain design decisions are made and add their thoughts to the process as we create.
For us, the ‘two revisions’ way of regulating clients doesn’t work. We find this stunts our working flows, so we deliberately ask for feedback at every stage, with continual iteration along the way.
This more fluid and organic interaction means we can react in real time, helping us to get stages over the line more efficiently, especially in pandemic times where many of us aren’t meeting in person.
Our initial design sprint is all about research. Our design team will meet with the stakeholders. Although we’ve already got together a project brief, bringing minds together allows us to tidy up any outstanding questions and really get to know what’s driving this app development – for example, have there been iterations in the past? What has the client done previously? Do they have any digital experience?
If we’re working with a SaaS product or a platform that’s already live, we’ll get a demo booked in so we can understand exactly how it works.
Now with the internal knowledge of the client and their product, we’ll expand our research to their industry. Our team looks into various industry standards and will assess what’s working and what isn’t, along with the reasons why. This very practical step involves us looking through different UI components and screens from a spectrum of apps and taking screen recordings to compare how things work. We’ll also do some broad user research by looking through reviews and the popularity of certain apps over time.
Clients now get to see our research collated together in a moodboard. Within this, we’ll start to map out what specific design features could work for the client’s app and why – plus we’ll start to bring a bit of our own flair into the mix with some creative brainstorming.
With some design ideas in place, in our third design sprint we start to build the app architecture, the site map and some initial user flows by building out the client’s feature list.
To do this, we use a process called ‘MoSCoW’: Must Have/Should Have/Could Have/Would Have. The client has a workshop with us where we create this list together and prioritise what’s essential for version one of the app.
At this point our development team will run a tech investigation to establish whether everything is matching the project scope and meeting the client’s needs. This will feed into the design team’s wireframes as we start to map out the app.
NOTE: Tech investigations are absolutely vital in making sure your project doesn’t get held up. If this is done at the wrong moment or the design team rush ahead agreeing aspects with the client, it can change the timescale and scope of development.
Using our app architecture and the features list, we create a wireframe of the app that uses the UI and the core components. Consider this the foundations of the app or the bare bones – with no design or branding. In this design sprint, we map out every state that the app has to consider and look at the different user flows within it – for example, how a user moves from the home screen through to a basket page.
It’s also at this stage that we create a design system for the development team. This contains all of the design components needed, including the typography and the colour palette for the app which can be applied easily to different screens without recreating those consistent assets. It also has all of the documentation for how the interactions should work, every state that’s necessary and all of the variants to make everything really clear.
This is good practice which again streamlines the process by making it as easy and transitional as possible when the app comes to development.
Once the wireframes and design systems are all approved by our client, it’s time to add some magic. In this design sprint, we create high-fidelity designs that act as the end goal for what the app should look like once it goes into development.
NOTE: It’s important to continually refer to the research – it’s always in the background and we add to it continually throughout the different stages of the prototyping process.
The final design sprint is where the development team gets to shine. Our designers will sit alongside them and go over every screen and flow, and confirm the details including animations, transitions and special interactions.
We add the design on top of the wireframe infrastructure in the interface design tool Figma – including the branding, colours, typography and other assets we’ve created for the app. We analyse each component specifically and dig into the details, such as: does it have certain behaviours when a user clicks? Is it interactive? Does it look as polished as other sections?
As standard during this design sprint, we carry out internal hardcore testing between our team and the client to ensure the app is up to standard. We filter this feedback into the later development process as we go so we can identify any tweaks that need to be made before we create the finished product.
If the client requests it, we user test the clickable app to see if the flows are correct and that people are making sense of what the app is doing. It’s a good way to get feedback if that’s an option the client wants to take. As always, the client can feed back directly into Figma as this process is happening, allowing us to make tweaks immediately.
At this point, when the client is happy, we’ll sign off on the project and they have a working, interactive prototype that’s ready for potential investors.
If you’re considering developing an app for your business this year, we’d love to help kickstart your journey and bring your ideas to life. At Fortnight, we specialise in the design and development of mobile apps for ambitious and caring brands. Share your ideas and projects with us - let's chat!
.png)
