Wage vs Inflation

Client

Roles

Accolades

Case Study

View as PDF

It's, like 10mb. You've been warned.

Background

With all the talk these days of rampant inflation and whether or not peoples' wages were keeping up I decided to create a tool they could use to find out. Lucky for me, the Bureau of Labor Statistics (BLS) has an API on their inflation calculator (I studied economics in college, remember). I knew it needed to be simple and it needed to explain inflation in simple terms. There had to be a way for people to see, not just whether or not their salary outpaced inflation, but by how much.

Challenge

One of the biggest challenges is creating a site for everyone. When we started discussing User Personas for this project we quickly realized there isn't one. Or, rather, there thousands of them. Because this isn't a typical product like insurance or finance, the target market was literally anyone who had a job. So we had to try to keep it as simple as possible and not try to target any specific type of work or income level.

Research

Four years of college I guess? I studied economics, especially as it pertains to wages and productivity in the modern age. I'm not a Marxist, but I do think people deserve to improve their quality of life as they get better and more proficient. I've always encouraged people to compare their wages to inflation any time they get a raise. It helps to know if it was a "raise" or just a market correction of their base salary. This is a way to show it and try to simplify the data coming from the BLS and the Federal Reserve.

Design Goals

To be a useful tool it has to serve two primary goals: be easy to use, and to be clean in simple in the way it displays the data. But, just for aesthetics, I also want it to look kind of cool and colorful. If people are going to visit this it can't look like a Word Doc that someone turned into HTML like the BLS did. I plan to share this around social media and encourage others to do so as well.

The process.

Brainstorming

The main brainstorming session was me just me everything stuff out. I knew the user flow would be fairly simple (that's the whole point of this calculator after all), so drawing it out helped me find the best, simplest path for each outcome. And then I started asking all my friends what was important to them and pared back what wasn't necessary.

Initial Whiteboard

Initial Sketches and Ideation

We went through two phases of this design. The first was simply a straight-forward form asking for 3 key points of information. But after doing some user feedback on the designs, we decided to make it less formal. So the end result was more of a conversation than a form with a result.

Initial Sketch

Initial Sketch

Wireframes

The wireframes were initially designed from the original sketches. Which means they were more of a form than a conversation. This is what we used to test the product and get feedback from real users in our panel. We used that feedback to develop what became the final version of the product that utilized a less formal approach to filling out the data, and in displaying the results.

v1 Start Page

v1 Form Filled

v1 Results

v1 About Modal

v2 Start Page

v2 Form Filled

v2 Results

v2 About Modal

Design System

Once we really iterated down the user flows, the UI, and had our copy sorted out, it was time to move into the high-fidelity designs. Using Figma we developed a Design System to guide our decisions, utilizing a colorful-but-muted palette and a modern, simple typeface.

Prototypes

With the colors and typography in place, it was just a matter of applying them to the final wireframes to create our final prototypes.

Start Page

Form Filled

Results Low

Results Average

Results High

About Overlay

The Final Product.

This project is currently being built and developed by a very wonderful React Developer within my network. My approach to design is very collaborative and I worked closely with the developer every step of the way to make sure that I was designing within the possiblities of React while still keeping within the project guiderails of keeping it simple and intuitive.

Stay tuned for an updated link to a working product for you to compare your own salary! But for now, you can at least see the Figma prototype in action.

View Prototype

Review

While I'm happy with the project being where it is at the moment, I'd like to see more happen with it in the future. Right now, the goal is to just get the calculator live. But eventually I'd like to have more links and resources for users where they can learn to negotiate a salary, update a resume, and search for open positions within their field. But for a free project being worked on as a side project, we can only do so much at the moment.