Tools and Methods

Connecting the dots

Method System v01_Method-AtomicDesign

UI Design

Atomic Design

This quantitative method refers to measuring user's behaviors when asked to perform a specific task in a digital product A and a version B, where version B might have changes to improve the experience.

Projects and Clients: Davivienda* by Accenture
First year applied: 2019
Resources: https://maze.co/
*Project under NDA.

Method
  1. A clear and specific hipothesis is formulated that can be proved by changing the UI.
  2. 2 prototypes are built, a version A and a version B. One of these is the current product and the other contains the improvements.
  3. Both prototypes are tested with multiple users and their performance is measured. For quantitative testing, Maze can be a valuable service. The prototypes, if built wuth a design tool such as Figma, they can be directly linked to the online platform.
  4. The data is analyzed by the team so that insights and findings can be obtained.
Personal experience
While consulting for a major local bank to improve it's digital products, as design team consultants we arrived at the hipothesis that the navigation could be improved so that clients could find features more easily. We proposed and carried out AB tests to measure the average time it took clients to find specific information.
We were able to to prove with numbers that there was a need to reconsider the navigation design and overall architecture to improve the client's experience.
Method System v01_Method-Generative-50

UI Design

Generative Design

This quantitative method refers to measuring user's behaviors when asked to perform a specific task in a digital product A and a version B, where version B might have changes to improve the experience.

Projects and Clients: Davivienda* by Accenture
First year applied: 2019
Resources: https://maze.co/
*Project under NDA.

Method
  1. A clear and specific hipothesis is formulated that can be proved by changing the UI.
  2. 2 prototypes are built, a version A and a version B. One of these is the current product and the other contains the improvements.
  3. Both prototypes are tested with multiple users and their performance is measured. For quantitative testing, Maze can be a valuable service. The prototypes, if built wuth a design tool such as Figma, they can be directly linked to the online platform.
  4. The data is analyzed by the team so that insights and findings can be obtained.
Personal experience
While consulting for a major local bank to improve it's digital products, as design team consultants we arrived at the hipothesis that the navigation could be improved so that clients could find features more easily. We proposed and carried out AB tests to measure the average time it took clients to find specific information.
We were able to to prove with numbers that there was a need to reconsider the navigation design and overall architecture to improve the client's experience.
Method System v01_Method-Discovery

UX/UI Design

Product Discovery

Product discovery is a customer-centric process that involves researching user needs, developing a solution, and testing a prototype. The goal is to build a product that solves user problems and is feasible to use.

For an established time, a multidisciplinary team might be gathered so that by the end of the process, there will be a clear roadmap and product vision to start the design and engineering process.

Projects and Clients: Undisclosed* client by Globant
First year applied: 2017
*Project under NDA.

Personal experience
In my first Discovery, a team of consultants that had never worked together was assembled with very diverse backgrounds and roles. We were tasked with solving a very prestigious advertising company's need for a trend and data collecting tool in New York for 3 weeks. The team consisted of an Engineering Lead, a Business Analyst, a Data Scientist, a UX Designer, a Creative Director and a QA Specialist.

The method, as applied, consisted of:
  1. Gather the business needs by interviewing the different stakeholders, performed by the Business Analyst.
  2. In parallell, the Data Scientist would dig up the different data streams that the product would need and solve how these would work together.
  3. Perform user interviews to define the problem and produce the wireframes the product needed, performed by the UX Designer.
  4. The Creative Director would envision the product and the visual aspect of the final solution.
  5. The QA Specialist would define the process to ensure the product's quality.
  6. All the engineering aspects of the product were coordinated by the Engineering Lead, who also coordinated the workflow and timeline, taking on the responsibilities of project management.
Method System v01_Method-ABTesting-48

UX/UI Design

Quantitative A/B Testing

This quantitative method refers to measuring user's behaviors when asked to perform a specific task in a digital product A and a version B, where version B might have changes to improve the experience.

Projects and Clients: Davivienda* by Accenture
First year applied: 2019
Resources: https://maze.co/
*Project under NDA.

Method
  1. A clear and specific hipothesis is formulated that can be proved by changing the UI.
  2. 2 prototypes are built, a version A and a version B. One of these is the current product and the other contains the improvements.
  3. Both prototypes are tested with multiple users and their performance is measured. For quantitative testing, Maze can be a valuable service. The prototypes, if built wuth a design tool such as Figma, they can be directly linked to the online platform.
  4. The data is analyzed by the team so that insights and findings can be obtained.
Personal experience
While consulting for a major local bank to improve it's digital products, as design team consultants we arrived at the hipothesis that the navigation could be improved so that clients could find features more easily. We proposed and carried out AB tests to measure the average time it took clients to find specific information.
We were able to to prove with numbers that there was a need to reconsider the navigation design and overall architecture to improve the client's experience.

Summary:

Digital drawing and layout tools
Animation tools
Coding tools

The tools and methods that I currently use

From coding to generative animation

Every project is different, so every approach to it's solution should also be different. To me, this makes my craft interesting and also keeps me, and the times I work with, always innovating with the ways we work. From analogue to digital, from post-its to generative tools, approaching design with a fresh mindset enables us to stay motivated and playful, while discovering new paths and possibilities.

Methods

Method System v01_Method-VisualDesign
Visual Design
Method System v01
UX Design
Method System v01_Method-UI
UI Design
Method System v01_Method-Atomic
Atomic Design
Method System v01_Method-MotionDesign
Motion Design
Method System v01_Method-Information
Information Design
Method System v01_Method-Generative
Generative Design
Method System v01_Method-DataVis
Data Visualization
Method System v01_Method-CreativeCoding
Creative Coding
Method System v01_Method-ArtDirection
Art Direction
Method System v01_Method-Spatial
Spatial Design
Method System v01_Method-Illustration
Illustration
Method System v01_Method-Discovery0
Product Discovery
Method System v01_Method-Branding
Branding
Method System v01_Method-ABTesting
AB Testing
Method System v01_Method-Editorial
Editorial Design

Tools

Method System v01_Tool-Processing-Dark
Processing
Method System v01_Tool-Photoshop-Dark
Photoshop
Method System v01_Tool-P5JS-Dark
P5.js
Method System v01_Tool-Midjourney-Dark
Midjourney
Method System v01_Tool-Illustrator-Dark
Illustrator
Method System v01_Tool-Figma-Dark
Figma
Method System v01_Tool-Cavalry-Dark
Cavalry
Method System v01_Tool-AfterEffects-Dark
AfterEffects

Made with Semplice

Contact

If you want to get in touch, just reach out on any of the following:

© 2024 Juan Piñeres