Logo designed by the wonderful UI Design Team — Kelly Ann Racich & Cici Wang.

Granted Consulting — Web App Design Project

I am a UX designer and for the past three weeks I have had the privilege to work with a team of designers (UX /UI) to design a web application for a Vancouver based company, Granted Consulting.

The Design Team (Mana Habibian (me), Cody Rossi, Jason Shen, Kelly-Ann Racich, Cici Wang)

The Opportunity

Granted Consulting is a Vancouver based company with the main goal of helping small to medium sized businesses achieve their full potential by getting government funding through grants. They help manage the grant application process from start to finish and streamline this process for their clients. However, Granted has been getting a huge amount of traffic over the past years and they are not able to help everyone. Therefore, we were tasked with creating an application that can help smaller sized businesses through the grant application process and help them go through the steps easily on their own.

Preview of the Prototype!

Research

First, before really getting into the research I had to understand what grants were and what the process of applying for one is. Once I had a firm understand of the application process I was able to start my research by conducting interviews.

Understanding the grant process — This progress bar was included in one of our onboarding screens.

Interviews

Overall we interviewed a total of 15 people and I was a part of conducting 12 of those. We primarily focused on interviewing smaller business owners so that we could cater the application towards those businesses and individuals. We learned a lot of valuable information from these interviews and chose to base most of our design decisions on this qualitative data.

Every single one of our interview subjects stated that the most difficult part of applying for grants is finding what you are eligible for and sifting through all the information that is presented to you on the government websites. I interviewed a startup founder in Vancouver, Ali Saheli who had a lot to say about the grant process.

I had a terrible experience — it was hard to find the right application, hard to find the requirements, time consuming to fill out. This is why I found consultants to do the work for me.” — Ali Saheli (Investment partner at 7 Gate Ventures)

This sentiment was seen throughout all our interviews. No one enjoyed going through the process and found it to be very frustrating and confusing. As well, we noticed another trend. That all these small business owners were very busy doing other things and didn’t have the time to go through a thick amount of data for hours only to realize that they still aren’t clear on what they are eligible to apply for.

During our client meeting with Stephanie Sang, Granted Consulting CEO, we also realized that grant requirements can change on a weekly basis, maybe even daily. So another point of frustration is knowing the changes that have been made to the applications.

The main key insights taken from all the Interviews were the following :

  • People are overwhelmed with information / have a hard navigating the government websites /Need guidance
  • Difficulty understanding the grant process
  • It is near impossible to find out what you’re eligible for
  • Small business owners are busy and don’t have the time to spend sifting through the information

Surveys

We also created two surveys, one specifically designed for previous Granted Consulting clients who have used their services and are more familiar with the grant process and one for general small business owners who may or may not have had experience with grants and dealings with the government.

Through both the survey and interviews we were able to define the scope of our project. Initially, this was supposed to be a phone application. However through research we found out that no one wants to go through the grant process while on their mobile phone. We were thus able to define the scope of our project — designing for a web application.

As you can see below, 69% of our survey participants stated that they normally use a desktop computer for their research and 62% stated that they would like to go through the grant process via a web application. 30% stated that they would like to speak to a real person. This is something that also came up in a few of our interviews, that being able to speak to a real person when a problem arises would be very beneficial. Due to the scope of the project, this can be viewed as a future consideration and I will discuss it more in the feature prioritization / future considerations section for version 2 of the Granted web app.

Survey results

Competitive/Comparative Analysis

We did a competitive/ comparative analysis with Granted consulting and a few Canadian competitors. We quickly realized that none of these competitors currently have an application that would guide the user through the grant process. Therefore, exploring this field would definitely help expand Granted consulting to great heights in the future.


UI Research

Although I was a UX designer on this project, I will briefly touch on the work that the UI designers did.

10 second gut test

One of the most important elements of their research process was doing a 10 second gut test with our client at the first kick-off meeting.

They showed our client a series of 20 images for intervals of 10 seconds each, and asked them to write down their initial “gut” reaction to each image on a scale of 1 to 6. The images were taken from different websites, some with similar styles and some with very different styles and themes. This helped the UI designers form a clearer picture of our client’s vision and expectations for their business idea.

Top 3 rated pictures

Gut test Findings

The results of the gut test were quite clear — The top three ratings were for website landing pages that had three things in common.

  1. A lively shade of blue
  2. Subtle use of images (perhaps with a colour overlay)
  3. Minimal, and straight-forward styles

Two Art Directions

The mission of Granted consulting is to empower small businesses through grants. With that in mind, the UI designers created two different art directions.

First Art Direction — “Peace of Mind”

  • Friendly
  • Familiar
  • Reliable

