orderlyLogo

Our client, Orderly, wanted some help with their website.

Orderly is a startup run by group of ex-Googlers who are dedicated to helping people manage their receipts and purchases. Once the Orderly service gathers your receipts, it can do a number of things, including:

  • It saves you money when prices drop on things you’ve purchased by requesting post-purchase refunds
  • It tracks your packages
  • It monitors return policies

Orderly is in the early days of development, and wanted some help refining their website’s design.

A bit about the team, and my contributions

I worked as one of three UX consultants on this project. The duration of this project was a brisk 3 weeks.

circleJerks_02

Some of my contributions to the project included interviewing users, developing personas, designing icons, writing copy, and creating a new company logo.

This was a client project for General Assembly.

The UX Process

Our team engaged in the UX process in order to achieve the client's goals for the site. This involved conducting research and user tests in order to make informed design decisions that would meet the needs of Orderly's customers while also achieving Orderly's business goals.

UXProcess
research

Research

Comparative Analysis

We conducted a comparative analysis in order to learn what competitors were doing in the post-purchase space.

Comparative analysis_unlabeled

Takeaways from this analysis include:

  • It was significant to us that Orderly is the only one that doesn’t sell consumer data
  • Orderly is one of only two who provide package tracking and arrival notifications
  • There are opportunities to expand the service,  providing users with data about their buying habits
  • The field is competitive. Orderly must provide its users with a stellar experience in order to compete.

Testing the Original Site

We showed Orderly’s original site to people in order to see what they thought.  The term “declutter” was prominently featured in the original version of the site. However, when we presented the site to users, they were confused about what the website did. The word “declutter”, along with a header photo that featured office furniture, made some people think that the site sold storage containers.

orderly_header_sm

We found that the Orderly website did not do a good job of explaining what the Orderly service did. Users were wary about signing up for a service they did not understand.

howItWorks

Orderly’s process of getting new users signed up needed work. The “Getting Started” section of the home page referred to a nonexistent “Share Receipts” button.  Furthermore, Orderly’s sign-up process didn’t provide the user with confirmation that they had completed the process, which confused users.

gettingStarted

Finding out what users want and need

In order to learn about what users’ wants, needs, and expectations might be for post-purchase services,  we conducted interviews and an online survey.  We interviewed 6 people; we surveyed 37.

Survey Results

My teammate Lauren assessed the results of the survey and created some graphs to help us visualize the results. We learned that interest in Orderly’s features exceeded 40% in most cases.

As expected, everybody wants to save money. Package delivery notification also had significant interest across age groups. This was meaningful because package delivery notification was one of Orderly’s differentiators discovered from the comparative analysis.


interest
English-Conversaion-Group

Interview Results

In addition to the online survey, our team conducted interviews with 6 potential Orderly customers. Here are some of the key insights we gained from our interviews:

  • Receiving packages is a pain point for working professionals
  • Many people are not aware of post-purchase savings opportunities
  • People are too busy to keep track of package deliveries or return policies
  • People are concerned about online privacy, but are willing to make some trade-offs for the sake of convenience
define_black

Define

Design Objectives

The information we gained from our research helped us define our design objectives for Orderly’s website.

We needed to do a better job of clearly and concisely explaining Orderly’s services through better writing and appropriate imagery so that people can better understand what the service does for them.

Reorganize the homepage in a way that makes more sense to users so that content is more easily accessible

Provide appropriate feedback to the user during the sign-up process so that users feel more confident about what they’re signing up for, and so that they feel that the transaction is secure.

Personas

The insights we gained from our research led to the development of two personas.

millennial persona

Tina, a millennial, was our primary persona. Tina is a busy working professional who has difficulty with package deliveries. She likes to buy multiple things online and return what she doesn’t like. She also needs to save money because she’s paying off her student loans.

GenX persona

Amanda, a Generation X wife and mother, works part time from home. Amanda loves to get a deal. She clips coupons and isn’t shy about asking for discounts. However, sometimes her love of a bargain gets the better of her and she buys things she doesn’t need. Keeping track of return dates is a pain point for her.

