What do they want to achieve?

After previously working with Pause People to help create their initial brand and website (view that project here>) they approached me to help them with a new idea they had.

They currently gather all of their customers data on their energy usage manually each year, it’s a process that takes them hundreds of human hours. They want use Salesforce going forward so they can manage and view all their customer’s details easily and quickly rather than using Excel spreedsheets.

Overview of brief:

1. Move away from Excel spreedsheets
2. Remove the human element of collecting data
3. Handle client data easily in a CRM
4. Allow clients to see their carbon footprint data visually and branded in Pause People style
5. Provide resources for their customers to learn more about energy

How can this be achieved?

If I was going to be successful in this project I first needed to understand the following:

1. What data they were collecting and work out every single input field that would be required
2. How can I collect the data
3. How does Salesforce come into this, how can I link a web app to Salesforce
4. What a Carbon Footpring report currently looks like
5. What other companies are doing and how they’re collecting and displaying data
6. What learning information they want to display
7. How new technologies can help, e.g an AI chat bot
8. What type of device clients would predominantly be using

Understanding the problem

I need to run through all the items in my problem list and come up with possibly solutions for each of them:
What data are they collecting:

They are collecting integer and string data, they often have a picklist / select list of predefined values.
How can I collect data:

I could build a custom form creator so they can easily generate any input type including the option for predefined picklist values.
How can I link to Salesforce:

Salesforce has a API integration so I can connect to it to push and pull specific data per user.
What is a Carbon Footprint Report:

It’s the result of very specific formulas being using to calculate what tonnes of carbon they are producing from each of their energy uses, there is also 3 possible scopes of carbon footprint data, these include Scope 1 = general day-to-day data, what you use personally, Scope 2 = things you get indirectly e.g materials you might buy to make your product and finally Scope 3 which is much more complex = these are generated from things your suppliers do, think Scope 1 but for your clients.
What other companies are doing:

It turns out not many people are actually providing this service, that’s why Pause People wanted to invest in creating a web application for their clients, to make them stand out. But we can see how people are currently displaying that data, it’s very informational with very little personality, just graphs, charts and numbers in neat little boxes.

What learning resources they want to provide:

They want to provide resources for the following areas:

1. Cost, Ensure cost efficiency by reviewing your products and how your spending.
2. Consumption, What’s using power and getting a grip on it in your business.
3. Carbon, Increase your awareness and how you can track and reduce what you use.
4. Compliance, All the small print of what’s right and wrong in large print language.

What technologies could help cut down on their human time with clients:

With the advances and ease of use of new AI tools like chatbots, I could use online chatbots like mottle.com and load them all the documentation that Pause People would use in their learning documentation so customers can freely ask questions and get specific answers.
What device will the clients mainly be using:

Because the complex size and structure of the data people will be uploading the predominant device they would be using is a desktop to interact with the site.

What will all the pages be?

Now I know what Pause People want to achieve I need to look at what all the pages will actually be before I can start creating wireframes and high fidelity visuals.

Below is a list of all the possible pages that will be needed on the web app and how people will flow between these pages to get what they need and when.

What needs to be included on each page?

Now I know what all the pages should be and how people will get to them I can start working on the wireframes of the pages.

What it will feel like

Now I know what the sitemap should be, I need to design how the web app will look and feel.

Icons

Colour scheme

Illustrations

Applying my icons, assets and colours to the wireframe

Now I have everything I need I can apply it to my wireframes.

Below is an XD prototyped High Fidelity Design. Click and scroll around the design to explore more.

What the linking structure looks like