To best showcase our library, we let the work speak for itself.
Fruitful is a research library and toolkit. The library is meant for professional researchers, containing advanced research concepts. It is the 1st offering from Apple & Banana (a globally-read UX publication).
Our main goal was to turn the vast community of UX researchers into pre-order customers for "Fruitful." We needed a balance of showing them the library without giving everything away.
How can readers best explore the value of a digital library?
We had a variety of ideas ranging from common to uncommon, static to interactive. As we were ideating, our clear favorite was a creating a sample site. Like a "Free Trial" or a "try-before-you-buy," we wanted to let readers experience the library for themselves.
As a new team, we had to figure out how to best work together
.png)
We knew had to maximize our limited funds to get great returns
.png)
I was in charge of designing and developing the full experience
Like any startup, we had tons of ideas and not enough time and resources. This forced us to stay small, test often and be resourceful to reach out lofty goals.
This also meant I was the sole designer/engineer. I was in charge of taking our designs and turning them into a living, breathing site.
Success for us meant acquiring as many pre-orders as we could before launch.
We wanted to get a predetermined number of pre-orders before launching the fully library. If we couldn't reach our numbers, we knew that the interest for library might not be there.
We started by comparing a traditional physical book to a digital reading experience.
We sat down and evaluated the realistic differences between our 2 options. Do we publish a physical book or do we make our content a digital experience? The more we looked, the more excited we were for a digital library.
To flesh out the idea, I worked to find the nearest digital analogy to a physical book. While not everything fit 100%, I was able to push the library further through a digital medium. But, we were curious if readers would be excited about this potential change.
Before touching a line of code, we wanted to see if there was any interest in what we were building.
First things first, I started with general sketches and wireframes. Ranging from quick ideas to full-fledged user flows, I felt that we were getting closer. But at the end of the day, I knew that we should test everything with our readers.
We reached out to our many readers and asked for participants. After selecting a handful, we started doing some moderated user interviews. Conducting remote interviews helped us since our audience lives around the world.
All our participants were very sad to hear that the book wouldn't be physical. But, as we shared our vision and walked through the wireframes, they started to see what we wanted to build.
Thanks to participant feedback, we saw the need for readers to experience the library. If we hadn't asked readers, we would have went straight to the library's launch. In hindsight, creating a sample site definitely helped us hit our business goals.
Things “clicked” for participants when they experienced the platform so we started creating a sample site.
Next, we secured the sub-domain: sample.appleandbanana.org which let us nest everything under our parent domain. Now, the real work could begin.
I built our site on Webflow, a leading “no-code” development platform. This let us develop everything in-house to save time and money. Over the course of a few weeks (and many iterations), we were getting closer to the public launch of our sample site.
I wanted to make the most of the reading experience. This meant including generous margins, breadcrumb navigation, a fixed progress bar and more. Lastly, I introduced some more colors and large type for some visual interest.
Everything about our site's assets are custom, including our iconography. The icon's thick lines helps them stay readable, no matter what device you see them on. But, I created them as .PNGs and they were lacking the necessary resolution on mobile devices.
I immediately switched from PNG to Scalable Vector Graphics (SVG)s. They are a file format that creates images using mathematical formulas instead of standard pixels. This means that SVGs. can be infinitely resized without losing any image quality.
Readers loved our custom, hand-drawn illustrations but we imagined a whole new world for the fruits.
At this point, I was drowning under the workload. After discussing with the team, we decided to bring on a Head of Illustration. I immediately chose to work with Dana Kingery, after having worked with her in the past.
I shared my vision of breathing more life into the illustrations and took a step back. Within a short period of time, she brought back some initial concepts that took my ideas to a whole other level. Rich, vibrant and very approachable, the illustrations captured the essence of Apple & Banana.
Since the illustrations are so detailed, I knew that we would struggle with file size. Google came to our rescue in the form oft the WebP file format. WebP was developed by Google Developers as a replacement for JPEG, PNG and GIF. It was perfect for what we needed.
Days before launching the sample site, we had a crazy idea: how fast could we build a dark mode from scratch?
Dark mode was something we had been talking about for weeks. Sibi and Varun asked me to take a look into how difficult it would be create it for our site. I spent a few days exploring options and came to the conclusion that we could build it.
I did what made sense to me: I targeted each element (one at a time) and added individual styling options. But, Webflow as a “no-code” platform sets a limit on the amount of custom code you can include. This issue forced me to be more creative in solving the character limit problem.
I found an elegant solution to reduce our code: CSS Root Variables. Using these variables, I could define core Dark Mode styles and reference them again and again. The biggest benefit was reducing redundancies in our code, which is exactly what I needed.
Applying the Variables was a breeze. All I had to do was take an existing Light Mode component, tack on the relevant Variable and voila! I had a reusable, editable and efficient Dark Mode component in less characters. This allowed us to tremendously reduce our custom code library in Webflow.
With everything in place, we started doing final checks, testing and last-minute clean-up
The final thing was to make sure the site worked on every device and browser. We split up the work so each team member tackled a specific device/browser and logged any bugs during the day. Every night, I would clean the bugs and publish a new version to our testing domain. We continued this process until we felt confident enough to launch.
To make pre-ordering easy, I designed a "Pre-Order Block" that I added to the bottom of each page. It contained all the relevant information that a reader might need to make a decision.
Our sample site delivered when it needed it to and we had the numbers to prove it.
.png)
This is ~7x higher than others in the B2B Technology space
.png)
We were able to clean up our code by utilizing CSS Root Variables
.png)
Next-gen image formats and removing site redundancies sped up our site
While we felt confident in our sample site, we didn't expect these good of numbers. Our conversion rate and internal website efficiencies made our site a quantitative success.
While we didn’t do it for the praise, it was great to hear that people loved it.
The praise was also unexpected. When random strangers share kind words about something you built, it's hard not to feel proud. The next thing was making sure our full product launch was equally successful.
Building on our success, we quickly shifted to launching the full library.
Our roadmap was very clear: launch the library! We had to clean up the content, finish the illustrations, test everything and finally get the word out. The final step was to launch and see what happened.
Finally, on August 1, we launched “Fruitful” out to the entire world.
After 2+ years of working on "Fruitful," we finally launched on August 1st. The success of the launch was tied to the sample site's success. Creating it allowed us to test our assumptions before our full product launch.
.png)
Bringing Dana on made it possible for us to hit our tight deadlines
.png)
If we hadn't asked our readers, we might not have created a sample site
.png)
Spinning up dark mode in a week forced me to push myself in new ways
