Galari: Website Refresh and Ad Creation

Screen preview of Galari webpage.

Role

Timeline

Team

Skills

Tools

Website and Ad Design Intern
June - Aug 2024
Myself
Co-Founder
Analyst + Marketing Intern
User Research
Website Design
Content Creation
Figma
Webflow
Photoshop
Premiere Pro

Project Summary

Website Refresh

I brushed up Galari's website, with the intent of concentrating email list sign-ups in preparation for a Kickstarter launch.

Content Creation

I conceptualized and collaborated with the founder and Reporting intern to shoot brand-new content that fit refreshed sections of the site.

Ad Creation

At the end of the internship term, I conceptualized and created a series of advertisements (which comprised a final "Kitchen Sink" ad) in Premiere Pro. These ads served as Galari's first Meta advertising campaign.

Impact

The combined efforts of my work at Galari- the website refresh, content creation, and ad creation- culminated in a 10-15x increase in mailing list sign-ups, and a successful Kickstarter launch of over $300,000 funded.

01

Background
A GIF of the previous Galari site.
GIF: The initial Galari funnel

Why the website refresh?

Pre-crowdfunding, the funnel- a single page site that "funnels" interested emails into a mailing list- is critical

Upon launch, this mailing list boosts attention toward the campaign. Interested parties may also opt to join a “VIP” status, wherein they pay a 5$ fee for a discount upon the product’s launch.

However, in recent months, mailing list and VIP sign-ups were down. The goal was to:

  • "Intensify the funnel"
  • Bring traffic to the site with a new ad campaign

02

Site Walkthroughs + Takeaways

Deciding on Site Changes

We knew that we wanted to optimize the crowdfunding funnel: but how would the site change? We conducted a series of site walkthroughs to get an outside perspective.

Galari screen with accompanying commentary "On highlighted Galari features: 'I'm interested in the functionality! Could I have [Galari] tell me the time every hour? Does it show the weather every morning at a certain time?'"
Galari screen preview with the caption "On product images in the site: 'I'm confused on whether or not this is a real product'"
Questions received from website walkthroughs.Text reads "Would additions to the site actually lengthen the funnel and make it less effective?" and "Would this inclusion appeal to our target audience (home decor and design enthusiasts)?"
Walkthough Considerations

Taking a look at feedback, we decided to hone in on two aspects of the site that may be hindering site interaction and product interest; these two were realism and functionality.

We came up with some potential site additions that lent to these points, some of which were agreed upon,  some of which were scrapped.

Screen preview of Galari site with "Use your own photos, albums, and artwork" and "Timeless design" sections

Accepted: Content refresh with real-life images

Would reduce the amount of "fake-looking" AI-generated content, giving greater credibility to the product

Sketch of scrapped Galari interactive interface

Scrapped: Galari interactive interface

Would take too much time to implement; too complex of an interaction, unnecessarily lengthening the funnel

Screencap of the accepted "Easy on your eyes" Galari site section

Accepted: Easy on Your Eyes section

Emphasizes blue light benefits of Galari, emphasizing functionality and pairing well with "environmentally friendly" section

Image of scrapped sample functionality hub interface

Scrapped: Sample functionality hub interface

Distracts from core messaging and unnecessarily lengthens the funnel

03

Content Refresh: Hero Banner

What content needed to be "refreshed"?

A large portion of images in the Galari hero banner and "building blocks" section of the site were AI-generated. By using real product photos and setups, we hoped to set a good “first impression” of Galari that would make the product look and feel tangible.

Divider line for case studies

VERSION ONE: THE OG HERO BANNER

Initial landing page screencap for Galari site
The initial hero banner images were AI-generated, which was both cost and time effective, but the team at Galari and I felt that they worked against Galari's marketability and its image as a tangible product with potential for growth. As a result, we decided to shoot real-life images of a Galari prototype.
Divider line for case studies

VERSION TWO: THE APARTMENT PHOTOS

Version 2 of the Galari landing page (Desktop)
Version 2 of the Galari site landing page (Mobile)
These images were shot on a smartphone at my Kyoto apartment. Though these photos are rudimentary and not friendly to mobile breakpoints, they served as a good sample for what real-life Galari hero banner might look like.
Divider line for case studies

VERSION THREE: KIT STUDIO PHOTOS

Version 3 of the Galari site landing page (Desktop)
Version 3 of the Galari site landing page (Mobile)
My fellow Marketing intern and I improved on quality with our next shoot at KIT's Design Lab. At this point, we could've settled; however, we felt that the images still weren't quite right for mobile breakpoints, and that there was too much empty space around the Galari frame.
Divider line for case studies