To show the user that applying for grants doesn’t have to be a painful experience. It can be easy and simple.

Second Art Direction — “Accomplishment”

  • Driven
  • Confident
  • Professional

To give the user a feeling of great accomplishment. That their business can grow and become even more successful than before.


Planning

I will switch back over to talking about the UX planning that we did after conducting our research.

Persona

This is Michael Carr, the user persona we molded through our research.

His goals are:

  • Expand his business
  • Train and hire more employees
  • Balance personal and work life

His frustrations are:

  • Time constraints
  • How long the grant proess takes
  • Confusing and difficult to apply for grants

His motivations are:

  • Budget conscious
  • Being efficient
  • Time conscious

Storyboard

This is a storyboard representing a scenario in which Michael Carr would stumble upon our app, and how that would make his grant application process easier and more enjoyable.

  1. Michael owns a small coffee shop.
  2. He wants to apply for a grant to hire more employees.
  3. He is aggravated at the grant process and doesn’t know what he is eligible for.
  4. He is strapped for time.
  5. He discovers Granted.
  6. Michael is finally eased through the grant process and gets the funding he needed to hire and train more employees.

Defining the Problem

Through research, we were presented with many problems but we had to define the main problem that we were going to solve by designing this app. The challenges we defined were the following:

  1. Finding a way to streamline the grant process while keeping the user engaged.
  2. Make the process simpler, faster and less confusing.

Feature Prioritization — Must Have Features

After conducting research, we did an affinity diagram to gather the data and main take-aways and organize them into groupings. We came up with the main feature list for this web application that way.

Affinity Diagram showing the data from the interview and survey organized into groupings.

Many people we interviewed, struggled with knowing what grants they were eligible for, and clearly knowing the requirements.

So some must have features were the following :

  1. Having a database of all grants
  2. Being able to customize the user’s experience based on a few questions
  3. Having clear application requirements
  4. Keeping the user engaged and on track by giving them notifications / reminders /alerts about the stage of the application
  5. A progress bar so they can visually see where in the process they are
  6. Calendar feature where all deadlines and reminders come together in one place.

These features are required for our MVP — minimum viable product. There were also some features that came up that are nice to have but perhaps as future considerations.

Future Considerations — Nice to Have Features

  1. Live chat support / Screen sharing option — During our interviews, some people were concerned about not being able to have a person to talk to if they ran into problems, and having to wait days for a response via email — these features could help solve that problem.
  2. Having grant application fulfillment percentages
  3. Linking the calendar feature to google calendar so the user can have access to it at all times
  4. Automating Document grabbing — making the document grabbing process simpler but automating it and not having the user go through many steps to acquire the needed documents.
  5. Other languages (i.e. French) — so that our client can present their app to the government

Site Map

With the main features planned, we had a good idea of what we wanted on our web application. Below is the final structure of our web app.

User Flow

Once we had the structure of the web application, we created a flow for our user. This user flow is depicting the steps that a new user would take from registering → finding an eligible grant they want to apply for → finishing application → getting funding!

Initially, the user flow we had created was the one on the left hand side which looks a bit different than our final user flow on the right hand side. These are changes that were made during testing and I will describe them in more detail in the usability testing section of this case study but the main difference is that on the initial user flow (left) we had separate pages for “active grants”, “past grants” and “pending grants” which were all combined into one “my grants” page on the final user flow (right).

User flow iterations. 1st iteration on the left and final version on the right.

Design

UI design

Again, I will describe a little bit of what the UI team did and the design decisions they made.

Moodboard

At the second meeting with our client they determined that the final art direction would be “peace of mind.” With some more information from our client in terms of her vision and feedback on their work, they were able refine the overall intended mood of the app and start building a style tile and style guide.

Tying in with their gut test, they used plenty of negative space, to prevent the user from feeling overwhelmed, or disorganized, and instead would foster a sense of freedom, ease, and simplicity.

Style tiles

Style guide

Typeface — They chose a typeface called Montserrat, thanks to its versatility (wide range of weights and styles to choose from), its accessibility in other languages (future consideration). It is modern, but not cold, friendly, but not too casual.

Its rounded shapes perpetuate the idea of an easy process, but Montserrat can just as easily be a “workhorse”, conveying information in body text and input fields.

Colours — After getting familiar with the “Granted” brand, and particularly after the gut test, the UI designers could not ignore the colour blue. They paired the shade of blue with its natural complement, a true orange. The two colours balance well as they are each other’s exact opposite on the colour wheel. Together, they are youthful and engaging.

