Pimco was working on a new tool that they were going to release called Smart Charts and it allowed clientele to download and use Pimco’s data and charts. Some of the wants that were needed for this was to make it easy to select a chart, allow the user to add the chart to the “my content” section of the site, allow the user to share the chart to social media, and to active states for when the chart is new or featured.
When I start creating a user interface,I like to take an atomic approach where I create smaller pieces and add build up from there. I chose to go with cards, that way the user is able to identify the difference of each chart easily and it also aides with filitering and sorting the content.
here are the designs of the cards that I came up with. There is a default state and a hover state, as well as a featured and a new state for each card:
This is what the layout looks like on desktop, desktop with an optional promo hero, and in mobile:
When a user clicks a chart to view it, the details are loaded into a modal so that the user never has to leave the smart charts area. these were 3 verions for the modal that I supplied:
Upper management chose to go with the first version of the modal and we built it out and launched this bad boy. check out the live link to the right to see it in action. Here is a screenshot of the artboards for this project in photoshop.