VERSION FOUR: SUSHI'S HOUSE

We hit the jackpot here! With help from Galari co-founder Sushi (who, on top of running the start-up and teaching at KIT, was a skilled photographer), we were able to produce two sets of images: one for desktop and tablet breakpoints, and the other for mobile breakpoints.

Final version of the Galari site landing page (Desktop)
Final version of the Galari site landing page (Mobile)
Later, I imported the images taken into Photoshop, and edited each individual image for visual cohesion across setups. I brought the edited images to Sushi, and once we agreed on the hero banner's placement and quality, I implemented the new addition into Galari's site via Webflow!

04

Content Refresh: The Building Blocks

What are the Building Blocks?

The “building blocks” on Galari’s site expanded on key selling points. These included ease of setup, information functionalities, and customization.

In this section, we swapped out the images and copy for four sections, two of which were completely new additions. These were shot and edited by co-founder Sushi, and uploaded into Webflow by me. I also assisted in refreshing the building blocks' copy, alongside Galari's Marketing Intern.
Screencap of the "Use your own photos" and "Timeless design" sections on the Galari site's building blocks
1: Changes we made to emphasize Galari's personalization aspect and craftsmanship
Screencap of the "Set it up once" and "Real art in a modern interface" sections on the Galari site's building blocks
2: Changes we made (mostly to images) to make Galari feel more realistic

05

"Easy on Your Eyes"

‍Next up was a new section to be added to the site, "Easy on Your Eyes".  It was our way of boosting emphasis on Galari’s functionality and usefulness outside of its traditional “art gallery” function without overwhelming the site funnel.

Figma prototype screencap of the "Easy on Your Eyes" section of the Galari site
Image: Figma prototype of the "Easy on Your Eyes" Section

We intended to strike a contrast between Galari's e-paper technology, and traditional LED screens which cast distracting light through dimly lit spaces (eg: bedroom).

How could a contrast be made?

From an outside perspective, Galari and a LCD screen looked the same during the daytime- it was at night that their differences shone. Galari worked well as a shifting decorative piece from sunup to sundown, but unlike a screen, it wouldn't light up and disrupt your environment.

Therefore, contrasts were made through day-to-night time lapse comparisons!

Divider line for case studies

VERSION ONE: THE APARTMENT TIME-LAPSE

Version 1 of the "Easy on your eyes" section GIF

Just like with the hero banner, this time lapse was shot in my Kyoto apartment. It proved that our idea had ground and established a clear contrast, but we felt that the setup was a bit awkward and could be optimized further.

Divider line for case studies

FINAL VERSION: SUSHI'S HOUSE

While taking pictures for the landing page, the team figured we could use our existing set-up, connecting the landing page setup with the environment for our time lapse.

Final version of the "Easy on your eyes" section GIF
GIF: The updated time lapse

Alongside the Marketing Intern, I drafted this section's copy from scratch; similarly to the hero banner, I edited the time lapse in Premiere Pro by taking several screengrabs of the raw footage and stitching them together for an optimal file size. I then converted the frames into a GIF, which I uploaded into Webflow.

Full final screencap of the "Easy on your eyes" section of the Galari site
GIF: The Final Section!

06

Galari Site: Final Product
Here's the final site:

07

Impact and Takeaways

Alongside the website refresh, the Galari team sought to bring traffic to the site with advertisements. Therefore, while I shot and uploaded new content for Galari's website, I also shot video content for Galari's first-ever ad campaign. I imported the footage into Premiere Pro to create three ads: this represented my first foray into ad creation and Premiere Pro!

Video: Our "Kitchen Sink" ad, which combined all the ad concepts we made into one

The website refresh, combined with these ads, contributed to a significant uptick in VIPs and lead generation by ~10-15x.

Takeaways

Hourglass icon

Projects don’t always follow a traditional iterative process. My internship was only two months long; when making decisions, we prioritized realistic yet effective action items that we’d be able to complete and evaluate in a short period.

Signpost icon

Not all products are intended equal. My goals at Galari weren't about conveying a wealth of information on Galari, or engineering eye-catching interactions. Goals were oriented around moving a visitor through the website funnel effectively and to boost email sign-ups.

Layer icon

There are more moving parts involved than you’d think. Shooting and uploading new site content brought this to my attention. Things like the file size on an image, or that extra half second on a time lapse clip can change user experience significantly.