Having two such bright colours as our main colour palette, they didn’t want to introduce a third colour, which would appear unbalanced. They used varying opacities of the same shades when necessary. For neutrals, they chose a dark charcoal grey instead of black, as black can seem harsh and is actually often harder on the eyes when reading on a screen, and then two lighter shades of grey to offset the brighter colours and to indicate negative states where necessary. For example, a grey stroke on an icon of a document, which changes to blue when the document is successfully uploaded.

Buttons — They created 4 types for different occasions. The primary one would be used the most in the app, to visually direct users to click on it.They also used rounded angles for both buttons and icons to keep the style consistent and to create a friendly and smooth approach.

logo iterations

Logo Iteration 1 vs Logo Iteration 2 (Chosen one)

They explored a number of iterations for logos for the app. In the first iteration (left), they tried to maintain the integrity of the original logo. They removed “consulting” as the app would simply be called “Granted”, chose a different sans-serif type face, and incorporated the blue that was chosen for the main colour of the app.They quickly realized that this version did not “mesh” well with the mood and style they had been developing, which was in turn based on the UX research and their discussions with our client. As well, the serif nature of the font was not representative of the app, so they decided to go with the second iteration of the logo (right).

Design Studio

Design studio is a method to start rapid prototyping very efficiently. At this point we had our persona, Michael Carr and some research based data. We started by conducting 2 minute sketches for each of our main pages. Each member then presented their sketching decisions to the team, we discussed the features they included and refined the sketches. After 5–6 rounds, we had a consensus to create our master design.

Pictures taken during design studio

Usability Testing

Once we came up with our master design plan, we sketched our paper prototypes and began user testing. Our main task for the user was that they are entering the app as a first time user and are going to find a grant they are eligible to apply for and go through the application process step by step.

Here, I am conducting one of the user testing sessions.
User Testing Pictures

We tested 7 people with our paper prototypes and made some big changes.

1. Onboarding screens

These are the screens that the first time user would go through in order to understand what the Granted app has to offer.

Initially we had 3 onboarding screens, however through user-testing I noticed that most of our users weren’t clear on the grant application process and many thought that funding would be received earlier on in the process once the application has been submitted. So one of the first changes that we made based on testing was deciding to add one more page to our onboarding screens and clearly indicating the grant process with a progress bar.

Initial onboarding screens

This progress bar was then introduced on the different pages of the app, so the user is always aware of what stage they’re at. Once we digitized our prototype and tested again, we realized that having the ‘back’ and ‘next’ buttons on the bottom of the page as well as having the carousel was confusing. Therefore we decided to eliminate the buttons to keep the user engaged with the material presented. However, we kept the carousel so that if the user wanted to change the page they could do that via the carousel at the bottom.

4th onboarding screen depicting the grant application process was added through testing — changes made from lo fidelity → mid fidelity → hi fidelity

Below is another example of this change being implemented. This is the page you land on when you click on a specific grant and decide to begin the application. Throughout testing we added the progress bar discussed above to this page (as well as others) so that the user is always kept on track and can visually see what step of the process they are at. We also decided to add a feedback popup so the user is aware that their application has been submitted successfully.

Grant application form iterations — decided to add progress bar at top of page based on testing.

2. Main Pages of Application

These three pages were combined into one “My grants” page through testing.

Here are the main pages of the application. Initially we had 4 different pages.

  1. Eligible grants — a page that shows you all that you are eligible to apply for based on a questionnaire.
  2. Active grants — a page that shows you the grants you are in the process of applying for.
  3. Past grants — a page that shows the grants that you had applied for in the past and perhaps got funding for.
  4. Pending grants — a page that shows all the grants that you have submitted but are not approved yet.

User testing proved the ‘pending’, ‘past’ and ‘active’ grants pages to be very confusing, so we decided to combine the 3 pages into one “My grants” page shown below. Here again we added the progress bar to indicate to the user the status of the application as well as a status update showing either In progress or complete. If in progress, looking at the progress bar can show the user what stage of the process they are in.



Benefits to Persona

Created by UI designer — Cici Wang

Going back to our persona, we can see how Michael Carr can now easily go through the grant process without the confusion and frustration of having to find the information on his own. Our application will help guide him through the process and he can finally get the funding that he needs to hire and train more employees for his coffee shop business.


Summary

We had the opportunity to work closely with Granted Consulting CEO, Stephanie Sang throughout this project. It meant so much to me, knowing that I had the opportunity to help local businesses in my own community realize their full potential with this product. Government Grants have been helping small businesses grow for many years, but not every one has such a simple time understanding the process so it was very rewarding making the process simpler for business owners.

My favourite part of the design process was conducing the design studio with my fellow team members. It was an efficient use of our time to come up with a great design direction. We were under a time pressure to think quickly and really get those must have features on the page which really helped us create solutions and guide our design process.