Parship purchased eharmony in November 2018 and planned to migrate eharmony onto their platform with very few updates to the existing platform, beyond restyling the site to reflect eharmony’s branding.

My involvement with the project began with an email requesting my feedback on Parship’s proposed prototype. I completed an initial heuristic and competitive analysis and responded with questions, suggested updates, and recommended UX and UI improvements. This emphasized the need for usability testing in the United States, which I designed and moderated. The final reports I submitted included a full write-up of the usability test results and my recommendations for UX and UI improvements. Parship is still in the process of developing and shipping these updates.

---

My Role

Product Designer and UX Researcher

Tools

Sketch, Word, Excel, Adobe Illustrator and Acrobat, QuickTime

Challenges

Parship is an online dating site based in Germany and primarily in use there and in neighboring European countries. Their dating website was not tested on audiences in the United States, the interface did not appear to have been updated recently, and was not being translated into plain, conversational English. Parship planned to launch the “new” eharmony with minimal copy improvements and no UX/UI updates by November 2019.

In April 2019 the designers at Parship emailed a prototype which had not been tested and had many UX and UI issues. The issues included, but were not limited to, off-brand colors, unintuitive icons and user flows, superfluous features, which added to the visual clutter and page length, excessive copy, long descriptions and CTA labels, and more.

Solution

To conduct US-based participant usability testing and then recommend UX and UI improvements based on the initial prototype analyses and final results of the usability testing.

Project Goals

• Convey the importance of improving the overall user experience, how it can retain customers and also gain new users
• Modernize the overall UX/UI of the site
• Simplify and reduce the amount of text in order to improve understandability
• Increase consistency and usability of work flows and designs

---

How I did the Research

Process

Usability Testing

Employee testing
Parship showed interest in my initial heuristic and competitive analyses and requested I proceed with user testing on their existing prototype. As the site’s copy still hadn’t been translated into easily understandable English, I suggested that we break up the testing into two stages.

Stage one would focus on the most important workflow and visual design issues and would only involve testing employees. Parship agreed and I proceeded to select five employees who were not on the tech team, were familiar with competing online dating sites, and who were all frequent mobile device users.

Paid Participant testing
Stage 2 was conducted with paid participants on the dev site, per Parship’s request as user acceptance testing had begun on the dev site. This posed some difficulties with the paid-participant round of testing as the dev site did not include many of the updates that had been included in the last iterations. Due to the limited amount of time available for this round of testing, I was not able to fully test new issues discovered in the dev site. I then submitted my final reports with additional recommendations for UX and UI improvements and copy updates, including new issues where I could.

My reports included:

• Testing Specifications
• Employee backgrounds
• Results of usability testing
• Results of a subjective, post-testing survey
• Recommended UX/UI improvements

Usability test results included task completion rate evaluation with time on task, the error-free rate percentage, the details of errors, whether they were critical or non-critical, and included participant commentary for reference. UX/UI recommendations included mockups of visual and interface designs showing changes to user flows, iconography and copy.

---

What I Learned and Designed

After reviewing the initial prototype and completing the usability testing, I submitted several reports which included my UX/UI recommended improvements. Below are three examples of those design recommendations.

Example #1 – All Matches and Edit Match Preferences Task Flow

Parship’s Original Prototype Screens

“All Matches” Issues and Improvements

UX/UI improvements

• Upsell banners
  • The upsell timer was relocated from just below the header to below the fold, between match thumbnails. The relocation was prompted by usability issues when the upsell became an obstacle to accessing the main navigation for a couple of the testers, it also added unnecessary clutter to the already busy page
  • Based on a competitive analysis and testers’ frustration, I minimized the number of upsell buttons on the Edit Match Preferences page, which were located above each “paid” filter. I relocated all “paid” filters to below a single upsell button so users could more easily:
    a) see that the filters after the upsell banner required an additional cost
    b) scan the filters available without scrolling over several identical upsell buttons
    c) find the one filter not requiring an upsell that was located below several paid filters
• Edit ‘Match Preferences’ workflow:
  • Editing match preferences took participants nearly 43 seconds on average to complete the task
  • Search Icon: Testers expected that the search icon would open a search field to enter specific profile names or keywords, so the majority of testers didn’t think to click on it to edit their match preferences. When a participant clicked on the search icon, the existing workflow took the user to below the list of ‘All Matches’ on the same page, which led to more confusion. In order to edit matches, the user then had to click on the ‘Edit Preferences’ button which finally took them to the Edit Match Preferences page.
  • In the mock-up below you can see my recommended improvements, which included changing the ‘edit match preferences’ filter icon, and on clicking it, the user would be taken directly to the Match Preferences page where the user could edit their preferences. The All Matches page would then be solely devoted to the list of matches

Recommended Improvement Mockup

Visual improvements

• Updated all colors to be consistent with eharmony’s branding
• Increased contrast between active and inactive states of both the main navigation icons and the tab labels
• Recolored the upsell timer and match filter upsell so that it matched eharmony’s colors
• On the Match Preferences page, the individual filters were redesigned to be consistent with one another
• Icon updates
  • Favorite star: The 5 points in the new design are now symmetrical; The gradient square with an asymmetrical star cut-out is now a solid/outlined shape with a solid color fill
  • NEW tag: added padding to be consistent with other icons on the Match thumbnails, reduced size and removed gradient which was inconsistent with brand colors
  • Filter icon: Replaced magnifying glass icon with the funnel icon to represent the matches filter

Example #2 – My Profile

Parship’s Original Prototype

‘Profile Page’ Recommended Improvements

Example #3 – Match Profile

Parship’s Original Prototype

For your reference, the animation below shows how a Match’s Profile page appeared in Parship’s original prototype. As you can see in the original prototype, there was a lot of text and very long sections, requiring the user to scroll and scroll.

Usability test participants commented on several issues related to the design of the match profile. These issues underscored several of the issues found in the initial heuristic analysis. Below includes those issues and others found in the initial analysis of the prototype:

• Page length
• Long sections of text
• Length, spacing, and styling of demographic information
• Confusing/unintuitive icons
• “Compatibility Score” graphic section, which appeared like an advertisement in the middle of the page, and impeded the user flow and wasn’t needed as there were two other ways to access the details of the Compatibility Score above the fold
• Redundant features and/or icons
• Visual styling that was hard to read

Recommended Improvements

---

What was the outcome?

Overall my reports were received pretty well by Parship’s Director of Product! He followed up with the below emails, where he describes the next steps and his impression of the work.

It seems that I was able to convey the importance of improving the US customers’ experience through the results of the usability testing!

Email Regarding Employee Testing Reports:

I just wanted to send you just a short note on the progress of the UX testing that Maile did…working with an external ux company would have been so much more complicated. We should definitely keep this going and use this process to constantly check our progress in product development, market fit and ui improvements.

I have read the results documentation for the first round of employee tests and there is a ton of valuable insights in there. It is A LOT of content, wow. We are working through all of the input now to understand the results and act on the most important findings. I think my team is in good sync with Maile on this. We are working to bring the future live system up to speed for the next iteration of the tests with users/prospects…

So you can expect a lot of changes that we will implement directly into the product (most or all of the text changes for example). Some of the findings we will try to implement before cutover, if time and resources allow. And some of the findings will be part of our future effort after the cutover to improve the product experience mid- and longterm alongside with a lot of projects in that area.

Email Regarding Paid Participant Reports: