wendyful logo

Influx: Non-Profit Management at a glance!

Influx: Non-Profit Management at a glance!

Influx: Non-Profit Management at a glance!

Managing volunteers, donations, and events for non-profits
in an easy-to-navigate way!

Managing volunteers, donations, and events for non-profits
in an easy-to-navigate way!

Managing volunteers, donations, and events for non-profits
in an easy-to-navigate way!

Client

Client

Non-profit Managers

Non-profit Managers

Scope

Scope

Research, UX, UI, User Testing, Prototyping

Research, UX, UI, User Testing, Prototyping

Duration

Duration

80 hours

80 hours

Overview

Overview

Overview

The Problem

The Problem

Managing a non-profit can be daunting since there are different categories of resources to keep track of. Existing software sometimes has a high learning curve, often needing to be clarified and unsightly. How can we help non-profit managers and other users be more efficient when managing and organizing their precious data and their most significant asset of all… their own time?

Managing a non-profit can be daunting since there are different categories of resources to keep track of. Existing software sometimes has a high learning curve, often needing to be clarified and unsightly. How can we help non-profit managers and other users be more efficient when managing and organizing their precious data and their most significant asset of all… their own time?

The Solution

The Solution

Influx is a dashboard tool that helps non-profits see and manage their assets effectively. It’s meant to help managers stay organized and have a glance-view of all their essential data with simplicity across multiple screen sizes.

Influx is a dashboard tool that helps non-profits see and manage their assets effectively. It’s meant to help managers stay organized and have a glance-view of all their essential data with simplicity across multiple screen sizes.

Research

Research

Research

Qualitative Research

Qualitative Research

This project started by performing qualitative research. The focus of this research was trying to understand how current non-profit managers interacted with their existing software.

A few goals were set to help empathize with them:

This project started by performing qualitative research. The focus of this research was trying to understand how current non-profit managers interacted with their existing software.

A few goals were set to help empathize with them:

This project started by performing qualitative research. The focus of this research was trying to understand how current non-profit managers interacted with their existing software.

A few goals were set to help empathize with them:

Research Goals

Research Goals

  • Understand managers’ successes and pain points when dealing with the organization’s data.

  • Understand their current ways of gathering volunteers

  • Understand how they go about collecting donations

  • Understand how they send event notices to people in the organization.

  • Gather visual data from similar tools.

  • Understand managers’ successes and pain points when dealing with the organization’s data.

  • Understand their current ways of gathering volunteers

  • Understand how they go about collecting donations

  • Understand how they send event notices to people in the organization.

  • Gather visual data from similar tools.

Competitive Research

Competitive Research

Two similar apps were studied for competitive research. The research focused on their information display and steps to finish a specific task. This in-depth study brought valuable insights into the strengths and weaknesses of these tools, which will help refine our product.

Two similar apps were studied for competitive research. The research focused on their information display and steps to finish a specific task. This in-depth study brought valuable insights into the strengths and weaknesses of these tools, which will help refine our product.

Photos of the Donor Perfect app taken from a tutorial in youtube.com

Photos of the Donor Perfect app taken from a tutorial in youtube.com

Photo of the Sage app taken from a tutorial in youtube.com

Photo of the Sage app taken from a tutorial in youtube.com

During this step, I noticed that several similar tools had a very dated look, making them harder to understand and use. In this step, I realized that having a modern, simplistic look can not only improve its aesthetics, but also help users feel less overwhelmed.

Forms' Data Analysis

During this step, I noticed that several similar tools had a very dated look, making them harder to understand and use. In this step, I realized that having a modern, simplistic look can not only improve its aesthetics but also help users feel less overwhelmed.

Forms' Data Analysis

Form data analysis was also performed for this case study, as we reviewed forms from various organizations to analyze the data needed to donate or become a volunteer/member of the organization.

Forms' Data Analysis

Not much in these forms jumped out as a surprise. They require basic personal information for both their donations and volunteer's forms. Something interesting was the preference in the "Volunteer Role". Maybe that's something that can be used in this project.

User Interviews

Not much in these forms stood out as a surprise. They require basic personal information for both their donations and volunteer forms. One interesting point was the preference for the "Volunteer Role".

User Interviews

Throughout the research process, we connected with users through personal remote interviews. These conversations were invaluable in helping us see from their perspective and gather insights from experienced users of similar products, helping us better grasp their needs.


Three participants who have experience with similar products were interviewed. Some of the questions that we brought up were:

  • How do you recruit new people to your organization?


  • What ways do people have to donate to your organization?


  • How can you see volunteer/member donations, roles, and more specific information?


  • What information is more valuable to have quickly at hand?

User Interviews

Throughout the research process, we connected with users through personal remote interviews. These conversations were invaluable in helping us see from their perspective and gather insights from experienced users of similar products, helping us better grasp their needs.


Three participants who have experience with similar products were interviewed. Some of the questions that we brought up were:

  • How do you recruit new people to your organization?


  • What ways do people have to donate to your organization?


  • How can you see volunteer/member donations, roles, and more specific information?


  • What information is more valuable to have quickly at hand?

Throughout the research process, we connected with users through personal remote interviews. These conversations were invaluable in helping us see from their perspective and gather insights from experienced users of similar products, helping us better grasp their needs.


Three participants who have experience with similar products were interviewed. Some of the questions that we brought up were:

  • How do you recruit new people to your organization?


  • What ways do people have to donate to your organization?


  • How can you see volunteer/member donations, roles, and more specific information?


  • What information is more valuable to have quickly at hand?

Interview Insights

A few insgihts were gathered from the user interview process:

  • Recruiters submit new volunteer information in a ticket form to the database. Then, after reviewing that all the information is correct on the system, the new volunteer is approved by the manager.


  • Donations to their organization can be made in several ways, such as submitting a payment online using bank accounts, or using checks, or a paper form with their info.


  • Each volunteer has an ID number under which you can see their role as a volunteer/member, total donations, basic information, and a picture.


  • They don’t have a dashboard vision of all these categories but have different tabs to access various kinds of information. They can also print reports as charts for different categories.


  • Users with higher credentials can see even more specific information.

What users said

These are a few phrases gathered from the interview process:

Not much in these forms jumped out as a surprise. They require basic personal information for both their donations and volunteer's forms. Something interesting was the preference in the "Volunteer Role". Maybe that's something that can be used in this project.

Form's Data Analysis

Form data analysis was also performed for this case study, as we reviewed forms from various organizations to analyze the data needed to donate or become a volunteer/member of the organization.

Users seemed frustrated with different points of their current system. Dealing with organizational data and permissions can be tricky and it's out of scope for this project, however, improving the design and simplicity of the software can help the communication between management levels.

What users said

How can you see volunteer/member donations, roles, and more specific information?

Interview Insights

A few insights were gathered from the user interview process:

  • Recruiters submit new volunteer information in a ticket form to the database. Then, after reviewing that all the information is correct on the system, the new volunteer is approved by the manager.


  • Donations to their organization can be made in several ways, such as submitting a payment online using bank accounts, or using checks, or a paper form with their info.


  • Each volunteer has an ID number under which you can see their role as a volunteer/member, total donations, basic information, and a picture.


  • They don’t have a dashboard vision of all these categories but have different tabs to access various kinds of information. They can also print reports as charts for different categories.


  • Users with higher credentials can see even more specific information.

A few insights were gathered from the user interview process:

  • Recruiters submit new volunteer information in a ticket form to the database. Then, after reviewing that all the information is correct on the system, the new volunteer is approved by the manager.


  • Donations to their organization can be made in several ways, such as submitting a payment online using bank accounts, or using checks, or a paper form with their info.


  • Each volunteer has an ID number under which you can see their role as a volunteer/member, total donations, basic information, and a picture.


  • They don’t have a dashboard vision of all these categories but have different tabs to access various kinds of information. They can also print reports as charts for different categories.


  • Users with higher credentials can see even more specific information.

What users said

These are a few phrases gathered from the interview process:

“Wish managing the events was more efficient

“Wish managing the events was more efficient

“Wish managing the events was more efficient


-WishfulThinker

-WishfulThinker

-WishfulThinker

“Approving a new volunteer is very time-consuming”

“Approving a new volunteer is very time-consuming”

“Approving a new volunteer is very time-consuming”


-FrustratedUser1

-FrustratedUser1

-FrustratedUser1

“There are different access levels on the app.”

“There are different access levels on the app.”

“There are different access levels on the app.”


-SeparationAnxiety3

-SeparationAnxiety3

-SeparationAnxiety3

What the users had to say

Users seemed frustrated with different points of their current system. Dealing with organizational data and permissions can be tricky and it's out of scope for this project, however, improving the design and simplicity of the software can help the communication between management levels.

How can you see volunteer/member donations, roles, and more specific information?

Defining

Defining

Defining

Priorities

Priorities

An Eisenhower matrix helped determine priorities for this project, dividing the tasks into less urgent and higher priority tasks. This intentional process included thinking about questions such as: What was brought up more frequently by the users interviewed? What could be improved from the similar products evaluated during competitive research? 

An Eisenhower matrix helped determine priorities for this project, dividing the tasks into less urgent and higher priority tasks. This intentional process included thinking about questions such as: What was brought up more frequently by the users interviewed? What could be improved from the similar products evaluated during competitive research? 

HMWs

In this exercise, the priorities were to design a simple dashboard with quick entry points to the different categories, an easy way to approve new members, and a detailed profile view.

On this exercise, the priorities were to design a simple dashboard with quick entry points to the different categories, an easy way to approve new members, and a detailed profile view.

Personas, HMWs and POVs

Personas, HMWs and POVs

After determining the priorities, the next step is to assign attributes and goals to fictional personas. This approach helps ensure that their designs are empathetic and created from the perspective of the intended users.

After determining the priorities, the next step is to assign attributes and goals to fictional personas. This approach helps ensure that their designs are empathetic and created from the perspective of the intended users.

User Flows and Task Flows

Priorities

How can we support these personas to reach their goals? This is when we utilize their profiles to develop POV and HMW statements to help them.

How can we support these personas to reach their goals? This is when we utilize their profiles to develop POV and HMW statements to help them.

Priorities

Taking the time to create How Might We (HMWs) and Point of View (POV) statements is essential because this is the stage in the design process when designers step into the user's perspective and cultivate empathy towards them to create a product that will be useful and thought-out.

In this case, we arrived at two definite plans: Helping Alexis visualize her important data more easily, and helping Peter expedite the process of approval of new volunteers.

Taking the time to create How Might We (HMWs) and Point of View (POV) statements is essential because this is the stage in the design process when designers step into the user's perspective and cultivate empathy towards them to create a product that will be useful and thought-out.

In this case, we arrived at two definite plans: Helping Alexis visualize her important data in an easier way, and helping Peter expedite the process of approval of new volunteers.

Taking the time to create How Might We (HMWs) and Point of View (POV) statements is essential because this is the stage in the design process when designers step into the user's perspective and cultivate empathy towards them to create a product that will be useful and thought-out.

In this case, we arrived at two definite plans: Helping Alexis visualize her important data more easily, and helping Peter expedite the process of approval of new volunteers.

User Flows and Task Flows

Developing Task Flows and User Flows will allow us to understand how users would engage with the product at a foundational level before getting into visual design specifics.


Here is a quick view of the Task Flow for navigating through the Volunteer Section of our product:

Developing Task Flows and User Flows will allow us to gain a deeper understanding of how users would engage with the product at a foundational level before getting into visual design specifics.

Here is a quick view of the Task Flow for navigating through the Volunteer Section of our product:

Developing Task Flows and User Flows will allow us to understand how users would engage with the product at a foundational level before getting into visual design specifics.


Here is a quick view of the Task Flow for navigating through the Volunteer Section of our product:

User Flows and Task Flows

The above task flow shows the steps that must be taken to complete the task. Once the steps are clear and concise, the visual aspect of design can start taking place.

