WePDF

Rebranding and designing an e-commerce site for Sanjow's WePDF product.

Project Overview

Client Background

My task was to improve the user interface design and usability of Sanjow's e-commerce desktop site and targeted pages for their PDF editor tool. I was also given creative license to rebrand the product. This project was capped at 10 days.

To skip to my prototype, follow this link.

Transform the client's e-commerce site to appear trustworthy, innovative, and distinct from competitors.

Market Research

Feature & Brand Identity Analysis

Reviewing websites of competitors like Adobe Acrobat, PDF Smart, Best PDF, PDF Simpli, PDF Boost, PDF Expert, as well as those of other productivity tools like Asana, helped me make decisions about which features to highlight and how I could make my client's site stand out from other PDF editor sites.

Highlight AI chat feature, OCR (Optical Character Recognition) reader, and military grade encryption.

Differentiate from direct competitors through a brand identity akin to those of reputable online software tools.

Align with what users expect to see with respect to site layout, main navigation, and where to find information.

Heuristic Analysis

I started my process with a quick evaluation of my client's site against Nielsen Norman Group's 10 Usability Heuristics for User Interface design.

A few key issues:

User chose price at top of the screen, but there was no pricing information on page
Feature tiles looked like buttons and all dragged the user back to the same upload box at the top of the screen when clicked
Drag and drop box occupied the majority of space upon entering the site
Contact information did not take user to a mailto inbox as they may expect

User Research

My client reported that their client base is around 90% European university students. I found 6 college and college-age students based in Lisbon to interview on how they choose online tools they use for school and to walk through the current site with.

Of the 6 interviewees I spoke with:

User Persona

I’d go with the first editing tool that meets my price range and has the features I need.

Alfonzo Ricci | The Price-Savvy Student

Alfonzo is a 20-year old undergraduate chemistry major at an Italian University taking a literature elective. He cares about doing well in his undergraduate degree, having free time to enjoy life, and staying within his budget.

Alfonzo was asked to annotate a chapter of a PDF for a class discussion. He searches online for tools to quickly extract the chapter he was assigned, skimming websites for critical information until he finds one that seems trustworthy and feels like a good fit.

*Photo by Dollar Gill on Unsplash.

User Journey Map

My user journey map highlighted opportunities to improve the website's navigation bar and give the user more pricing information.

Pinpointing the Problem

I distilled my research down into a problem statement, and then reframed it as an actionable question to kick off my ideation process.

We-PDF is perceived as unreliable because users are confused by the site’s information architecture, functionality, and contents and cannot immediately discern whether the product is the right fit for them.

How might we instill confidence in potential customers that We-PDF can meet their needs?

User Stories

Writing user stories ensured that each of my design decisions could be tied back directly to user needs.

Style Tile

For the style tile, I drew inspiration from the product's features - like highlighter tools and buttons, and minimalist yet fun productivity-focused products like Asana. I updated the logo to present the brand as trustworthy and bold.

Design Process Spotlight

Giving Users Pricing Information

In my user testing of the client's current website, users overwhelmingly communicated a need for more pricing information. Users felt that the paid trial that would start automatically convert to a membership was deceptive, and many expressed an expectation of a free trial. In response, I created and tested a pricing page with different pricing options. Users reported a sense of agency and more positive brand perceptions.

My client was interested in keeping the insights on pricing from my user interviews in mind for the future, and holding onto the mid-fi design as a possibility for future A/B testing, but wanted to keep the pricing information on the site more subtle in the meantime. To cater to both user and client needs, I archived my pricing page design and added a sentence about the trial to both the home page and checkout page.

Low-fi design

Mid-fi design

Design decision after client conversation

Mid-Fi User Testing Highlight

In my low-fi user testing, users responded positively to the idea of scrolling through the homepage to see categories of features with photos next to them. In my mid-fi user testing, users responded negatively to the amount of scrolling they would need to do to see all of the categories. My client also chose to forego the free trial idea presented, and chose to remove the secondary call to action.

I adapted my high-fi design to meet user and client preferences by consolidating the categories of featured tools into one row and removing the second main call to action.