UX Audit of Guest Management Service: A Project Deep Dive

I evaluated a guest management platform using personas, a competitive analysis, and a heuristic evaluation.

Summary

Over the course of several weeks, I completed a UX audit of a guest management platform including personas, competitive evaluation, and heuristic evaluation. The research revealed an internal user base, many usability issues, and a number of competitive features to consider for future redesigns.

DOOR3 had their own presentation templates, which I followed for each of these deliverables.

  • Role: Freelance Product Designer
  • Firm: DOOR3 Business Solutions
  • Design Tools: G Suite
  • Tasks: Personas, Competitive Research, Heuristic Evaluation
My portfolio includes a quick overview of DOOR3: alliwalk.com/ux/guest-audit/

Note: DOOR3 had their own UX/presentation templates, which I followed for each of these deliverables.


I. Personas

Personas are used by design teams to create representations of end-users that can help ground the design team in the realistic capabilities and expectations of users. I conducted interviews with the client, to learn more about their users and develop personas.

Introduction

The template for DOOR3 organized personas by the following:

  • Characteristics: What do we know about them?
  • Goals: What are they trying to achieve by using our product or service
  • Questions: What are some of the common questions they have while using our product?

Personas were then separated into Internal Actors and External Actors.

Client Interviews

In order to answer these questions, I set up an interview with one of their lead client services managers and a product manager. I also read job descriptions for some of clients they worked with, such as an event manager or director of development. Using this information, I created six personas, which the client reviewed and validated.

3 Key Learnings

I learned three key pieces of information that affected the user experience:

Roles & Permissions Restricted Functionality: User roles and permissions was a core aspect of the user experience. Many functions required could only be accessed if permission was granted by admins.

Internal Core User Group: Most end users were internal members of the client services team; many did not have admin access. Only a small minority of users were actual customers. Of those, only a rare few had accessed the site independently. There were no plans to add user registration so that new customers could sign up on their own.

Extensive Training Required: I learned that the platform required a significant amount of training before users could became sufficiently productive. The reasons for this became clear during the heuristic evaluation.

 


II. Competitive Evaluation

The competitive evaluation or analysis is a common stage in product design. I identified at least 20 competitors and related industries, to gain knowledge of industry conventions and identify potentially useful features.

3 Tiers of Competition

To locate competitors, I reviewed Capterra and Software Suggest, and included obvious choices such as Eventbrite and Splashthat. I included a few I’d learned of during the interviews. Competitors were organized into 3 tiers of competition: direct, secondary, tertiary.

Direct Competitors

I identified 10 and evaluated 4: PlanningPod, EventSquid, Eventbrite, Envoy Visitors. I reviewed all competitors, but included examples from these four in more detail.

Screenshot of Planning Pod website
Planning Pod, a direct competitor, has a robust set of features focused on event and guest management.

Secondary Competitors

Offered the same functionality but specialized in specific types of events, like weddings or travel. I identified 2 and evaluated 1: TripIt.

TripIt Screenshot
TripIt specializes in helping their users keep track of travel itinerary. The client’s owner said he was a user of TripIt.

Tertiary competitors

Represented tools or industries that the users encountered frequently as a part of their work, such as airline websites or industry news. I identified 7 options and evaluated 4: SendGrid, BeeFree, Flight Stats, BizBash. These services specialized in only certain features and I wanted to review the functionality they did well.

Screenshot of BeeFree (BEE).
BeeFree (BEE) has services related to email marketing. I reviewed this tool because it was mentioned by the client. I was impressed by the cute animations and whimsical email character throughout the site.

 

4 Categories of Findings

Findings were organized into 4 categories, based on functionality or features users would be likely to find important. Examples are below:

Competitive Overall Features — integrations with third-party apps and services, (e.g., MailChimp, GoldStar, Zapier, etc); branded user profiles

Platform-Specific Features — ability to create and share a favorites list or vision board; easy access to help or reference guide

Design and Information Architecture — high-contrast between foreground and background colors; strong global and sub-task navigation

Additional Event Capabilities — real-time RFID event tracking; ability to preview and export name badges


III. Heuristic Evaluation

The bulk of my time was spent on the heuristic evaluation. In a heuristic evaluation, a UX expert uses an established guideline to identify potential usability issues.

A large number of issues were revealed during the heuristic evaluation. While many were not critical, the cumulative amount was a concern.

Method: 10 Usability Heuristics

DOOR3’s template only referenced Jakob Nielsen’s 10 Usability Heuristics for User Interface Design, which I used. I also included principles from Bruce Tognazzini’s, First Principles of Interaction Design.

Over 70 Usability Issues Identified

I identified over 70 usability issues, from their main platform as well as their public website. For each usability issue, I included a suggested recommendation on how to fix it. I also included an appendix with additional UX references on typography, accessibility, and navigation.

Many of the main issues had to do with inconsistent use of UI elements, navigation, or labels, as well as accessibility issues like low contrast. There were also technical issues, cryptic error messages, and confusing workflows.


Presentation of Findings

I presented the evaluation so that the most important findings came first, then organized the rest of the findings by section such as groups or account tools.

