Website Design: LastWords

UX Design II Final Project

The Assignment

Conceptualize and create an original e-commerce site. Develop a design brief, style guide, wireframe and prototype, and conduct user testing before producing a final usability report.

The Site: LastWords

With the final project for this class, I wanted something different from a standard e-commerce website that focused on physical products. I developed the concept of a site that could act as an archival repository that served both the archivist providing the materials and students who would be making use of them. It would give people the place to share primary sources and support themselves while doing it. I envisioned it as a combination of JSTOR and Patreon, and called it LastWords, referring to experts who would have the “last word” by sharing their educational and historical resources.

Excerpt from the LastWords design brief

LastWords aims to support researchers, educators and students by giving them a platform to create communities, share resources and fund the research they’re passionate about.

During the 2020 pandemic, access to in-person research materials was made nearly impossible with global quarantining and social distancing, especially for university students who returned home with no way to access on-campus resources.

LastWords was created to bridge that gap, offering a place where students and other curious individuals could access credible educational material from the comfort of their home. In the few short years since then the site’s offerings have grown, with everything from academic journals to video essays to archival materials and more finding a place on LastWords. The added beauty is that users providing the research materials have the power to determine the accessibility of their content, with tiered options for paid subscriptions and individual content pricing.

Creating the style & branding guide

As described in these pages from LastWords’ style guide, aesthetic choices for the site were made with a “dark academia” theme in mind. LastWords aimed to bring the library and romantic notions of research to a digital space, and the site’s color palette, images and fonts were chosen to reflect that goal.

Wireframes & Prototype

Wireframing began as hand-drawn sketches to establish the general outline and organization of the site, as well as allowing for any quick adjustments. The site was further fleshed out in Figma, where more pages were created and the buying journey and workflow were planned out. Finally, multiple iterations of a semi-functional prototype were developed with the additions of aesthetic elements and finalized copy. There were three versions of the prototype, with the last version incorporating insights and changes that resulted from user feedback during testing sessions.

Conducting user testing

When it came to determining the effectiveness of the site’s prototype, user testing became a crucial means of collecting direct feedback on the branding and e-commerce journey.

Six users were recruited to perform a task analysis and short survey to offer both qualitative and quantitative feedback. This data centered on what aspects of the site the users found effective and enjoyable, along with any challenges or points of confusion they encountered as they completed their journey.

To collect a mix of qualitative and quantitative feedback, I conducted a semi-structured interview and administered an exit survey. It allowed me the framework to give the user a guiding premise and specific actions to perform, while still allowing space for them to share unsolicited feedback.

Key Takeaways

  • Overall user sentiments towards the site, its functions and e-commerce process were generally positive

  • Users found the site simple to navigate, easy to understand and aesthetically pleasing. They also shared positive feedback about the mission of the site to act as a place to share and house educational materials, and reacted favorably towards the content available on the site.

  • Pain points included:

    • Improving navigation speeds

    • Providing greater transparency of pricing details

    • The need for more purchasing options, such as adding a pop-up cart that wouldn’t interrupt users’ shopping journeys

  • These challenges were addressed in the final prototype of the site, previews of which can be seen below