Analytics Portal

Website Redesign
Overview

The majority of my time as an intern with Oh My Green was spent redesigning the old Analytics Portal. The tool was used by both our clients and their customer experience managers to view the budget and spending for company sites. I can't go into the details of the supply chain but know that it was a tool that, for the longest time, had a singular purpose. What was proposed by higher-ups was a portal that not only reflected spending but also had features that would be valuable to the client and aligned with the company's ideals on employee wellness. Although the product wasn't shipped during my tenure, I was able to solve a few problems with usability and laid the groundwork for the UI.

Role

Nov 2019 - Mar 2020

Product Designer

User research, Information architecture, Visual design, Copywriting, Prototyping and testing, Email design

Tools use:

Sketch, Invision, Excel, Pen & paper

When I first started at Oh My Green, we were a wellness company focusing on creating healthier snack alternatives for employees. Eventually, the company began moving in the direction of platform development and incorporating other methods on improving employee wellbeing like seminars, meditation, nutrition, etc.

Enter the Analytics Portal

What was once a tool used by Client Ambassadors to display and explain spending to Office managers would become a one-stop dashboard for our clients to oversee their sites with little explanation from their ambassadors. That was the goal, initially. The first problem was what would we even add to the page? Would it be feasible? Or even valuable to the client?

Old Analytics Portal (intentionally blurred)

I first tackled the issue at the root by compiling a feature set based on previous feedback from our clients that had been brought up at monthly check-ins. Questions like can we visualize budget, can we get rid of this graph, can we be notified when catering arrives, etc. were recurring. The features also had to align with the direction the company was headed; it had to benefit the employee.

With the way the company was structured, clients or office managers were assigned Customer Experience Managers or CXM's and we, the designers, could only meet with them to conduct our research. Their's was the voice of the user and we would not have direct contact with office managers until down the line when we were assigned a Project Manager. Because some features involved different departments, it was important to talk to their heads to see what data could be streamlined or would have to be collected manually. Once those features were compiled and prioritized, we met with Engineering to discuss feasibility to further whittle down the list.

While this was happening, I was tasked with creating a new tool, an Analytics Email. An automated email for clients that give them a snapshot of what they'd see in the portal.

Chicken or Egg

The one question everyone had initially was if clients saw the email and clicked the link to their portal, would they be confused to see the old portal still up? Should efforts on the Analytics Portal redesign be prioritize rather than push out a new product? Or would the email be something independent of the the portal since it didn't exist yet?

In the end, it was decided the email would help more than hurt the redesign. We could beta test the main features and build clout for the finished portal.

Analytics Email prototype

The main blocker we ran into were the graphs. Our backend could only support a certain way of displaying the data that wouldn't be close to the intended design and building a new method that could automate the process would take too long. After going back and forth with engineering, we settled on using a third party graph generator and pulling the screenshot into the email before sending. It was a crude solution but we were still in the testing phase. When feedback came in, it was as we hoped. Office managers loved the email and were asking when the new Analytics Portal would be launched.

Wireframes

Jumping back to the portal, the main features had been settled on and I began wireframes. One feature that had to be present was a date picker that would allow the user to view spending during one day or a range of dates. With this, the new challenge would be how to display the data. After several iterations, I settled on a bar or line graph. Since I was no expert in statistics, I consulted our Accounting department about how best to display the data. They pointed out the line graph was best for showing progress over the course of days if the user wanted to view more than one date.

Early iteration highlighting budget graph

Talking with different CXM's, I ended up putting the legend above the graph where the user's eyes would initially fall on. We wanted the user to be able to hover above the line and view the data for that particular date so to illustrate that feature I created a prototype in Invision to present to a few CXM's which they grasped immediately.

Coming together

In terms of layout, the goal for the portal was for it to be modular. Clients could pick and choose what widgets they wanted in the dashboard, hence, the different cards. Because the pie graph showing consumption would also relate to the date picker, I felt both graphs should be side-by-side. Once the CXM's were happy with the aesthetics, it was only a matter of applying Oh My Green's branding which would fall on the whole design team.

