Marc Tessier

PROJECT NAME

Jake Grundy | Artist Portfolio

Website redesign

Current ➝ www.jakeygrundy.com


ROLE

UX/UI Designer


CONSTRAINTS

1 week | 2020

Desktop website


TOOLS

Pen + Paper, Adobe Photoshop, Figma

Jake Grundy is a local Toronto artist and a great friend of mine. As a practice UI project, I chose to redesign his portfolio website to update the visuals, add personality, increase trustworthiness, and smooth out the user experience.

LANDING PAGE

The original landing page didn’t describe who Jake is and what he does. It simply jumped right into a seemingly infinite scroll of illustrations. The visual hierarchy was a little off. Certain elements like the logo and the cart were too large and attractive, which distracted from the art. Icons and fonts needed some adjustments to be more consistent throughout, and in some cases a higher contrast for accessibility.

The visual hierarchy has been adjusted to focus on what’s important. This includes Jake’s intro about what he does, as well as the navigation, and the artwork. A pure black background is very aggressive on the eyes, therefore it was softened to a dark grey. Icons and text were switched to match each other.


An almost never-ending, ever-growing list of illustrations was not the best way to present the work. It’s very overwhelming. This was adjusted to a smaller selection of chosen pieces Jake wants to show off at any given time, and displayed in a virtual book. This gives the user a more fun and realistic experience, as though they were flipping through a zine.


At first, there was the thought of a virtual gallery (many art lovers turning to VR experiences during Covid). Unfortunately, the ones available all seemed too white glove formal for Jake, who is very laid back. It didn’t feel right. It would be great if there were more customizations available with the galleries themselves. For example, the artist could easily change the ambiance by altering paint, lighting, music, etc…

Features booklet. Tap the page to see a modal showing print availability as well as details.

Exploration of a virtual gallery. The formality of existing gallery templates don’t fit Jake’s personality. Quick and affordable customizations by the artist would be a great way to personalize a space.

SHOP

After the 3 sections (Comics, Posters, Colouring Pages), there was an “All Products” section which was redundant since it simply repeated all the items already shown in previous sections. The carousels aren’t the most effective display pattern when there is a large number of prints available (and growing). User can only see a small selection at one time, and has to keep scrolling one print at a time. Another opportunity is the art getting cut off within the squares. Each illustration should be fully shown. As mentioned earlier, some of the text contrast isn’t high enough, making it difficult to read.


The coloring pages are free printable black and white prints. Jake was nice enough to offer something fun for fans if they ever got bored during quarantine.

All the sections are now under a drop down menu, with the “All Products” section removed. No more long page of duplicates. Art thumbnails are no longer cut off. The carousels have been removed and replaced with a grid pattern. Now there are more illustrations visible at once. The price of all the prints were the same, therefore the prices under all the illustrations were removed and shown once under the header.


There are many ways to list a large list of items. In this case, since it is art, I wanted to show off the art and keep the details hidden in a modal to allow the art to shine with less distraction.


Since the coloring pages were freebies, there was no point in having to add each individual piece to the shopping cart, then adding a promo code, and going through the payment process to download. Now, the user simply taps on the “Freebies” section under the “Shop” drop down menu, then downloads the entire batch all at once with one click. Super simple. Also thought of promoting the freebies as a pop up welcome gift as soon as the user visits the website.

ITEM DESCRIPTION

Having the social media shares here might be a little much (my own assumption that needs to be validated). Do people want to share a specific piece at this stage, or would they simply share the entire website on social media? Text contrast is too low.

Again, many illustrations get cut off, this time when expanded. This needs to be adjusted. Jakes illustrations tend to be character based, and each character has an interesting story behind them. The long backstories can be found in his comics, but having a short description with every piece could boost interest, and therefore boost sales. A typical user might not be looking too deep into process and details, but art directors and firms would be (Jake is currently looking for opportunities). Having zoomed in sections to show the details would appeal to those hiring. Showing the available print sizes and pricing at this stage would shorten the steps to purchase, reducing the risk of having them change their minds.

The modal now shows detailed zoomed in sections, as well as a short description of the character, the print sizes available, the price, and the option to add to cart. As mentioned, having all the details available at this stage could help boost sales. Also, the full illustration is now shown without any cutoffs. Adding blur to the background helps the art rise to the foreground more intensely.

ABOUT + CONTACT

The original contact page doesn’t reflect Jake at all. The message box with input fields are too formal for his laidback attitude. It also looks clunky and the “send” button doesn’t match the other buttons on the site. Also, it’s redundant to have both a message box and an email provided. I simplified the page by taking away the message box, leaving only an email address


Jake is a very flamboyant individual. He needs to let his personality and style shine.

An “About” section here explains not only who he is as an artist, but as a person. Who is Jake Grundy outside of art? How does his mind work?


People don’t simply pay for art, they pay for the artist. Jake needs the opportunity to sell himself, not just his illustrations.

VISUALS

A cursive font (Rhesmanisa) was used for text on the landing page because Jake has a love for the analogue, and draws everything by hand, rarely touching digital.


Helvetica Neue is a clean, easy to read sans-serif font used for the most of the text on the website.


Colors were chosen from the most used within Jake’s art. The pink and green were then used to create a wide gradient.

LEARNING OUTCOMES

+ NEXT STEPS

LEARNING OUTCOMES

VISUALS

I learned to further refine visual hierarchy, and spacing, as well as create basic animations. The shopping cart was a quirky alternative to a simple coloured dot, or numbers increasing, and added personality. The intro set the mood and introduced Jake as though you were actually walking into his studio as he introduces himself and how he can help you. It’s gotten good reviews.

NEXT STEPS

USABILITY TESTING

Testing the prototype with and interviewing potential users (art lovers, fellow artists, art directors), I could dive deeper into what each type of user would like to see, and whether or not the new design holds the solutions or not.


FILL TEXT

Work with Jake to fill in some of the text such as "About" section, and art descriptions.


OTHER WORK

As much as Jake concentrates on odd character illustrations, he has done other work including murals and beer labels for Blood Brothers Brewing. Showing other types of work would show art directors his artistic flexibility. By day he is an art installer, and is an overall amazing handyman, something he is very proud of, another skillset worth bringing up.


MARKETING PLAN

I concentrated mostly on improving UI and helping Jake show more personality, but next I would love to look at other ways to promote. I had quickly looked into a VR gallery, but the available templates were too formal. The thought of Twitch also crossed our minds since Twitch use increased by 24% since Covid began. Jake will zone out drawing for hours, and maybe people would be willing to watch his process work, further bringing people into his world. He shows some progress work through Instagram, but Twitch would be more immersed. Being a huge music geek, he could also have fun posting his current playlists and engage with followers musically. Twitch can produce an additional source of income with a strong following.


If people don’t know Jake exists, it’s tough for him to get hired. I would love to dive into building a digital marketing plan in order to increase traffic to the site, and increase conversions.


SEARCH ENGINE OPTIMIZATION + CONVERSATION RATE OPTIMIZATION