Designer or programmer? The tools your start-up needs to create digital products
Design and web development departments need to speak the same language when it comes to creating a quality digital product. Applying design thinking methodology and using platforms that facilitate constant and fluid communication between all sides involved in the process is essential.
It’s time to grow. A small startup, founded by three friends, hires a front-end developer (the visual part of the software that makes interaction with users possible) to program the web interface. Because the company is small it doesnât have a design department, but rather partners with a specialised company. This company delivers the result to the programmer, but the work is complicated: it failed to consider technical issues related to development. The collaboration could have been improved through virtual tools that facilitate communication.
At BBVA Open Innovation, weâve already laid out the keys to the process of creating for a startup to create a digital product, a process for which there are easy-to-use web apps; work tools that streamline the work between entrepreneurs, developers and UX designers. These tools can also be useful for participants in the Hackathon BBVA 2022, the BBVA Open Innovation competition celebrated on 21, 22 and 23 October. This is an event where multidisciplinary professionals will tackle the digital transformation challenges of the bankâs business units in Colombia, Spain, Mexico and Peru. Pre-registration for the competition is open here.
The design system, a common language
When starting to create a digital product, we recommend bringing in design professionals to develop the design system during the companyâs nascent stages. This is essentially a graphic and written framework that unifies all the relevant aspects of a brand. The basic elements of any design system are known as the fundamentals: font, colour palette, icons, etc., and having this in place will streamline the subsequent creation of the digital product. “When your startup grows, having a design system will ease the learning curve for new hires”, says Noe Medina, UX engineer at Paradigma Digital.
Jose Antonio MĂ©ndez, UX designer and information architect at BBVA, agrees on the importance of the design system to cut the ‘time to market’, the time that passes between the moment a product is conceptualised and the moment it hits the market. “If you are going to launch a digital product, it is important to identify that the web elements work the same in all your products and that the visual and user experience are homogeneous”, says MĂ©ndez. MarĂa FernĂĄndez, UX designer at BBVA adds that, thanks to design systems, “we can design a polished and consistent product faster”.
From design to development, step by step
Once the team has a design system in place, it can tackle the creation of any digital product with the cross-cutting use of the design system across all the departments involved in the project. Medina, for example, says he has regular meetings with the entire team to “have a coffee and ask any questions I may have”.
The BBVA Design team, winner in 2021 of a special mention in Spainâs National Design Awards, recommends that designers, developers and business managers work hand in hand starting in the product conceptualisation phase. âThey should use a common language, design system and use the same tools at every step of product creationâ, says Medina “The major advantage is that today we have tools that allow us to develop in all phases very cheaply”, adds JosĂ© Balaguer, director of the Master’s Degree in UX at UNIR.
The BBVA team uses digital solutions throughout the design thinking process, an ongoing improvement methodology that fosters innovation for solving problems in four phases: empathise, ideation, prototype and test. Based on these four stages, the experts consulted recommend platforms, often ‘freemium’ (with a basic free version and advanced features for a fee) for designing digital products.
1. Empathise
Essentially, the idea is to identify who it is designed for and what the user’s traits are through qualitative and quantitative research.
- Qualitative research: Indeemo or Incling, both are very similar apps that make it possible to create keys for studying user behaviour over a certain period of time.
- Quantitative research: There are several tools to create surveys, such as Survey Monkey, the ‘no-code’ tool Typeform, Survio and Google Forms.
2. Ideate
In this process, ideas are generated collaboratively in a brainstorming session and captured on a visual map. The apps make it possible to “break down the geographical and time barriers between participants”, says JosĂ© Balaguer.
- Miro: A board can be used to create posters, annotations, diagrams and groupings of concepts.
- Flowmap: UX planning tool for creating people profiles, customer experience maps and wireframes (visual prototypes of a digital product).
- Mural: A collaborative virtual whiteboard where you can combine text, images, videos, etc.
3. Prototype
The next step is to create visual prototypes of these ideas, that is, to shape them so that you can evaluate whether they work.
- Sketch: Only available for macOS operating system, this is the tool that the BBVA Design team uses. They supplement it with a bridging tool, InVision, to inspect the technical specs of those components that will be developed later.
- Figma: This is a no code digital product prototyping software that allows cross-team collaboration. This intuitive and agile tool became a unicorn a few months back: the company is valued at 10 billion dollars. Noe Medina is clear: âFigma is the tool: it allows you to leave notes and comments to encourage conversation and mention someone from the business or legal team to support you at specific timesâ.
- Adobe XD: Very similar to Figma, it allows the design of user experiences and user interfaces for websites, apps and more.
- Marvel: A tool that makes it easy to test products online.
- Storybook: This is an open-source solution for building UI (User Interface) components.
4. Testing
The handoff doesnât mark the end of the design teamâs work. Prototypes need to be tested and iterated, that is, the process should be repeated to refine the result through an agile incorporation of feedback. The tools mentioned above can be used for this purpose.
“Itâs important to really check the tools and make sure youâre always up to date because they change very quickly in terms of price and features”, concludes JosĂ© Balaguer. The key is to assess which tools are best suited to the circumstances of each entrepreneur.
To solve their issues when creating digital products, the imaginary startup we mentioned at the beginning of the article has developed a design system. The front-end programmer has regular conversations with the design team, and they work together using virtual platforms. There will be challenges to face, but the strategy guarantees success.
