Gather as much data about everything as possible. Make connections. Form ideas about what it all means.
Use the discovered information and ideas to create a vision of how to best meet the needs we’ve targeted.
Mold everything into something real, step by step. Build in usage monitoring and gather more data. Go back to discover.
When I began at BuyCheapSoftware.com I discovered a ten year old custom made website. The e-commerce, product management, site search, pretty much everything had been built custom over the years, by several different developers. The front end was a primarily static, table-based monstrosity with hard coded headers and footers, since one of the top requirements was responsiveness, it was in the interest of the site’s maintainability to completely revamp the codebase.
The first thing I discovered once I dug into the analytics was that the site search exit rates were alarmingly high and there was nothing keeping track of the terms people were searching, so I implemented Nextopia site search to replace the existing search functionality, which managed to quickly drop the search page exits by a third.
The new site would take some time to develop so I mostly focused my attention on the existing site at first. This gave me the opportunity to immediately fix some critical issues, gather data about user behavior and opinions, and integrate some other third party systems including PayPal checkout and ResellerRatings. By the time I was ready to go full steam on the new site, I had boosted conversion rates from about 5% to well over 8%, reduced checkout abandonment from well over 6% to about 4%, and had a clear picture of what was working and what wasn’t.
This documents my research into user drop-off throughout the site purchase process. For each page in the steps I have included it's relevant analytics data, target number goals in associated benchmarks, and proposed changes to reach those goals.
From looking at the data, talking with company staff, and conducting brief telephone surveys with customers, I drew up these user profiles (aka personas) to let everyone know who we were building for.
Here is how the site looked when I came on board. It was built in the early 2000s and was showing it's age, especially on large monitors where it's 776px width looked comically small. Despite the aged appearance, we got regular compliments on it because people liked the familiar layout and it was really fast. On the other hand people didn't like how small everything was and the clunky checkout process needed a lot of help.
After poring over analytics and session recordings, outlining the owner’s vision, and gathering qualitative data from customers and staff, I began the concoction phase with these main objectives:
Once I was done with my sketches, notes, user flows, and wireframes I hired a local digital agency Analog Creative to work with me on the visual design. After a few rounds of iteration with the designer Cassy, we ended up with a contemporary UI which met all the objectives and looked great across devices. We called it v2.
During this time I also continued to update v1 with things like Google Trusted Store integration and a blog section. I implemented CPC campaigns and other marketing features which came and went through the site too, so I was still very active in v1's development as I managed the construction of v2.
This wireframe demonstrates how the page sections are grouped and how they change at each responsive breakpoint.
This wireframe demonstrates the shopping cart layout, including a section of it where users could save and load cart contents.
Blue was the branding of the existing site and for tech related websites in general, so we stuck with that and introduced orange as a highlight color for buttons and sections that relate to the shopping cart or user account. The Lato font was chosen for it's simplicity/readability and because it paired well with the font of the existing logo which remained the same.
The initial code was produced by Brian at Analog using a Zurb Foundation 5 framework based on the mock-ups Cassy and I had come up with. After this hand-off I worked with a developer I hired, Kim, to build in all the functionality and complete some of the parts that were new or had otherwise been left out of the concoction phase.
Along the way, management decided to switch the payment processor so parts of the checkout process had to be rethought and tweaked. Although this held up production a bit, it set us up to be able to add the ability to save payment cards, a feature which would've been great but ultimately never saw the light of day.
Below are pre-release screen captures of some of the key functionality of the site.
I designed the login process to be smart, it responds actively to the information that a user has provided and starts out as only an email entry input. Once a valid email is input, it becomes either a login or account creation form depending on whether or not the entered email is an active account. Aside from removing the need for users to choose between “login” and “create account”, it is a singular interface that can be included easily through the site, seen here in a drop-down menu item from the main navigation.
The checkout process is kept as short as possible. If users have purchased before, they need only input payment information. The card-info-save feature was in development at the time of shutdown, and it would have provided prior customers a two-click, no-type checkout process on orders using their default information.
Finding and buying a product is made as easy as possible with a very straightforward checkout process, starting with no password prompts. In this case of a product key-code which is delivered via email, there is no need to take any shipping information, only the payment info is needed followed by a confirmation screen.
Research showed that users were confused about the prior site’s PayPal Express Checkout process, where customers are sent to PayPal’s site to make a purchase, then return to complete the purchase. Dead-simple prompts along the way gave users the confidence to keep proceeding through to successful order completion and drop-off rates were reduced.
Big block link targets butting up to one another make almost the entire menu active. Super sized menus slide down subsequent page content so as to not cover anything, users can simply scroll past the menu and need not even close it. This format translates well to mobile as well.
This product display is used throughout the site to showcase popular products. The entire box is an active link target as indicated by the change of shade in the title. Critical alerts about the product appear stacked above the add-to-cart button only upon hovering over the button (intent to purchase). Other specific product information indicators stack vertically along the bottom.
iPad/AppleWatch App Concept
Sketch / PS / Principle / AE
Expedia is in the unique position of knowing exactly where and when people are going to be. The concept of Metro Map is to extend Expedia.com's anemic “Things to do” section into a tool to facilitate the entire experience of trip planning and integrate seamlessly with the airfare and accommodation services already provided by them.
Metro Map addresses three main types of interaction taking place during the travel planning process:
The app could be used pre-travel to discover and plan for a visit to an unfamiliar city, and then act as a guide and itinerary once there. Location awareness would give the ability for the app to follow travelers every step of the way and bring awareness to details of the attractions and any other surrounding relevant information.
The city-wide interface groups attractions into categories that have been selected by the user (e.g. theatre arts, shopping, bars, etc.) and offers various sorting methods so for instance, when using the app on the go users could pull up the closest coffee shops.
A big map displays the attractions' locations and the location of the user if they are in the city. There is also weather information displayed which can be expanded out into a forecast view of the next few days.
Locations are shown from an exterior view in order to make the attraction easy to recognize once the user arrives there in person, and more information could be included overlaying the image (e.g. hours, prices, wi-fi availability, etc.)
The details of an attraction include a text overview and web-sourced images for users to browse through. The map highlights the location and there are buttons to get directions or transportation to the address. The venue's contact information and web presence is clustered together, and below that all it's amenities/restrictins are listed. Other contextual information fills in the rest of the left column. In this case of a theatre, users can also check reviews/ratings and buy tickets from within the app.
If the user is interested in this attraction they can add it to their schedule, and then move on and continue exploring other things to do.
Within the main navigation of the app is the users schedule. This is an itinerary of attractions that they have compiled within the app along with any itinerary items they have created through Expedia's airfare and accommodations booking system.
Items can be moved within the list and are "greyed out" once the attraction has been visited. Micro-interactions such as rating an attraction can be made from the listing.
Since the app is connected to Expedia, all flight information changes can be pushed directly into the schedule.
For smartphone wearers, there is an integrated wearable app. Keeping the iPad safe and concealed in a bag, the watch app gives access to the user’s schedule and information about the attractions. The app can navigate to the venues and, once visited, users can add thier rating/review.
All-in-all the user would never have to reference the iPad app once they had their schedule laid out.
Home Page Redesign
Sketch / PS
The Logix Federal Credit Union web site offers a lot of information and access to member's accounts. These concept mock-us demonstrate some ways in which to cram a bunch of menu options, while highlighting four commonly used functions (finding an ATM, accessing account information, paying bills, and contacting a support rep) and making them usable on the homepage itself, across a variety of devices.
A smartwatch size UI contains only the four predominant functions with a swipe-down menu into any other functionality. Finding an ATM on the go is a common use for any of the mobile UIs and using the the device's location and position awareness, the web site can generate a list of nearby ATMs and include the distance and direction to them.
Selecting a location from the list, users can pull the address up in their preferred mapping application.
On a tablet, members can access their account(s) quickly from the home page by selecting the "Accounts" button, which, instead of loading a new page with a list of their accounts, activates a panel which slides left over the hero image, pushing the navigation buttons over to the left side of the UI.
This panel scrolls horizontally to reveal tiles for each account with basic information displayed for each. Selecting a tile expands it to reveal more detailed information and buttons for common specific account interactions.
Paying bills on the laptop UI can be done painlessly from the home page. Selecting the tab from the main navigation activates a panel which slides down over the hero image and contains tiles for all the bills which the user has set up to pay.
The due amount and date is displayed and the amount is pre-populated so the member can just press "pay" and confirm. There is also the ability to add a new bill into the system.
On a large touch panel, members can get live technical support where they can video chat and share screens with a Logix representative. This allows the support staff to visually guide the member in their use of the site.
Resize me, I’m responsive