ideate_black

Ideate

What should we build?

Our team engaged in some brainstorming sessions in order to figure out how to achieve our design objectives.  One of the things we wrestled with was how to explain Orderly’s many functions in a clear and concise way.  

Finding the right words

We conducted card sorts in order to discover words that would be meaningful and clear. In one card sort, subjects read a detailed description of Orderly’s services, and then were asked to suggest some keywords to describe the services. Words such as effortless, save, track, all in one place, organize, smart, and automatic were suggested the most. We used this list in order to come up with our new site tagline: “Effortlessly save, track, and organize”.

 

Icon Development

Orderly has three primary services: saving people money via price drop reimbursements, tracking packages, and monitoring return policies.  We wanted to design easy-to-recognize icons that represented each of these functions.  We made several sketches of different ideas that evolved into the three final versions.

icon_sketches_sm
arrow
icons
design_black

Design

Redesigning the Homepage

With insights gained through our surveys, comparative analysis, interviews, and user tests, we set about designing a new home page for Orderly, as well as a new onboarding user flow.

We needed to design a site that did a better job of communicating Orderly’s functionality. We also needed to make the onboarding process clearer, and make users feel more secure about signing up. Here’s how we approached those goals.

1. A LOGO
Orderly's site lacked personality. I created a simple logo to help communicate Orderly's brand.

2. NEW NAVIGATION BAR
Our new navigation bar placed the site's primary functions right at the top, where people expected to find them. This made the site easier to use.

3. A BETTER TAGLINE AND HERO IMAGE
We updated Orderly's tagline to concisely communicate Orderly's primary functions.

4. A CALL TO ACTION
We added a CTA button to encourage people to sign up, prominently featured in the header, above the fold.

5. ICONOGRAPHY
We designed icons that are meant to communicate the functions of the site.

6. CLEAR, CONCISE DESCRIPTIONS
We wrote clear, concise descriptions of the site's functions.

7. STEP BY STEP
We broke the process of using Orderly's site into steps in order to help people understand what they needed to do and what to expect.

8. A SECOND CTA BUTTON
We added a second CTA button intended for users who have scrolled down below the fold.

9. REORGANIZED FOOTER
We placed the various functions provided in the footer into more sensible categories. We discovered these categories by having people perform a card sort.



homePageAnnotated_02

What makes a great sign-up process?

pageComposite

In order to determine how we could improve Orderly’s sign-up user flow, we took a look at how some other sites do it. We examined the sign-up flows for a variety of sites, including AirBnB, Virgin America, Venmo, and Slack. Some sign-up flow characteristics that we implemented include:

  • Clear, simple explanations at each step
  • Conform "Sign in with Google" buttons to widely used conventions
  • Include the use of a confirmation code
  • Make use of a “lock” icon to communicate that user information was secure
USER FLOW

A touch of style

orderlyStyleGuide

Putting together the style guide helped the team get an idea of how the visual style of the site was going to come together. We carefully considered our color palette, and ultimately chose a palette of greens and yellows, a subtle reference to money and wealth.

test_black

Test

Were our designs effective?

In order to know whether or not our designs were effective, we tested them with users. We tested Orderly’s site, as well as mid- and high-fidelity prototypes of our new designs. We paid close attention to users’ willingness to sign up with Gmail, as well as users’ understanding of Orderly, and the ease of use of the sign-up process. We saw a steady increase of comprehension of the site as our designs evolved, as well as increased confidence in Orderly, and increased willingness to sign up for the service.

usabilityTest

Next Steps

Although testing demonstrated that our design changes to Orderly's site were effective, there's always more to do. Given the opportunity, we would like to take a look at Orderly's Receipts screen, where users can see the status of each receipt that Orderly has logged. We'd also like to do some more specific A/B testing of things like our color scheme choices and home screen imagery.

10percentGraylinkedIn_40px
10PercentGrayIMDB_40px

email: katevans at gmail dot com