Since their users were internal, I focused on the connection between usability issues and productivity — that is, a interface with a shorter learning curve would save money in training and overhead costs.

During my presentation to the client, they revealed that they were aware of many of the usability and design issues I identified, but they had been backlogged in favor of “hot fixes” due to many issues in the code.

Outcome: Prioritization

The DOOR3 team worked with the client to help identify all the issues with the platform — front-end, back-end, design, future features. The issues were then prioritized, so that they could be put into a backlog and managed over time.

The client continued working with DOOR3 on engineering updates and some design updates.


Thanks for visiting! Feel free to read my latest blog post, or if you came from my portfolio head back there.

e-Commerce Shipping Update: A Project Deep Dive

An in-depth look into an e-commerce update for an electronics retailer. The update focused on improving the international shopping experience by clarifying shipping information.

Summary

By conducting UX research on competitors and examining the shopping journey, I made a number of recommended changes to improve the user experience for international customers.

  • Role: UX/UI Design and UI Development
  • Design Tools: Sketch
  • Development IDE: Coda with HTML and CSS
My portfolio includes a quick overview of Adorama: alliwalk.com/ux/adorama/

Problem: Unhappy Customers

Adorama regularly shipped internationally, but many international customers were unhappy when they received their items.

The short answer is the site was not providing enough information about the fees associated with international shipping, leading to unhappy and expensive surprises.

The business owners had only requested a change to the checkout page, which they felt would solve the problem. However, in order to provide the best user experience, I explored the shopping journey, from PDP to checkout, to find out where improvements could be made.


 1. Research & Findings

I researched at least 30 websites to find out how other companies handled international and domestic shipping. I discovered that Adorama was solving a unique problem.

Many online shopping sites do not offer international shipping, even to Canada. Of those that do, the vast majority provide a localized shopping experience, where product prices are displayed in the local currency and shipping destinations are restricted to a single country.

I also discovered that many companies will also not allow customers to associate a US billing address with a Canadian shipping address, or vice-versa. They must both be Canadian (or American).


Shipping and Localization Examples

Sephora, Overstock, Nordstrom, B&H, JCPenny

 

List of E-commerce sites reviewed:

OfficeDepot, IKEA, Sephora, Target, Overstock, REI, Williams Sonoma, Michaels, Sears, HomeGoods (doesn’t ship), Shop.com, QVC, Macys, Nordstrom, Zappos, JCrew, JC Penny, GameStop, ebay, NewEgg, BestBuy, Walmart, Cars.com (no CAN), plus competitors (Abe’s of Maine, Keh, B&H, RitzCamera, MPB, Samys, and BuyDig).

Conclusion

Adorama offered a unique, non-localized, multi-currency, and cross-country international shopping experience. Given the complexity of the problem, I felt a more comprehensive solution was more appropriate.


2. Design Patterns

Although I was solving a unique problem, I did uncover a few patterns that could be used on Adorama’s website:

A. Supportive Help Pages

For most sites, the best place to look for shipping information was in the help pages, but Adorama’s help pages did not include all information about international shipping.

In fact, while most international customers would only be able to select FedEx International Shipping, the help pages did not include any information about this shipping method.

Screen shot of international shipping information on Adorama website
No FedEx shipping information on Adorama’s help pages.

B. Easy to Access Shipping Information

Competitors included shipping information well before checkout. For instance, Nordstrom advertises its shipping information in the header on the homepage.

Nordstrom homepage features a link to shipping details in the header.

C. Provide Clear & Obvious International Shipping Information

For some websites, the international shipping rates were available when viewing the cart. JC Penney (pictured), Nordstrom and Adorama competitor, B&H (pictured), were good at this.

JC Penney does a good job explaining the choices between international shipping options.
B&H clearly explains the differences in international shipping fees.


3. Recommendations for User Workflow and Wireframes

After all the research and collecting design patterns, I started clarifying the user workflow and the wireframes, focusing on international shoppers. The workflow would flow in the following order:

Help Pages

First the help pages, accessible via the footer, would need to be updated to include new language about FedEx International Shipping. This task was sent to the business owners to complete and finalize.

Product Pages (Wireframes presented)

The next place customers would learn about shipping is on the product pages.  The recommended product page features improved language and tooltips, as well as an updated shipping information section.

Cart and Checkout (Screenshots presented)

The final place for customers to learn about shipping fees.  The recommended changes for the cart and checkout pages would include clarified shipping information, as well as an updated tooltip.


UI Development & Next Steps

As a dual UX designer and UI developer, it was up to me to begin the implementation of changes to the cart and checkout pages.

As of April 2018, only changes to the cart and checkout pages have been implemented. Additional development work will be created in May, or possibly June, for the product page modals.

 


Thanks for visiting! Feel free to read my latest blog post, or if you came from my portfolio head back there.

Event: UX Camp 2017, New York City

On June 24th, I attended a one-day “unconference”, called UX Camp. I heard about this through Meetup/email. I’m not sure what I expected, but I did hope for more hands-on workshops.

Sessions Attended:

Dance as cultural exchange

