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.

Designer or programmer? The tools your start-up needs to create digital products

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.

"When your startup grows, having a design system will ease the learning curve for new hires"

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 major advantage is that today we have tools that allow us to develop in all phases very cheaply”

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.

Desarrollo

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.

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.

"The apps make it possible to break down the geographical and time barriers between participants"
  • 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.

Group,Of,Multiethnic,Designers,Brainstorming
  • 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.

Diseño

“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.

Filter by city
Filtrar por tipo de evento
0
This site is registered on wpml.org as a development site.