Once you have completed the pre-design stage (which we featured previously here) and you’ve got the full recommendation of approach, you’re ready to move onto design.
What happens if I haven’t gone through the pre-design stage?
Some of our clients do start the app development process at the design stage, but generally we will still incorporate some amount of pre-design.
Sometimes, especially with larger companies, the client might have done all the user research themselves, but it’s vital to ensure the concept has been thoroughly validated. Otherwise, problems can emerge further down the line. Commonly, these problems include unrealistically long feature lists; failing to break down functionality between the day one and day one-hundred versions; and a lack of research on other apps already in the market.
Most importantly, you need to make sure that the final product won’t just be what you want as the app owner, but what the end user wants. With that established, it’s time to start designing your app.
What happens during the design stage?
The design stage is where the UI (user interface) and UX (user experience) design of your app is conceived and iterated upon until you have a final blueprint for the developers to then build.
It’s a little more fluid than other stages, because an input from one of the later steps might require going back to the drawing board to implement it. But generally speaking, we go through five steps, in this order: wireframe, concepts, collaborative design, prototyping, and user testing.
We start by creating the wireframe. This is a purely UX-based view of how the app will work, capturing the flow between screens. For example, if you have a login screen, that will also have to branch out to registration and forgotten password screens. The wireframe will show how those connect, and all the places you can go next from those screens.
Wireframes tend to be huge. They might have a hundred screens or more – including functions that aren’t going to be rolled out on day one, to make sure we know how they will fit into the overall flow.
They’re really useful for showing how many taps it takes to get from one place to another within the app. If it’s a news app, for example, and it takes six taps to get to the latest news article – then something needs changing.
Once we’ve finalised the wireframe – usually through a few feedback cycles with the client – we move onto visual design, creating the first concepts. We generally take two or three of the app’s key screens, and explore various ways each could be treated visually.
The amount of stylistic variety at this point depends largely on the client. If they have firm brand guidelines, it’s less about colour and font – which are likely to be fixed – and more about layout. If it’s an entrepreneur or SME, there’s often much more room to explore, and we’ll often involve multiple designers to get a wider range of aesthetic approaches.
Once these screens are sent off to the client, we begin a collaborative design process. We often find that clients like different parts of each concept – the button from this one, the colours in that one – so we’ll try to pull these together and refine them into a unified design, rather than a Frankenstein’s Monster of various designs.
This gives us a finalised visual design, which can be combined with the UX flow to create a working prototype. This is essentially a collection of images of each screen, with tappable hotspots that make it possible to move from screen to screen as if you’re using the real app. It can be installed on a device, meaning it’s accessible from an icon just like any other app, and we often find that people don’t realise it’s not a fully-functional app.
The final stage of design is user testing. The prototype will be given to users – if it’s an internal app, likely the people within the company who’ll be using the real thing once it’s live – to get their feedback. In particular, we’re looking to make sure that users can quickly understand what the app does and access its main functions.
We use the results of testing to do a final, more educated set of revisions, before moving onto development.
What are the outputs from the design stage?
By the end of the design stage, you will have a full UX wireframe; designs for all screens in the app, possibly separate for the iOS and Android versions; and an interactive prototype, which can be installed on any number of devices.
The prototype is useful not only to give a sense of how the app will really feel, and of the flow between screens, before we’ve built the final product, but can also be used to pitch the final app idea – whether that’s to investors, or simply selling it up the chain within your company. Either way, having a working prototype to play with makes it much easier to communicate the concept to stakeholders than a verbal explanation and a few screens.
What happens next?
The design stage ends with a clear brief that can be handed to the developers, whether that’s being handled by us or someone else.
It’s important that the design you end up with isn’t just attractive but something that can practically be built. Because our design team is part of a larger mobile agency, we handle each project as if we were going to build it. This means keeping in mind the budget and how easy it will be to develop, considering things like where open-source elements can be incorporated to streamline the process.
What should I be considering during the design stage?
A little bit of desk research can go a long way
You can quickly get an idea of what else is out there, in terms of similar apps from competitors and in other industries, with a few searches online. This can help firm up what to expect from your own app, establish what might be possible, and identify the gap in the market you’re trying to fill.
Learn to separate your opinions from your users’
The design stage is where clients often have the most input. After all, even if you don’t have any background in tech, everyone has a personal opinion of what an app should look like, based on their own experiences. This is encouraged – after all, this is a collaborative process – but it’s also important to detach your own feelings from what the end users will want.
Just because there’s a feature you like in a social media app, for example, that doesn’t mean it’s right for an internal stock management app. If you like a particular colour but research shows it doesn’t work for the target audience, then be ready to take a step back.
Consider the mobile version of your brand design
Big companies often have solid brand guidelines in place, but they might not have really considered how those translate to mobile. There are certain design elements might look great in print or even on the web, but when you put them on the smaller mobile screen, they just don’t work.
To take a simple example: does your logo sit comfortably on the top bar of the device, or in an app icon? Taking the full logo – especially if it has a tagline attached – and just trying to squash it down simply won’t work. We can help develop a mobile-friendly version of the mark, or work together with your brand team, if you have one, to establish what your brand looks like in the mobile space.
