What’s special about startup designs?
At first sight, design for a startup may look just like any website or app design. Still, our 8 years’ experience proves this idea wrong.
- Insufficient data. As a rule, a startupper provides only an idea: no brand colors, no brandbooks. We don’t even get references when it comes to projects that have no analogues on the market.
- Restricted budget. Economy is vital for startups. Thus, stick to the rule: the fewer UI corrections, the better.
- Time to market. A fast launch is a typical startup goal. So, again, minimize corrections to avoid delays.
As a result, a designer gets in a tricky situation:
How we used to create design concepts
We believed that design concepts were supposed to save clients’ time and demonstrate what our contribution was like. So, we devoted only 16 hours to design concepts.
Over that period, a designer had to study a client’s industry, select references, choose a key scenario, and make a graphic version of 2-3 screens.
We were sure it was a win-win approach. We could show what we were capable of and get more projects. At the same time, startups could test our skills at a reasonable price. Thus, we minimized our clients’ risks, as well as saved their time and money. Soon enough, we learned there was another side of that approach:
- Poor presentations. 2 days are not enough for a decent presentation. Thus, we just demonstrated a couple of key screens. This concept required loads of explanations that often didn’t save us from being misinterpreted.
Our concepts used to look like this
- Projects that are hard to implement. It’s impossible to build proper app logic over such a short period. You risk making a high-level concept that is still tough to implement.
- More corrections. When you don’t see the entire project logic, you may miss your clients’ expectations. In the best cases, it took us more time to get approval. If worse came to worst, we had to remake the entire design.
Therefore, to get rid of the downsides, we decided to change the process and give more time to design concepts. Besides, we made a portfolio and built quite a reputation on the market, so our clients were ready to wait longer.
Our new approach and its benefits
Now we create a design concept only after we think the app functionality through. It’s the key difference of our new approach.
A fully-fledged concept takes 40 hours to complete. This time is enough for a designer to get an insight into a client’s tasks, develop an app logic, and prepare a clear presentation.
Here go the changes:
Let’s have a closer look at each stage. We will use the
crypto wallet case as an example.
1. Collect references
At a project start, a manager gives designers the project info — the app’s goals and tasks, user stories, user data, and references.
We ask our clients to provide positive and negative references that indicate our guidelines and the ideas we should stay away from. Both Dribbble guidelines and existing apps will do just nicely as such refs.
In the crypto wallet case, we got negative and positive visual references. Besides, Metamask served as a functional reference.
Positive references
We also downloaded and studied other popular crypto apps — Binance, Coinbase, and Tonkeeper. This helped us avoid the competitors’ mistakes as well as take the best practices and patterns into account.
2. Develop a mind map
As soon as designers have explored references and seen what a client wanted, it’s time to plan an app’s functionality. Functionality maps (mind maps) are perfect for this purpose. A mind map shows a scheme of product functions and the ways users will interact with them.
We use Miro to make mind maps. It offers ready-made templates, so you don’t have to draw arrows, rectangles, and other elements from scratch.
Project mind map
We visualize structure elements, connections, page content, and actions. For example, we used the following keys for the crypto wallet mind map:
A manager shows the finished mind map to the client to approve functionality. In the crypto wallet case, the client planned to add a marketplace and a game section, but, at the design stage, they decided to exclude these functions from the MVP.
3. Draw wireframes
Then, designers start drawing wireframes — the B&W app screen skeletons. The main aim here is to decide on the position of the key elements on the screen.
We take an app’s functions, a user’s actions, and the required content and put it all on the screen.
This is how the mindmap evolved into wireframes
We build wireframes based on references. The main screens display the most frequent functions: a balance, a token list, and a quick access to token transfer & reception.
We critically evaluate even positive references. For example, Metamask proved to have downsides:
- We replaced a burger menu with a tap bar, as it’s easier to use.
With tab bars, it’s easy to reach the menu: users don’t have to stretch out their thumbs or use the other hand
- In Metamask, the token import button is placed under the token list. We placed it above the list to make it more accessible.
On the left screen, you have to scroll down to reach the button. On the right screen, a user is saved from extra movements
In total, our designers created about 40 wireframes for the crypto wallet.
4. Create a design concept
For the concept, we selected the screens that are packed with content and showcase the visual style:
- a dashboard
- a token screen
- an NFT token screen
The final design often differs from the wireframes — and it’s OK
5. Prepare a concept presentation
We use Readymag to prepare presentations. It’s a website and lending builder with design and coworking tools. To show the result to your client, just send them the relevant link.
Presentation is a cherry on top of this process. It explains the ideas behind the design concept: why you have selected this menu option, or why the button is round. Designers write texts for presentations, but a manager can help. Later, this presentation is demonstrated to investors or potential users during focus group research.
A presentation may also include:
- moodboards and references
- the color scheme
- typeface solutions
- graphic elements (for example, sets of icons and illustrations)
Such a presentation is far more vivid and clear than a few Figma screens
The crypto wallet concept presentation was successful, and our design was approved at the first try. So, it laid at the basis for the other screens and UI-kit — a set of the key elements, such as buttons, icons, and forms.
All in all, we made this design in 76 hours. We completed the other 100 screens in only 36 hours, because we didn’t waste our time on corrections and approval sessions.
Sometimes, we make not only a design concept but also videos with an animated interface: this way, it’s easier to explain how some vital functions work. Besides, a dynamic presentation is more telling.
An animation example for the crypto wallet presentation
The 16-hour express concepts allowed us to give the result to a client faster. Besides, companies with insufficient portfolios can use express concepts as a marketing tool. Still, in our case, disadvantages outweigh the advantages.
The new process takes more time: for example, it took half of the entire design process in the crypto wallet project. However, now we complete more designs, whereas with the 16-hour approach projects used to get abandoned pretty often. Our clients are more often satisfied with the result, and continue to collaborate with us after the concept presentation. So, the new approach proves workable.
