0. about alexandria

Alexandria is an early stage startup focused on information retrieval and natural language processing (NLP) for long-form content. Essentially, the question they ask is this:
how can we use machine learning algorithms to make reading books more "internet-like"?

I liked the question a lot (｡•̀ᴗ-)✧ so I decided to take on the role as sole designer for Alexandria's first product.

The product consists of three core elements:

the algorithms • capable of querying long-form content, using question-answer modeling, and generating recommendations

the corpus • available through partnerships with publishing houses. accessible to users through a subscription service

the interface • a search engine, an adaptive e-reader, shareable annotations

This case study details my process in creating the Alexandria landing page. But there's more !! See how I design the Alexandria web application here.

I. objectives and constraints

In her earliest visions, Sonia imagined Alexandria as "a feminine robot company, the ultramodern Alexandria, like a Spotify for books in sleekness, but even cooler and more expansive in ways I can't anticipate."

"The Ariana Grande God is a Woman music video captures the classics well, plus expansiveness and divinity, which is what reading should feel like!"

"Btw is it possible to add some pink to the ux?"

two niche audiences simultaneously

Since Alexandria was in its baby days, the purpose of the landing page was not to acquire general customers, but to convey a concept that attracted investors, and enticed tech-space professionals to join the company.

The copy had to communicate value proposition in simple terms, while balancing language intimate to tech circles.

We also required a site that could collect usage data and customer feedback on product demos. For both user research and social proof, this information was very valuable.

distinctive aesthetics, must linger in memory

Co-founder Sonia anticipated a post-COVID optimism in Silicon Valley, a saturation of startups seeking funding from the same bubbles. In a sea of benign tech minimalism, Alexandria was to be evocative in form, function, identity.

Of course, Alexandria's classical origins couldn't have been ignored. As part of a larger research institution dedicated to the Muses, the Library of Alexandria was a center of all learning, at the intersection of science, tech, and art.

At some point in discussion, the aesthetic direction distilled into "robot Ariana Grande complex." Alexandria would exist somewhere between Mount Olympus and the internet. And it was my endeavor to make others feel that ♡

designing for novice developers

Resources were tight. It was unclear whether landing page development would be outsourced to helpful family members, or if it would stay in-house, by feeding Figma files into conversion apps, or even building in Webflow.

My designs needed to be expressive, without the use of intricate animations and transitions. I needed to be flexible to accommodate changes in plans.

II. research

competitive analysis

I examined the sites of two iconic artificial intelligence companies, DeepMind and OpenAI, to better understand the ethos of the machine learning community.

My surface level observations found the use of future-oriented problem-solving language, which wasn't all that surprising for AI companies. But the deeper implications were:

their intrigue with the unknown
their ambitions for connecting humanity
and their intent on world building, concerning the what-ifs of reality and the creation of things.

And in ways, the experiences of reading books or browsing the web mirrored these motivations.

Both DeepMind and OpenAI weren't shy about their technical terms and acronyms

seemed confident in the knowledge of their visitors (or that those who didn't know would probably look it up)

Abstract imagery was emphasized across both sites; concrete images might have had the risk of feeling incomplete in representation

DeepMind opted for vibrancy and color, while OpenAI went for cool, clean, and slate

Notably, the DeepMind and OpenAI sites were home pages meant to invite audiences to learn all about them. Alexandria instead needed a succinctly informative, squeeze type landing page with specific calls to action.

Thoughts of Notion's landing page quickly bloomed because of how easily it converted me. Through large-scale hi-res auto-play videos, Notion demonstrated their product right away, without locking it behind a sign-up wall. Then sandwiched between every demo was a casual opportunity to register, in case the next was the one to convince.

landing page statistics

A few numbers helped guide my design thinking.

III. lo-fi • feedback and revision

a (small) usability test

My initial strategy involved removing barriers to exploration. In keeping the search bar as the focal point, I wanted to give our customers an immediate chance at testing the algorithms.

I did a usability test and found that there was no confusion about searching as the call to action, but customers weren't exactly sure what to search:

“Do I search book titles or should I ask it a question?"
"I'm struggling to think of book related things right now."
"Just search like Google, or...?"

Although people with more AI experience might have known better how to test the limits of the engine, implementing a search suggestion could have minimized inertia and assisted on-boarding.

Customers also seemed more preoccupied with the book aspect, rather than searching as usual; including a few search tips could have been a good idea.

Either way, the CTA needed revision.

While talks with publishers were resolving, Alexandria decided to limit algorithm demos to a private beta. The interactive demo experience was to be exclusive... but this only applied for real books parsed with NLP. There was nothing stopping me from inventing my own fake books, so that more people could get a sense of what's to come.

IV. hi-fi • visual design and prototyping

streamlined q & a search demo

This simulates the process of asking the search engine a question, and receiving contextualized answers pulled directly from relevant books.

[ see my fakebooklibrary_v.1.0 here ]

nlp recommendations demo

This demo simulates the algorithms’ capacity for similarity in “made for you” recommendations, and diversity in “discovery” recommendations.

[ see my fakebooklibrary_v.1.0 here ]

V. future directions

iterative design / measures of success

Putting private beta to good use !
We can collect direct feedback from beta users...

how well / poorly do customers understand the product based on page content ? based only on headlines ? on pictures ?
what are sources of confusion ? more or less technical info ?
do the demos feel relevant / representative of use cases irl ?

... and we can collect indirect feedback, measuring success through proximity to target metrics

# of sign ups, # click interactions, duration of time spent on site, misclick rates etc.

a / b testing

Potential areas of improvement I want to test next:
1. Changing the wording of "request demo" button in the q & a search section

something less committal like “click for free demo” may see higher conversion rates
research on contact form optimization found greater conversion using words like “click here” and “go” compared to worse performing words like “submit” “download” and “register”

2. Including a contact section beyond hiring

the current design includes contact info for those interested in working on the Alexandria team, but maybe this is too narrow
a contact section for any and all comments / inquiries could improve both conversion and credibility

3. Improving the private and streamlined q & a search demos

should a search suggestion be implemented for the private demo, and if so, what would be best ? perhaps it could be personalized to the demographic of the visitor
is it worthwhile to demonstrate question framing effects, or would that only increase cognitive load ?

Rica Chan

game design concept • iji

web application • alexandria

landing page • alexandria

about

contact