The above task flow shows the steps that must be taken to complete the task. Once the steps are clear and concise, the visual aspect of design can start taking place.

Design

Design

Design

Low Fidelity

Low Fidelity

Sketching a cohesive dashboard at different breakpoints was an extraordinary challenge. What elements are considered essential for users on mobile devices, and which ones can be sacrificed? What do our users need more of? This is when referring to the user personas comes in extremely handy.

Sketching a cohesive dashboard at different breakpoints was an extraordinary challenge. What elements are considered essential for users on mobile devices, and which ones can be sacrificed? What do our users need more of? This is when referring to the user personas comes in extremely handy.

Branding Elements

Very simple branding was created for this product, utilizing five different colors that represent professionalism, excitement, and community.

Dashboard Overview (Early Sketch)

In the example above, we can see an early version of the product. Three dashboard sections are defined for every screen size. The bigger the screen, the more stats can be found at a glance, but everything that’s essential still exists in the mobile size.

Log In + Membership Section (Sketches for mobile and Desktop sizes)

In this set of sketches we can visualize the ideas that were coming to life for the log in and membership section (mobile and desktop) screens.

Branding Elements

Very simple branding was created for this product, utilizing five different colors that represent professionalism, excitement, and community.

Logo Exploration

The logo was designed to symbolize how non-profit organizations bring the community together.

A few options were considered, including reaching the final logo and logotype used in the mobile and desktop versions.

Colors

The selected colors were:

Chosen Typeface

Work Sans

Sans serif fonts like Work Sans have a clean and modern aesthetic that makes them ideal for digital products. They provide great readability across multiple weights and can enhance the user experience through their clarity.

