Every year Inc. releases one of the biggest editorial packages, called Inc. 5000, profiling the fastest growing private companies in America. After the list was created, design and development teams created article lander headers that invited users to click and hover through the interactive experiences.
- Create an interactive data visualization experience that features top 10 companies and other vital data points.
- Visually, we needed to show how the 5000th ranking company compared to the top 10 companies in terms of revenue growth.
- It's the first visual that users will be seeing when landing on Inc. 5000 website, so we need to make it colorful, interactive, and intuitive.
Duration of project
Adobe Photoshop, Illustrator* (both CC), and Ceros
*In Ceros, you can't create vector graphics, so you have to create them separately in Photoshop or Sketch, export as PNG/SVG, then import it onto the platform.
The Final Product - Desktop Experience
Feel free to explore and learn about this year's Inc. 5000 honorees! You may recognize some of them, including phone-favorite PopSockets, workout innovators Peloton and Flywheel, and more.
The starting point of our 1-week sprint began with a linear graph design of the data points we were working with.
I was given the Adobe Illustrator file that the data designer used, from which I imported assets onto Ceros to create a basic replica of how it was laid out in the Illustrator file to have something to start with.
Questions that arose in this stage:
- What should we do about the background?
- What color scheme would best represent Inc. 5000?
- How would you display the company information and data?
Answering the questions:
- I began my research on other data visualizations by going on Bēhance, Dribble, and Pinterest, looking for any common color themes that would be best used for data representation.
- Taking the existing background color (#D6EAFD) of where the lander would be, I wanted to think of a monochromatic color palette. But I knew this would need to evolve into more exciting colors due to the excitement surrounding Inc. 5000 and the bold colors that the magazine typically likes to use.
- To display the company information and data, we decided that it would be best to use hover states because it allowed for the smoothest user interaction without the user needing to click through all the circles.
- And since this was the desktop version with more space, we wanted to employ the hover state interaction so that users could get the information they need quickly and efficiently.
3 days into the project.
The absolute final deadline, a.k.a. Inc. 5000 launch day (8/15), was coming up around the corner and we knew we needed a design that popped more. We needed more interactive components and a simple hover state wouldn't be enough.
After the Digital Director and I looked at a few sample data visualizations on Pinterest, we thought that we could push the graph idea into a 3D, perspective graph.
- Users still wouldn't know the relative placement of the circles from one another.
- For example, how would the biggest circle (containing data for SwanLeap, the top ranking company on Inc. 5000), compare to the 10th ranking company, or the 5000th ranking company?
- The circles, due to the linear placement, still made the graph look flat even with the perspective graph.
- Add more colors, especially to the bigger circles to make them pop.
- But don't use colors from the red family because it usually represents negative values in data visualizations, as Kristin Lenz told me.
- Add more animations, and one the Digital Director suggested was the floor tiles lighting up.
- When hovering over a circle for information, have the corresponding tile light up so that the user knows the relative placement of the circle in the perspective graph.
4 days into the project.
I was excited to deliver this project in its best possible state so that readers had a fun, informative interactive experience in addendum to the editorial package.
Taking the perspective graph idea, the Digital Director and data designer began brainstorming for ways to push the design further. The Digital Director thought we could take advantage of the y-axis and x-axis of the graph to actually place the circles strategically rather than placing them randomly across the lander.
Why not actually guide the user on what they're looking at?
The X-axis would show the 3-Year Revenue Growth (2014-2017) of the companies featured in the interactive experience, in percentages. The highest growth going up to approximately 76,000%.
The Y-axis would show the 2017 Revenue Growth, in dollars. The highest revenue growth going up to approximately $255 million.
The Mobile Experience
Dimensions for the mobile experience constrained the previous interactions, animations, and design due to the narrowed space.
Usually, in responsive design you would design for mobile first then scale it up to tablet and desktop sizes to make transitions more smooth, but Ceros isn't made for responsive design, which is why experiences have to be created separately - Desktop and Mobile.
Changes I had to adapt to:
INTERACTIONS - On mobile, you can't hover your fingers to view information like you would hover your mouse on an element on desktop. We considered the content we needed to show and what the common/intuitive user flow is. Then, after researching other websites and asking colleagues about how they would tap into an image to see more information (e.g. shopping websites), we decided to have the user tap/click into the circles to trigger company information to show.
NO EXTERNAL LINKS - Due to Ceros having bugs when grouping too many elements together, it was difficult to add links on top of interactions on top of animations. Because of this, we decided to keep it simple for the mobile design and exclude hyperlinks; also, there would already be a list of companies and articles under the lander.
ANIMATIONS - We killed any extra animations we had on the desktop version when building the mobile version because we knew users would want to get information quickly and head to the next item on the page. The average interaction with the lander was 10-11 seconds.
LESS CIRCLES - Because the space to arrange the circles into a narrower screen width would have made the overlapping translucent circles quite distracting for users, we decided to only keep the 5000th ranking company because that would still put the % revenue growth of the top 10 companies in perspective.
Team members and roles
Yeho (Lucy) Hwang
—Helped add animations, vector graphics, and interactions
—Oversaw the project from start to finish
—Created the data visualization and helped with creative direction
Diana Ransom and Laura Lorber
—Wrote the copy and fact-checked the information in the visualization
It's important to stay versatile and on your feet in a design sprint because there can be changes made soon after you think the design direction is set.
Documentation can be really helpful because it keeps you organized in the direction you're heading and after you've shipped the product you realize why some decisions work better than others.
When translating interaction designs from desktop to mobile (and vice versa), keeping a user-centric mindset can help you focus on designs that matter rather than designs that are just "fancy."