Mid-fidelity mockup

Takeaway

The most crucial lesson I learned was that product development can be messy with no plan. I spent a couple weeks laying the groundwork before our PM organized all parties on a clear vision. I did enjoy the process, though. This was my first foray into real user interviews which is a skill truly learned by doing. I hope to be able to pick up where I left off down the line or at least work on a similar project.

When I first started at Oh My Green, we were a wellness company focusing on creating healthier snack alternatives for employees. Eventually, the company began moving in the direction of platform development and incorporating other methods on improving employee wellbeing like seminars, meditation, nutrition, etc.

Enter the Analytics Portal

What was once a tool used by Client Ambassadors to display and explain spending to Office managers would become a one-stop dashboard for our clients to oversee their sites with little explanation from their ambassadors. That was the goal, initially. The first problem was what would we even add to the page? Would it be feasible? Or even valuable to the client?

Old Analytics Portal (intentionally blurred)

I first tackled the issue at the root by compiling a feature set based on previous feedback from our clients that had been brought up at monthly check-ins. Questions like can we visualize budget, can we get rid of this graph, can we be notified when catering arrives, etc. were recurring. The features also had to align with the direction the company was headed; it had to benefit the employee.

With the way the company was structured, clients or office managers were assigned Customer Experience Managers or CXM's and we, the designers, could only meet with them to conduct our research. Their's was the voice of the user and we would not have direct contact with office managers until down the line when we were assigned a Project Manager. Because some features involved different departments, it was important to talk to their heads to see what data could be streamlined or would have to be collected manually. Once those features were compiled and prioritized, we met with Engineering to discuss feasibility to further whittle down the list.

While this was happening, I was tasked with creating a new tool, an Analytics Email. An automated email for clients that give them a snapshot of what they'd see in the portal.

Chicken or Egg

The one question everyone had initially was if clients saw the email and clicked the link to their portal, would they be confused to see the old portal still up? Should efforts on the Analytics Portal redesign be prioritize rather than push out a new product? Or would the email be something independent of the the portal since it didn't exist yet?

In the end, it was decided the email would help more than hurt the redesign. We could beta test the main features and build clout for the finished portal.

Analytics Email prototype

The main blocker we ran into were the graphs. Our backend could only support a certain way of displaying the data that wouldn't be close to the intended design and building a new method that could automate the process would take too long. After going back and forth with engineering, we settled on using a third party graph generator and pulling the screenshot into the email before sending. It was a crude solution but we were still in the testing phase. When feedback came in, it was as we hoped. Office managers loved the email and were asking when the new Analytics Portal would be launched.

Wireframes

Jumping back to the portal, the main features had been settled on and I began wireframes. One feature that had to be present was a date picker that would allow the user to view spending during one day or a range of dates. With this, the new challenge would be how to display the data. After several iterations, I settled on a bar or line graph. Since I was no expert in statistics, I consulted our Accounting department about how best to display the data. They pointed out the line graph was best for showing progress over the course of days if the user wanted to view more than one date.

Early iteration highlighting budget graph

Talking with different CXM's, I ended up putting the legend above the graph where the user's eyes would initially fall on. We wanted the user to be able to hover above the line and view the data for that particular date so to illustrate that feature I created a prototype in Invision to present to a few CXM's which they grasped immediately.

Coming together

In terms of layout, the goal for the portal was for it to be modular. Clients could pick and choose what widgets they wanted in the dashboard, hence, the different cards. Because the pie graph showing consumption would also relate to the date picker, I felt both graphs should be side-by-side. Once the CXM's were happy with the aesthetics, it was only a matter of applying Oh My Green's branding which would fall on the whole design team.

Mid-fidelity mockup

Takeaway

The most crucial lesson I learned was that product development can be messy with no plan. I spent a couple weeks laying the groundwork before our PM organized all parties on a clear vision. I did enjoy the process, though. This was my first foray into real user interviews which is a skill truly learned by doing. I hope to be able to pick up where I left off down the line or at least work on a similar project.

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5
Heading 6
Quoted text sentence