Twenty Four 7

Portland, Oregon based creative agency.

Company

Name: Twenty Four 7
Website: twentyfour7.com

Objective

Create a great user experience for an upcoming product release for a skincare business.

Tasks, Tools, & Technologies

Wireframe, User Experience Design, Adobe XD, Prototyping, Invision, Illustrator

Details

I worked as a user experience designer for Twenty Four 7 creating user experience flows with wireframes, Adobe XD for mockups, and interactive prototypes made in Invision. I primarily worked on the purchase process and listing out ways to quicken the time from decision to purchase. I worked with project managers, content writers, graphic designers, and development teams to tailor the final product that met the clients goal. I specifically worked with a front-end developer to establish a consistent layout look and feel using Bootstrap 3 for css and event actions using javascript. My contributions on the project lasted about two months contract fulfilled.

Previous Dashboard Design

Previous dashboard design felt claustrophobic and not something that was easy to read or use. There needed to be a quick access page after login that gave PSPinc customers the ability to get where they needed to as efficiently as possible. Consolidating pages was a good next step: domains and services, billing, and contact all could be consolidated better.

Dashboard Wireframe

Working with customer responses from surveys, I made a new layout that gave a quick access dashboard to important areas of the site. Customers previously disliked not having a dashboard they were used to seeing from other PSPinc products, they also wanted notifications for account notifications to be much clearer.

Redesigned Dashboard

Final design gives visual aids with icons to quickly access billing and domain sections. Having buttons instead of text and links in the alerts gave immediate focus after logging in as to what the alert was and made it more clickable. Feedback received after the release was positive with a reduction in missed payments.

Previous Domain Purchase – Step 1

Searching for a new domain to purchase was clunky and not very appealing. Whitespace wasn't utilized well and searching domains took quite a long time with customers calling PSPinc to purchase a domain which isn't the most effective way.

Previous Domain Purchase – Step 2

Each domain allowed for additional add-on's like SSL, email hosting, and Whois ID Protection, as well as choosing/adding plans. This design was more of an anti-pattern with so much information overwhelming users.

Previous Domain Purchase – Step 3

Duplicated content and awkward layout with the third step didn't were the big concerns for this page.

Previous Domain Purchase – Step 4

Payment step was confusing and users didn't always get redirected back to the platform from PayPal. Implementing an easier payment system was needed, more so a better purchase flow with PayPal was needed.

Domain Purchase – Step 1 Wireframe

Meetings with the sales department were held, I would ask them questions about what they like and don't like with the system as well as what they would like to see added with the domain buying process in general.

Domain Purchase – Step 2 Wireframe

Interviews held again with the sales department I was able to create a design that listed all plans in a very readable way while future proofing the design when PSPinc added new plans.

Domain Purchase – Step 3 Wireframe

I moved the user agreement to the bottom and added the SSL add-on form section under the cart. Previous design involved a clunky hide and show form that activated when a checkbox was ticked.

Domain Purchase – Step 4 Wireframe

The cart design was carried over from step three, however the design was changed after the initial wireframe to include a "Pay Now" button.

Domain Purchase – Step 1 Mockup

Adding "Your Domain" and "Your Plan" gave users easy access for information related to their purchase. Changing the steps above the search bar from images to markup allowed for a better mobile experience.

Domain Purchase – Step 2 Mockup

Cleaning up the layout and establishing a hierarchy proved well with an increase in new plan domain purchases and with the add-on's.

Domain Purchase – Step 3 Mockup

The final layout worked well with the established flow, allowing users to easily see what their total cart was and a detailed list.

Domain Purchase – Step 4 Mockup

The "Pay Now" button redirected the user to a page to fill out a credit card form or by choosing the PayPal option by clicking their icon. To improve the PayPal experience I worked with a programmer to allow the PayPal payment option to display in a modal window instead of a new tab.

Previous Domain Summary

The page lists all purchased domains and/or add-on's and needed to be consolidated. If a customer had 10 domains they would have to be redirected to another page to view the info.

Domain Summary Wireframe

Consolidating the domains and services into one page helped remove clicks for customers. I ran tests with employees from certain departments not associated with this platform as a means to test the design. A prototype was made in Adobe XD to allow employees to get an idea for the new layout, valuable feedback like a better way to hide the domain details was provided and ultimately implemented.

Domain Summary Mockup

Final design didn't include an actions column; that was pushed to phase two, however each domain now was collapsible with only the domain name listed in the blue bar. This design recieved good feedback from customers.

Previous Billing

The table here was very thorough, but the customer didn't need some information like closed or the ID, that content was moved inside a detailed PDF invoice. Consolidating "My Bills" and "Billing History" into one page, again, was a smart move.

Billing Wireframe

I turned billing history into a table where customers could click to view their PDF in a modal window; this invoice design was also the same one PSP Billing department sees as well as the invoice emails PSP sends to customers, I conducted design pattern tests with billing department employees to nail down an easy to read invoice.

Billing with Current Bills Mockup

The final design allowed for more room and using a card style design approach broke up multiple bills into an easy to glance at section. I suggested the "Download All" button into the design for customers who needed an Excel sheet type of file for their records.

Billing Compete Payment Mockup

Prototypes were made and given to the sales department as a way to test the ux patterns. That department handled all client accounts and knew PSPinc employees well to know downsides they were experiencing with the old system. The final credit card payment allowed PSPinc customers to pay bills on their own without the need of involving PSP employees. This helped the sales department significantly in reducing the amount of time spent handling customer accounts and allowed them to focus on higher priority tasks.