The dark grey (#333333) conveys professionalism and reliability, providing a solid background for other elements. The bright blue (#4381C1 ) represents trust and communication, and it's ideal for highlighting key features and buttons. The vibrant orange (#F2542D) showcases energy and urgency, drawing attention to important notifications or calls to action. The dark, neutral green (#6BA06A) symbolizes growth and stability, perfect for success messages and positive outcomes. Finally, the soft beige (#FFFAF7) (offers a neutral and welcoming background that balances the more intense colors and ensures readability.

Sketching Posibilities

In the example above, we can see an early version of the product. Three dashboard sections are defined for every screen size. The bigger the screen, the more stats can be found at a glance, but everything that’s essential still exists in the mobile size.

Dashboard Overview (Early Sketches across sizes)


Dashboard Overview (Early Sketches across sizes)

Finding Book Reviews Flow

In the example above, we can see an early version of the dashboard. Three sections are defined for every screen size. The bigger the screen, the more stats can be found at a glance, but everything essential still exists in the mobile size.

Log In + Membership Section (sketches for mobile and Desktop sizes)

Finding Book Reviews Flow

In this set of sketches, we can visualize the ideas that were coming to life for the log-in and membership section (mobile and desktop) screens.

Branding Elements

Very simple branding was created for this product, utilizing five different colors that represent professionalism, excitement, and community.

Colors

The selected colors were:

Translating into High Fidelity

The dark grey (#333333) conveys professionalism and reliability, providing a solid background for other elements. The bright blue (#4381C1 ) represents trust and communication, it's ideal for highlighting key features and buttons. The vibrant orange (#F2542D) showcases energy and urgency, drawing attention to important notifications or calls to action. The dark, neutral green (#6BA06A) symbolizes growth and stability, perfect for success messages and positive outcomes. Finally, the soft beige (#FFFAF7) (offers a neutral and welcoming background that balances the more intense colors and ensures readability.

Chosen Typeface

Work Sans

Translating into High Fidelity

Sans serif fonts like Work Sans have a clean and modern aesthetic that makes them ideal for digital products. They provide great readability across multiple weights and can enhance the user experience through their clarity.

Logo Exploration

The logo was designed to symbolize how non-profit organizations bring the community together.

Logo Exploration

A few options were considered, including reaching the final logo and logotype used in the mobile and desktop versions.

High Fidelity

With the branding elements and low-fidelity sketches set, we began translating sketches into a more polished product.



It didn’t take long before it was noticed that some of the design elements in the low-fidelity sketches were crowding the space and didn’t quite fit together. Preserving the data was imperative, so a decision was reached to sacrifice some visual elements to preserve cohesion and design continuity.

High Fidelity

The image above shows the evolution of the main dashboard from early sketch to high-fidelity. The need for changes became more evident as designing in Figma took place. Other improvements were made with the help of peers' and mentors' feedback.

Other High Fidelity Screens

Other High Fidelity Screens

The spread above represents the entire mobile journey of finding a member by browsing the database, from start to finish. The pink circles represent the intended taps the user would make to complete this task.

Other High Fidelity Screens

The above screens are part of the tablet-sized screens developed for the same journey.

Comment from the Designer

Though designing visual elements has been my favorite part of the process, research has been the tool that has helped me figure out what elements to design in the first place. In my opinion, research is the most important tool to understand users. The research performed for this project helped create something that resonates with its intended client and makes them feel seen and understood.

Log In + Membership Section (Sketches for mobile and Desktop sizes)



In this set of sketches we can visualize the ideas that were coming to life for the log in and membership section (mobile and desktop) screens.

Colors

The selected colors were:

Logo Exploration

The logo was designed to symbolize how non-profit organizations bring the community together.

Chosen Typeface

Work Sans

Colors

The dark grey (#333333) conveys professionalism and reliability, providing a solid background for other elements. The bright blue (#4381C1 ) represents trust and communication, and it's ideal for highlighting key features and buttons. The vibrant orange (#F2542D) showcases energy and urgency, drawing attention to important notifications or calls to action. The dark, neutral green (#6BA06A) symbolizes growth and stability, perfect for success messages and positive outcomes. Finally, the soft beige (#FFFAF7) (offers a neutral and welcoming background that balances the more intense colors and ensures readability.

Colors

Sans serif fonts like Work Sans have a clean and modern aesthetic that makes them ideal for digital products. They provide great readability across multiple weights and can enhance the user experience through their clarity.

Colors

A few options were considered, including reaching the final logo and logotype used in the mobile and desktop versions.

Colors

The image above shows the evolution of the main dashboard from early sketch to high-fidelity. The need of changes became more evident as designing in Figma took place. Other improvements were made with the help of peers and mentors' feedback.

High Fidelity

With the branding elements and low-fidelity sketches set, we began translating sketches into a more polished product.


It didn’t take long before it was noticed that some of the design elements in the low-fidelity sketches were crowding the space and didn’t quite fit together. Preserving the data was imperative, so a decision was reached to sacrifice some visual elements to preserve cohesion and design continuity.

Colors

The spread above represents the entire mobile journey of finding a member by browsing the database, from start to finish. The pink circles represent the intended taps the user would make to complete this task.

Other High Fidelity Screens


Colors

The screens displayed above are part of the tablet-sized screens developed for the same journey.

Comment from Designer

Though designing visual elements has been my favorite part of the process, research has been the tool that has helped me figure out what elements to design in the first place. In my opinion, research is the most important tool to understand users. The research performed for this project helped create something that resonates with its intended client and to make them feel seen and understood.

The images above show the evolution of the main dashboard from early sketch to high-fidelity. The need of changes became more evident as designing in Figma took place. Other improvements were made with the help of peers and mentors' feedback.

Comment from the Designer

Though designing visual elements has been my favorite part of the process, research has been the tool that has helped me figure out what elements to design in the first place. In my opinion, research is the most important tool to understand users. The research performed for this project helped create something that resonates with its intended client and to make them feel seen and understood.

High Fidelity

With the branding elements and low-fidelity sketches set, we began translating sketches into a more polished product.

It didn’t take long before it was noticed that some of the design elements in the low-fidelity sketches were crowding the space and didn’t quite fit together. Preserving the data was imperative, so a decision was reached to sacrifice some visual elements to preserve cohesion and design continuity.

Other High Fidelity Screens

The spread above represents the entire mobile journey of finding a member by browsing the database, from start to finish. The pink circles represent the intended taps the user would make to complete this task.

The screens displayed above are part of the tablet-sized screens developed for the same journey.

Testing

Testing

Testing

User Testing

User Testing

Three people were interviewed remotely to test the products’ different flows on a Figma Prototype: Finding Membership Section (Across mobile, tablet, and desktop sizes),Database Browse (Mobile), Find Relevant Members (Desktop), Newest Volunteers (Tablet). However, we will focus on these flows for case study purposes:

  1. Membership Find (Mobile)

  2. Database Browse (Tablet)

  3. Relevant Members (Desktop)

Three people were interviewed remotely to test the products’ different flows on a Figma Prototype: Finding Membership Section (Across mobile, tablet, and desktop sizes),Database Browse (Mobile), Find Relevant Members (Desktop), Newest Volunteers (Tablet). However, we will focus on these flows for case study purposes:

  1. Membership Find (Mobile)

  2. Database Browse (Tablet)

  3. Relevant Members (Desktop)

Metrics of Success

Metrics of Success

The following rubrics were used as a tool to measure the success and usability of the product:


1. Successful completion of the task

2. Time of completion

3.  Ease of use on a scale of 1-5 (1 hard, 5-easy)

The following rubrics were used as a tool to measure the success and usability of the product:

1. Successful completion of the task

2. Time of completion

3.  Ease of use on a scale of 1-5 (1 hard, 5-easy)

The following rubrics were used as a tool to measure the success and usability of the product:


1. Successful completion of the task

2. Time of completion

3.  Ease of use on a scale of 1-5 (1 hard, 5-easy)

Completion

of all tasks

Membership Find: ✔️ Database Browse: ✔️ Relevant Member:✔️

Average

time completion

Membership Find: 10.58 s Database Browse: 29.71 s Relevant Member: 13.85 s

Completion

Completion

Ease

of all tasks

of all tasks

of navigation (out of 5)

Membership Find: ✔️
Database Browse: ✔️
Relevant Member:✔️


Membership Find: ✔️
Database Browse: ✔️
Relevant Member:✔️

Membership Find: 4.6 Database Browse: 3.6 Relevant Member: 4.2

Average

Average

time of completion

time of completion


Membership Find: 10.58 s
Database Browse: 29.71 s
Relevant Member: 13.85 s


Membership Find: 10.58s
Database Browse: 29.71s
Relevant Member: 13.85s

Ease

Ease

of navigation (out of 5)

of navigation (out of 5)


Membership Find: 4.6
Database Browse: 3.6
Relevant Member: 4.2


Membership Find: 4.6
Prompting: 3.6
Relevant Member: 4.2

What users said

What users said

Even after the users completed all the tasks, they were still eager to share a few thoughts:

Even after the users completed all the tasks, they were still eager to share a few thoughts:

The biggest finding from usability testing was the poorly rated Ease of Use of the “Database Browse” flow. Something needed to be improved on this flow to help users complete the task. But what exactly?...

What users said

“The database was hard to find”

“The database was hard to find”

-IndianaJones87

-IndianaJones87

“I felt like I had to scroll down too
much to find a relevant member”

“I felt like I had to scroll down too
much to find a relevant member”

-SoreFinger43

-SoreFinger43

“The icons feel familiar. They make me feel comfortable looking around”

“The icons feel familiar. They make me feel comfortable looking around”

-Ohana4Evr

-Ohana4Evr

Metrics of Success

The biggest finding from usability testing was the poorly rated Ease of Use of the “Database Browse” flow. Something needed to be improved on this flow to help users complete the task. But what exactly?...

The second round of testing brought down the time of completion from 29.7 seconds to an impressive 11.18 seconds. The ease of use increased from 3.6 to a unanimous 5 for all three participants, becoming the easiest flow for users to complete.

This iterations shows that the task has improved from its original version, making it a success.

Here what the final prototype looks like:

Iterations

Iterations

How can we improve the usability of our Database Browse flow so that users have an easier time completing the task? Let’s take a look at the version that was used for testing:

How can we improve the usability of our Database Browse flow so that users have an easier time completing the task? Let’s take a look at the version that was used for testing:

Seen above are the mobile and the tablet versions of the product. We can see how in both instances the “Browse” button gets lost in the grouping of buttons. What was causing this problem? Maybe the green “Review Applications” button drawed too much attention by being colorful. Or perhaps the buttons got lost by being too close to each other in a way that it made them less relevant. Since the “Review Applications” button is one of the main calls to actions in this layout, taking the color from it would not be an ideal solution. This is what we tried instead:

The three buttons who used to be group together now are separated and given a more efficient pairing.  The call to action button is now on top of the screen. Being on top and in color makes it even more relevant than it used to be. The other two buttons remain together, in a more efficient grouping since these two task are similar tasks to each other.


How would this iteration test? Would it have a better rating by the users? There was only one way to find out.

Users' Pain Point

Seen above are the mobile and the tablet versions of the product. We can see how in both instances the “Browse” button gets lost in the grouping of buttons. What was causing this problem? Maybe the green “Review Applications” button drew too much attention by being colorful. Or perhaps the buttons got lost by being too close to each other in a way that made them less relevant. Since the “Review Applications” button is one of the main calls to action in this layout, taking the color from it would not be an ideal solution. This is what we tried instead:

Metrics of Success

The three buttons that used to be grouped now are separated and given a more efficient pairing.  The call to action button is now on top of the screen. Being on top and in color makes it even more relevant than it used to be. The other two buttons remain together, in a more efficient grouping since these two tasks are similar tasks to each other.


How would this iteration test? Would it have a better rating by the users? There was only one way to find out.

The three buttons that used to be grouped now are separated and given a more efficient pairing.  The call to action button is now on top of the screen. Being on top and in color makes it even more relevant than it used to be. The other two buttons remain together, in a more efficient grouping since these two tasks are similar tasks to each other.


How would this iteration test? Would it have a better rating by the users? There was only one way to find out.

Testing Iterations

We interviewed three new people to test this specific flow. The purpose was to find out how the iterations performed. These were the results:

Solution

What the participants said

The second round of testing brought down the time of completion from 29.7 seconds to an impressive 11.18 seconds. The ease of use increased from 3.6 to a unanimous 5 for all three participants, becoming the easiest flow for users to complete.

This iteration shows that the task has improved from its original version, making it a success.


Here is what the final product looks like:

The second round of testing brought down the time of completion from 29.7 seconds to an impressive 11.18 seconds. The ease of use increased from 3.6 to a unanimous 5 for all three participants, becoming the easiest flow for users to complete.

This iteration shows that the task has improved from its original version, making it a success.


Here is what the final product looks like:

Testing Iterations

We interviewed three new people to test this specific flow. The purpose was to find out how the iterations performed. These were the results:

Final Product

Final Product

Final Product

Insights from Testing

At the end of this project, I’ve learned a few lessons:

  1. Simplicity is best when designing a dashboard. Tons of color, icons, and buttons can be distracting.

  2. When designing for multiple breakpoints, it’s best to start small and add value as the space grows, but keep the main functionalities as a minimum for each screen.

  3. Small changes can be efficient and create great impact for both users and businesses.


From doing the initial research to testing the final iterations, creating Influx was a very involved and exciting process. When users are empathized with and included during the design and iteration processes, it is very likely that the outcome will benefit them and also the business. Win-win in every possible way.

At the end of this project, I’ve learned a few lessons:

  1. Simplicity is best when designing a dashboard. Tons of color, icons, and buttons can be distracting.

  2. When designing for multiple breakpoints, it’s best to start small and add value as the space grows, but keep the main functionalities as a minimum for each screen.

  3. Small changes can be efficient and create great impact for both users and business.


From doing the initial research to testing the final iterations, creating Influx was a very involved and exciting process. When users are empathized with during the designing process, it is very likely that the outcome will benefit them and also the business. Win-win in every possible way.