Client
Wage vs Inflation
(currently under development)
Roles
Lead UX Designer, Lead UI Designer
Accolades
Probably none unless you include the scorn of Corporate America for empowering people to understand their buying power?
Case Study
View as PDFIt's, like 10mb. You've been warned.
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.
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.
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.
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 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
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
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
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.
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
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 PrototypeWhile 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.