Paper & Pen

Role UX Designer/Researcher
Agency UCSD Extension UX Certificate
Client UX Design Project

Paper & Pen

Client Information

Paper & Pen is an ecommerce website for specialty stationary. Users can order customizable invitations for all their life’s special moments. Unlike their competitors, Paper & Pen focuses on the individual. Each and every one of their users' purchases are unique to their maker. Users create connections with the product through their experiences personalizing their invitations.

Project Objective

The goal for this project is to allow users to purchase personalized invitations. The personalization experience of this website would be the ability to filter through various templates, and customize it further with options like different colors, paper types, and typing in their event information. They will also have the ability to review the proof prior to purchase.

Research

Who Are Our Users? Our users are individuals looking for a more customized experience for invitations with the ease of doing it all online. A bulk of the users will be users who are engaged looking to buy wedding invitations. These users are into quality but also look for convenience. The target users appreciate typography and creative design.

According to the Population Reference Bureau the median age for getting married for women is around their late 20’s. Source. After further research, it is found that 39% of engaged individuals plan their wedding on their phone and 41% on their desktop, 80% plan their wedding online. 54% brides plan their wedding, 25% grooms, 14% parents, 7% other. Source.

Analyze

By analyzing who our users are, statistics show that most users will be coming to the website to purchase wedding invitations and are mainly women in their late 20’s. Users both equally use mobile devices as well as desktop to plan their wedding so special consideration for both screen sizes and experiences must be taken into account by designing responsively. By providing the information to be easily accessible, it will boost conversion rates and increase the rate of return.

User Persona

Paper & Pen

By creating this user persona, It gave me a clear idea of the path they would take to achieve their goal. It helped me to understand my users' needs, experiences, behaviours and goals.

Designing the Wireframe

Paper & Pen

I started with a wireframe to easily map out how the layout of each page will look like. After some iterations and usability testing, I moved onto the prototyping phase. This saved me time since all the iterations were done to the structure of the site and once the framework had been worked out, I was able to focus on the visual aspects of the design.

The Final Prototype

Paper & Pen

Since Paper & Pen is a company that focuses on individuality and customization, I wanted to add that feeling through the typography used in the design. I paired a timeless san-serif font with a handwritten script font to tie into the theme of handwriting invitations to your guests. And since nothing about Paper & Pen is generic, I included a custom memphis pattern and added complimentary matching colors for the hover states, header text and buttons used throughout the design. The overall results is a marraige between pleasant user experience and beautiful user interface.

Personalization Journey

Paper & Pen

This is a snippit of the user's journey to personalizing their invitations through the website. After the user selects an invitation of their choice, they are prompt to select color/paper/quantity etc for the invite. Each form they fill out is close and in a row, so their mouse does not have to travel too far to get to the next point. They are also able to personalize their invitations within the same page by clicking on the personalize button. There a drawer effect will happen and options for personalization will slide out from the right of the website. The user is able to see the information they input in the image to the left to see how it will look like on the invitation. After customizing, they add to cart and are prompt to review the proof. They cannot proceed to checkout unless they check the box verifying that they have reviewed the proof. After checking off the box, that triggers the checkout button to be clickable, allowing the user to checkout their purchase.

Full Homepage Design

What I've Learned

This design was created as a project for UCSD Extensions for the UX Design program. Prior to creating this design, I knew little on how to approach designing an eccomerce website. It help me realize that although I am designing for the users, I am not the user. I found this out when I was conducting the usability testing after making assumptions on where the user would go when given a task to customize an invitation. Thinking that their path was easy to navigate, I saw that my users were getting stuck and frustrated because of the placement of buttons and wording. So taking that feedback I went back to reiterate the design resulting in a better user experience for users of the site.