Technologies I work in:
Adobe CC (Photoshop, XD, and occasionally InDesign & Illustrator)
HTML/CSS/JS (familiar with Bootstrap, jQuery, Kendo UI, and Highcharts)
I have experience with:
Clickable prototypes, static mockups, and wireframes
ADA compliance & accessible design practices
Some examples of my work:
High fidelity mockups for education-focused application
I've supported this particular application from early concept through initial release (and beyond). This application has a varied user base each with different needs. To reach the biggest audience with our MVP, our aim was to strike a balance between providing the raw data (for our power users) and offering easy to scan data and visuals (for our less tech savvy users). Designing for both users has and continues to be a challenge but utilizing progressive disclosure and creative use of data visualizations has helped us overcome some of our most difficult hurdles.
The core concept I structured my designs around is that the most vital information need for the user to make their decisions should be readily available and easy to scan. Secondarily, the more detailed, deeper dive information, should always be easy to access without adding unnecessary complexity. A good example of this is the Top Industries Hiring section in the mockup below. The information is presented in horizontal stacked bar chart making it easy to see the relative sizes of the top three industries hiring. For most of our users that was just the right level of detail. However, a number of users expressed the desire to expand out the "Other" category to see it's contents. To avoid cluttering up the current visual, I placed the more subtle See All Industries link at the bottom of that section which expands a popover with the full list of industries. This satisfied both needs without taking away from the initial simplicity.
The images below are visualizations from a different part of the same application. We wanted to continue our theme of making our data easily accessible and scannable. In the examples below, the choice of data visualization was key in helping guide the user to gleam the most vital info for their decision.
Salary lollipop chart:
The simplest method would have been to present the salary data in a spreadsheet, but that approach doesn't help the user know what is most important from the data set. After soliciting feedback from our lighthouse users, I identified that the ability to compare salary ranges (from entry to senior level) was the key piece of information that would most contribute to helping our user make an informed decision. Armed with that information, I created this mockup using a lollipop chart style to capture the salary ranges for the occupations being compared with highlights at the entry, mid, and senior level. Stacking them on top of one another allowed for easy scanning and comparison.
Graduate career sankey chart:
I came into this visualization from the opposite end. The product team knew that we needed a chart to effectively show the variety of careers pursued by graduates of a particular college degree program. By communicating whether all graduates tend to go into one particular field vs a wide variety, the user would then be equipped to make better decisions regarding their school's curriculum. Easier said then done of course. This was not as easy to capture in one visualization as we hoped. Our team iterated through a plethora of options until I happened across a sample of a sankey diagram. It wasn't a perfect fit but after working with the core principle a bit I was able to adapt it to fit our particular use case. In the resulting data visual, we still emphasize our goal of being easy to scan but containing deep insights for the power user. The most important info, which fields graduates are working in and their distribution is easy to scan. The deep dive info sits to the right, in a simple table, and breaks down that occupational to show the specific roles found within it. The chart is interactive as well, allowing the user to select each different pathway for more detail.
Career exploration app concept
During the early phases of design iteration for a student facing career exploration app, I created the set of high fidelity wireframes below as a proof of concept for how our design could adapt to smaller form factors. The goal of the product was to assist prospective students who were considering enrolling at a community college, in finding out what occupation was the best fit for them and helping them find the right program to get them there.
After studying the needs of this demographic, one of the key findings was that prospective students decision to enroll was often based to their post graduation job prospects (more so than traditional 4-year institutional learners), so making the link between each occupation and it's viability in the job market was key to the success of our tool. In the desktop version of the application, there was more space to allow for the content to fit on one page, but in a mobile form factor things did not fit as well. I took the approach of streamlining the experience by focusing each occupation page around the 4 key questions a user would likely want to know to evaluate their future job prospects. The carousel style topic pages were utilized to provide the key pieces of information the most usable space on the screen. I also simplified the data visualizations to make them more easily scannable on a smaller screen size.
Feature Tour wireframes
A set of wireframes showing the intended flow for a new feature tour function that was to be added to improve the user on-boarding experience. The goal was to improve the null state of the Search tab by providing a quick feature tour of the core functionality to get the user started. This feature was well received and reduced support call volume once it was implemented. It was also adopted by another product team at the company to improve their on-boarding experience.
Data Science & Analytics - Research brief
A two page summary spread created for a data science conference.
Spread created in Adobe InDesign and graphic on 2nd page was created in Adobe Illustrator.
This was part of collaboration between the applied research team and design. They provided the text and simple powerpoint visuals. From there I worked out a more streamlined structure/flow of the document, isolated the important call-outs, and redesigned the bubble chart visualization for easier readability.
Want to see more? Let me know!