CVS store pickup

Current page: https://www.cvs.com/content/storepickup

Getting to this final design point was a little interesting as lots of pages on CVS are sometimes created, then discarded in a similar manner; someone doesn’t keep track of their pages they requested, even though it gets a lot of traffic. Mostly this is due to the page actually being successful and the job the page set out to due is complete.

Sometimes, however, the entire site will go through changes that ripple throughout and extra work needed to ensure a smooth transition to a new build, are not put into scope, and we end up with the resulting “before” screenshot.

yay code breaking!

Not quite the best for accessibility, and usability.

Now the goal I had was not to redesign this page from scratch. The goal was to keep existing content as-is and utilize any graphics that are already on this page.

So, we need the image in the back, all of the copy from FAQs to the content in the top.

I bet you can see the issue

So the issue we need to address, is that some of the elements that were working on the page; before it became broken of course, were being used in this very large, very spacious image. Bad form, bad design. everything except the explosion of products (or perhaps its implosion since they want you to buy things) should be coded UI elements or a numbered list(OL). So that’s what we’ll do, and we can crop out that illustration pretty easily.

Now I would have preferred a vector image, but we work with what we have until someone comes along, doesn’t like change, and wants to update their page.

Next we have to address some of the content structure.

page architecture

Since this page was poorly designed to begin with, we can use the update to this page as an opportunity to give the content some hierarchy. We can see some of the original intent of the page was to get the customer to shop in order to pickup in store. we can see this because the colors are different for this section, as well as the size of the information. Whomever created this page initially also took time to put steps into a list. Refilling seems like an afterthought so we’ll make that secondary. this also makes sense to put this secondary because if someone is refilling, then you already got them to shop once, so they’re onboard.

exploding products ftw

So we then get the first image I introduced you to. Looks a lot better. although looking back at this, it needs a small code update to fix the padding (or margin if you know some coding) between the CTA(call to action) and the numbered list.

Since the top section is mostly informative, we keep the main CTA out of there and keep it with the steps since those elements are pretty much one item.

Moving on to the secondary action, we will make the action a little more subtle so it doesn’t compete with the primary action

seems consistent

Great, serves its purpose. sometimes I will make secondary actions an outline “button” but the necessity of the refill action doesn’t strike me as that important. It almost feels tertiary, even though it’s a secondary action.

Finally, these FAQs look a little outdated.

is there a better way to say “BARF”?

FAQs as a concept are a little outdated as well, since you should be explaining what is in the FAQs with informative content, but that’s likely what should be done in a redesign, which we aren’t doing here. We’ll spruce them up but keep the same open-close functionality. (it’s OK I talked to a developer, they said this functionality is doable)

the result

good bye 2000 hello 2010

Excellent, the whole page will now have a consistent feel to it, and hopefully we solved the issue of everything crashing all together. Lets take a final look.

not bad

I’d say mission accomplished, but that might have negative connotations to some. If you’re wondering why the column width to the text content of this page doesn’t match up the the width of the banner at the top, that’s due to some accessibility concerns of keeping the lines of copy lower than 500 letters per line. this keeps a nice feeling to copy without putting strain on the eyes as much as long lines of copy would.

Plus, it looks a little nicer too don’t you think?

Leave a Reply