Using Dance for Cultural Exchange: This was presented by Ana Milena Aguilar-Hauke. I thought it was really smart and innovative, but only 2 people showed up to learn about this which is a shame. We could use more cross-cultural exchange these days. Her idea came from her experience living in Germany and the United States from the perspective of someone of Colombian descent. Her idea was to use salsa, which is a fun, easy to learn dance, to might help people interact with each other.

You can read more about this project on her website.

Kanban discussion list

Independent UX (More of a pow-wow/thought exchange): Helpful, especially for people who are managing their own work as an independent or seeking to. We used voting and Kanban boards, which I hadn’t heard of before, to go through ideas. I got that recruiters really take away your ability to earn more money because they’re skimming off the top. And, I learned that other UX professionals are experiencing the same portfolio headaches that I am.

I’ve since become interested in learning more about Lean and Kanban, which I’ll talk about in an upcoming post.

Some of the work we were doing for the design sprint workshop.

Tips on Design Sprints: I kind of wish I’d skipped this because, apparently, a really great talk that confirmed many of my job hunting suspicions was going on that I missed and probably would have enjoyed. But on the other hand, it was a hands-on activity like I wanted and it gave me new ideas to think about.

Agile to Tri-Track: This was presented by Dave Malouf. I wanted to learn more about Agile. I figured “tri-track” was an improvement…? I am still not quite sure what this was about.

Systems Thinking: I went because I wanted to learn about systems thinking. It sounded like an interesting discussion. It wasn’t quite what I’d hoped, but maybe he will improve it later.

Portfolio Discussion: This was helpful and vindicated some of the concepts I’ve been thinking and writing about when it comes to what UX managers look for (or don’t look for) when reviewing portfolios. My strategy now is to include information about an unexpected challenge I experienced and what I learned on the job.

 


All Photos

Web/Portfolio Update – Part 2: Performance

Currently finished with the 90% of the HTML/CSS of my website. I found this great free photograph to use in the main image section of the site. (Looks so classy.) I need to post some of the portfolio image alternatives I came up, but decided not to use.

This post is all about site performance optimization, what I did and what I learned. (That big, fat, red F in my cover image is explained below!)

Getting Started
I wasn’t initially set on improving the performance of my site. (It’s only 1 page.) But, remembering all my lessons on Treehouse, I decided to minify some files anyway, like a pro. For CSS minification, here’s a nice simple site for that: cssminifier.com. This site also has a js minifier and image optimizers. In addition to working on my style.css file, I went through and deleted unnecessary classes for my font-awesome css file, and minified the CSS, since I only needed about 12 icons. (I’ve since added a few back.) I also minified the smoothscroll.js file, which gives my site that, you know, smooth scroll effect. It’s a pretty short file, but it doesn’t hurt.

Before I used cssminifier.com, I also took it through a clean CSS filter on http://www.website-performance.org/ to prettify* my style.CSS file before minifying it. While I was there, I also decided check out the site performance. Ouch! Some big issues, especially with compressing images, including my new classy photo. This is where I got started on improving site performance.

Optimizing Files
Two big problems were too many CSS calls and images that were not optimized. I realized that I needed to link to some CDNs to reduce CSS calls. Instead of including the jQuery.js, Bootstrap.js, and Bootstrap CSS files, I’m now linking to the the files via CDN. I tried using one of the above websites to optimize my images, and also convert some of them to PNGs, but the server couldn’t handle it. So I used good, old Photoshop.

“Gzip Compression”
I did not know what this term meant, but I got an F from a few site performance websites. GTMetrix explains that using a compressed, zip, file will save a lot of space. But it’s up to the browser to decide which file to use. GTMetrix and Website-Performance.org both suggested compressing my styles.ccs, bootstrap.css, and font-awesome.min.css files. Well, since I’m going to be using a CDN for the Bootstrap and jQuery files, I’m not too concerned about those. But I did continue as it advised for the relevant files.

Having done all this, I am happy my site loads fast, especially on mobile. And a learned a lot, not just from these websites, but also about the tools I used to complete them. For instance, Cyberduck, an FTP-transfer client doesn’t show .htaccess files, but Filezilla does.

screenshot of checklist of full site optimization recommendationsAnnoyances
The sites were a little pedantic about image compression, and they would complain about the need to compress images another 1-4% or so. Since I’m using a portfolio site, it’s not really that important to me to try to squeeze every last unnecessary pixel out of my images, especially since most of them aren’t visible when the page loads. The only one I might consider continue to optimize is the main hero image, because it’s the first one you see.

The optimization sites also pointed about how long it takes for an embedded Vimeo link to load. This is also not a concern for me, because the video is only visible in a pop-up. And the sites also dinged all my embedded CSS files and image files because they were not coming a CDN. I looked into the option of uploading them into a CDN, but abandoned that idea. (I think it might have required a payment, and per my previous entry, that was not going to work for me.)

Summary
For my next project, I’ll start with this site first, because it lists out everything that’s slowing down a site, such as a missing .htaccess file — or I may use it to improve the performance of my other project sites. The nice thing about the results it provides is that it’s very helpful for organizing tasks and working systematically through the performance optimization process.


* Yes, prettify is word!