Revealing the reality of being an employed caregiver in the US demonstrates how the workplace currently supports caregivers, which will become more and more important as our elderly population grows.
I’m proposing we do an interactive article packed with bold typography, bright colors, interspersed with videos, photo carousels and large pull quotes. These various modules would break up the informative body copy throughout the page and can be interchanged and moved around as needed depending on the length of copy we’re working with. This version would consist of various editorial and magazine-like modules for the look and feel.
For the hero at the top of the page I was imagining a large feature photograph of two happy people (a caregiver and their family member) placed inside a cropped organic shape. I feel that leading the article with a curved asymmetrical shape makes the piece feel a bit more light in nature despite the heavier subject matter.
Since the subject matter can be considered generally sad (dealing with the challenges of caregiving), I felt we could focus on positive imagery; having more of an optimistic viewpoint. Such as people smiling, engaging with their family members and sharing experiences. Featuring young, middle-aged, and retirees, mixed genders and race for diversity.
Animated Stat idea for “1 in 6 American workers is a caregiver”
We’d have a 50:50 module, directly cut in the half. The text module on the left would always be present whereas the module directly to it’s right would animate. We’d start with Frame 1 containing the stat. The icons of people would grow quickly in size and zoom into Frame 2 and become even larger morphing into Frame 3 to drive home the importance of the “1” in 6 number. Frame 3 would fade into Frame 4 transitioning into a map of the US filled with white icons of people (which would represent the overall American workforce). Math formula: 43 million divided by .16 percent = 268 American workers. Out of the 268 million workforce, 43 million of those are the caregivers, shown in purple. The icons could either remain static OR we could have them animate by changing their fill colors from white to purple sporadically keeping the ratio in tact. The map would also grow and zoom in size. This entire module could be on a loop. Any other stats included throughout the page (for example, at the bottom of the article I have a horizontal bar graph) could have a horizontal reveal or a slide up reveal.
I like to sketch out ideas before getting into wireframes and visual design. It helps understand how an idea will take shape in user interface form. There are many ways one can craft concepts. Sketching often helps figure out what those ways are and which way works best.
Please refer to notes above for a written description of the idea. This module could go anywhere within the article. The article would be built in a modular way so it could live anywhere within it.
Direction 1 and 2 were designed using a combination of Sketch, Photoshop and Illustrator
This is also an interactive article but a different direction than the one above. This one focuses on illustration, iconography and shapes that animate as the user scrolls.
For this version I’m imagining a tight typographic lock-up for the headline; playing up words “US ECONOMY” and “CAREGIVER ECONOMY”. The background could have a textured background with a subtle gradient (darker on the edges and brighter in the middle, highlighting the headline). The illustrations (FPO here) could animate and subtly float in the background. For example, on load, the dots in the molecules could fade in and out, the lines in the chart could have a side swipe reveal, the heart could pulse get larger and then smaller.
The copy could be divided up into modules, where we have a section with a subhead and then text and click though illustration module that is to the left and/or right of it. The illustrations and copy would change and it’s a great way to give important facts a section of their own while also saving on space. I’m imagining these illustrations would also be animated. We could have pick up an accent color from the palette to incorporate into each one for consistency.
For any numbers or stats I thought we could use circle doughnut charts. The colors that relate to the stats could animate as the user scrolls.
II. GIVING FEEDBACK
This is a beautifully rendered interactive piece. I think you did a great job. The design is in line with the brand. It’s sleek, sophisticated and elegant.
You’ve captured the idea of a virtual walk-through experience successfully; it makes me feel like as though I’m in the actual driver’s seat as the concentric circles and arcs move. Nice work!
I would suggest softening up the transitions of the arcs on load. They feel a little too immediate and quick. I think having an “ease in” or a “fade in” could be a bit more graceful. I love how you’re using different shades of blue for the arcs. I would be interested in seeing each separate arc have a subtle gradient fill that morphs into the other arcs immediate next to it, almost like a gradient wash over all of the circles. This could add some more dimension to the piece.
When each arc is clicked, the background turns into a faded interior photograph of the car. When this happens, the navigational text on the left becomes hard to read. The photograph gets a little bit in the way. There are some ways to solve for this: a.) you could bold the text or pick a different weight of the font family you’re using and/or darken the overlay black/gray color on top of the photograph. b.) you could still maintain the opacity of the photograph everywhere except where you have it behind the nav. text and with a large brush create a darker yet subtle fade that sits underneath the text so it’s more legible.
I love the click through galleries. They’re engaging and packed with important information. The gifs/videos are a really nice touch. You have the header font in each center slide in a serif font and in all caps. I think this treatment competes with the title of the actual piece “IDEAS IN MOTION” that sits directly above it because it’s not only larger in size, but in a different font altogether. I think combining serif and sans serif fonts can be very effective generally speaking, but in this instance I do think they compete with each other a little too much. If you’d like to keep the header in a serif font, I’d recommend making it smaller and adding more space between the title of the piece and moving it down to add some breathing room.
When I click a box (Technology, Performance, Design) the check mark goes away, the text unbolds itself. When this behavior happens the width of the text box changes ever so slightly. To avoid this, I would try and make it so the box never changes in size upon click.
I would be interested to see an alt version where you have the “TECHNOLOGY, PERFORMANCE, and DESIGN” tabs closer together. Either stacked or side by side with equal distance between them. From a user’s perspective, right now they feel disconnected from one another as the “DESIGN” is so far away from the other two. I would work on solving for this and making them more tied in to the other navigation text.
For the photo/video galleries: I would suggest having some kind of visual indicator present letting the user know how many more they have to view. It’s always nice to get a sense of how long a gallery will be instead of just clicking through to the end (even if it’s short).
III. CREATIVE REASONING: PART 1
The Bauhaus: The design utopia we’re still living in
I’m a big fan of the Bauhaus so this article immediately caught my eye. I found it not only fun to read but was particularly drawn to the video that was featured: Bauhaus design has a legacy beyond its style posted by Quartz News. Designed in pure Bauhaus style with geometric shapes and primary colors overlaying footage of their buildings, it’s very enjoyable and educational for fans like myself and also for people who aren’t familiar with the movement. The header font (Titling Gothic Skyline) is a great choice. It feels very Bauhaus and the animated gifs are a nice touch.
IV. CREATIVE REASONING: PART 2
NYPL (New York Public Library) Insta Novels
This is a very clever, engaging and beautiful piece of branded content put out by the NYPL and the creative agency Mother adapting novels for social media. Users can go to NYPL’s Instagram account and tap the name of the story they want to read from the highlight’s section. They’re presented with an animation of the classic novel which is ever-morphing as they read and flip through the pages. It inspires a new generation of readers through digital content and expands their knowledge base of classics in a whole new and accessible way. Promotional video and selected GIFs below.
Scaling Everest: An interactive infographic by The Washington Post
I love this piece because it takes you on a virtual climb to the peak of Everest with a few simple clicks. Through beautifully rendered illustrations this piece displays what only few can experience in real life. Users get to take a journey from sea level all the way to the summit and along the way along the way stop to read fascinating facts and hear sound clips from climbers themselves. There’s a persistent navigation on the left clearly marking how far you’ve gone up the mountain. You’re left feeling transported. Selected screenshots below.