Marisa Gjurgevich

Product + User Experience Design

Berkshires-based, currently at Privy leading end to end design for 1-3 product teams focused on building marketing tools for SMBs (B2C) on Shopify and other ecomm platforms.

Design is my ideal way to explore, create, solve, and do good.

Click on images to enlarge

Background

1,500+ customers used an outside agency's "premium shortcode"--snippets of CSS and JS--that added styles to their Placester sites.

The problem

Short-code themes suffer from a number of fundamental problems that produce customer frustration, support volume, and contribute to churn:
- development was not in a controlled environment, making them very fragile to code changes and hard to support
- visual designs that didn't meet a "premium" value proposition
- poor responsive design
- Placester is a "do it yourself" website platform and many of the front end settings simply weren't available, decreasing the amount of customization

Examples of premium shortcodes on mobile (l-r: Newbury, Wilshire, and Beacon)

The Solution

Transition shortcode styles to "motifs", CSS and JS that's layered on top of a base framework and creates new themes in a supported development environment.

Timeline

My role

- Refresh designs -- not a total redesign but updating existing shortcodes to look cleaner and stand up to users' varying wants and needs
- Create style guides for 3 themes
- Review user flows, account for use cases missed by shortcodes and create designs and engineering requirements for that work
- Collect and implement feedback from users' and internal stakeholders
- Review styles while in development and work with engineers to get each new theme 'pixel perfect'

Design Goals

- Provide users with beautiful websites that inspire their clients and encourage them to use their site and services
- Allow customization but provide options that help users make good decisions
- Accommodate frequent user requests: headshot in header, larger logo, logo on mobile, more color options, a site without listings
- Address usability issues: hard to read text over images, font sizes, colors
- Consistency: colors, fonts, margins, alignment, and hover states
- Completely redesign mobile interface to improve the experience for 50+% of users' site traffic

Process

- Because I was starting with designs that were already in development (and did not have source design files), I started by adjusting CSS in the browser/inspect. Handoff to engineering was a combination of css styles from inspect, annotated mocks (made from a combination of screenshots and in Sketch), and spreadsheets with detailed direction.
- There was a lot of collaboration between me, engineering, and the product manager, and a lot of trial and error to ensure that we accounted for all possible use cases, configurable in site settings (there are a lot).

Implementation

Updated styles for 3 themes that can be applied to the same base html and allows full native support in Placester Platform Site Settings:- Ability to switch between themes seamlessly and provide clear warning message to users with shortcode
- Customizable "Featured Content" section (previously hard coded by outside agency) - allows users to link to any page on or outside their site, upload an image, add a title and a description. Once we opened up options on the backend, how to display an excerpt and when to cut off title text added new design decisions to the front end.

Click on images to enlarge

Background

"Saved Search" emails send notifications with new listings that match an end user’s (client) search criteria (zipcode, price range, purchase type, etc) and are an important way for users (agents) to develop and maintain contact with clients.It was possible for a client to create a search and trigger these notifications through an agent's site, but agents weren't able to do the same for their client/end user on the backend (Placester platform).

Identifying the Problem

The ability to create a saved search was a frequently requested feature, but adoption would be low without any improvement to the functionality and design of client facing emails.Most users didn’t know that they could see a client’s saved search (if one was created on their site).

(Click on images to enlarge)

Example email and the “Lead Detail Page.” Does the email look trustworthy? Can you identify where saved searches are on the detail page?

Research

User interviews validated that saved searches are an important feature:
- Generally, they’re first thing that a buyers or renters agents will set up for a client to start sharing homes and stay top of mind
- Using their website is better than setting up a search through the MLS (Multiple Listing Service) because it's more personal
- They want the email to trigger an action from the client: call/email them about a property, visit site, conduct another search

Before beginning designs, I signed up for a number of saved search emails. I also reviewed best practices for html templates; specifically, responsiveness, fonts, and image size.

Design Considerations

With any project, as I begin designing, I keep a list of any questions that came up during my research and cover my assumptions and answers with users, product, customer support, and/or engineering colleagues:
- Can we match the template design a users' themes? (out of scope)
- Is there any additional listing data to pull? (open houses, in the future)
- Does showing more listings do anything for the user? (users want the end user to see fewer listings, but enough to pique interest and contact)
- Platform considerations: where does the logo come from? Where does the agent’s information get pulled from? (specific to site)
- What is the default signature? (update to something generic for all)

I then came up with 8 variations, adjusting: width, the number of columns, text placement, branding, image size, number of listings per email, and CTA text.

Preference Test

After getting internal feedback (product, sales, success), I created a preference test with the 4 strongest options + a plain text email to send to Placester Labs members, users that have agreed to participate in regular testing.

Results and Feedback

There was a clear choice votes wise, but it was important for me to review all of the comments and ensure that we captured meaningful feedback in the final design.
- "My info at the top, big pictures of all the listings"
- "Larger images, reason for the email is defined at the top, agent image at the top allows client to recognize their agent"
- "Big photos while still giving a little intro paragraph and property details."
- Surprises: "I like "view all" which implies there could be a lot more - and would make them want to click (rather than 'view 2 more')"Agent information at the top, greeting first, and large images had the most amount of feedback, which was in line with the top choice (2nd from the left above).

Overall Improvements to Email

- Personal branding in the header: user's logo, photo, phone and email
- Larger images
- A more generic message that works whether or not the user includes a personal note
- Better listings: only accounting for new listings vs. repeating old, over and over again
- Clearer CTAS to 1) view a listing 2) view all results based on their search criteria 3) edit saved searches on the agent's site 4) unsubscribe from all of the agent's emails.
- Edit and unsubscribe links were treated with clearer visual hierarchy

Future Considerations

- More testing with the end user: we received and used feedback from users, but it would been interesting to conduct a similar preference test with end users and compare the results.
- Better data: before the project started, we reviewed metrics around deliverability and open rates, and addressed known issues (ex: emails now consistently display agent/user name and email in the from field), but we should also compare open and click rates for the updated template (and potentially iterate accordingly).
- Expand template options: ideally, we could offer templates based on a user's theme and color selection, but, at the very least, we should have two different offerings that better handle light and dark logos.

So, how do we create and send this thing?

On the Placester Platform, there are generally 2 sides to every new feature to consider: the user and the end user. In this case, the end user could already save a search on a user's site (which triggers the email).We needed a way for the user to create a search for user's on the "backend" of their site (the Placester platform). At the time, a small group of users had access to the feature but didn't know they had it.Opening up the feature to more users as it was wouldn't have been very effective. Without making dramatic changes to the existing flow, I was tasked with improving the entry point to creating a search.

After conducting a few quick usability tests, it was clear that the current layout of the lead detail page needed to change and that saved searches should be more prominent.I worked with product to include this feedback in the requirements.

Design Iterations

- The first faced issues found in the previous design--is it a button? Is it the status?
- On the second, increasing the number of buttons didn't make anything clearer.
- The third version combined the previous two, but still felt cluttered and didn't help users find save searches any more easily (unless one had already been created).

Moving from a Page to a Pane, to a Pane to a Pane

- The existing flow required users to first view saved searches, with the next screen showing the ability to add. The fundamental problem with this flow was that a user couldn't add a saved search unless the end user had already created one on a user's site.
- The secondary problem was that view wasn't immediately available on the page and required opening a new pane. View and add added extra clicks and a shift in context.
- Moving the lead detail page to a pane with a tab for searches and a button for add allowed users to view and add from the same point.

Improvements made in the design process

- Moved the lead detail page to a pane that opened over the lead index.
- Added a tab in the lead detail pane, where users can view, edit, and save a new search.
- The 'add saved search' button was made more obvious on lead detail pane with fewer clicks (previously, the flow was to first view and then add).
- Frequently used saved search criteria (based on data from all users' previously created searches) display by default upon add--with additional filters still available if needed.

Requirements

- No substantial design changes, work within the existing layout.
- On the lead detail page, the current Saved Search index must be moved from its slideover, into a new tab on the Contact/Lead details page, inline with other tabs "Tasks", "Plans", etc
- Clicking the "+" button to add a new Saved Search must trigger the Searches view
- On successfully creating a new Saved Search, or dismissing the New Saved Search slideover, users must land back on the Contact/Leads detail page with the Saved Search tab active.
- When a user clicks the "view" link from "Saved Searches: N view" within the header portion of the Contact Lead Details, the Saved Search tab must be activated.
- On searches/add, users must be able to attach a site, from a select list of all their sites, to each new saved search created
- The default site selected will be determined by: Does this lead have a Source that's a site? Use that. Otherwise, default to the first site in the user's site collection
- Only expose sites that have approved MLS's

Click on image to enlarge

Background

Redesigning what was known as "Leads" was the first phase in an effort to introduce a number of new features and design patterns that created new and/or simplified existing frequent users actions in order to:
- level up with competitive real estate CRMs
- increase adoption and product value, & decrease churn among existing customers.

The Challenge

A good CRM should enhance client management, but our "Leads" app was essentially a mediocre table that showed only 10 clients per page and didn't clearly display relevant information or actions without scrolling or multiple clicks.In order to improve usability and adoption, a complete redesign was needed.

Process

The project started with designers--me and 2 others--coming up with a list of recommended components (by Kendo - a library decided on by engineering) to use for a new leads page layout.We knew that this page, at the very least, would have an affect on any other new features introduced, and hoped that it would help define them.To start, we tried not to solely focus on the obvious design flaws of the existing leads index, but to really consider what users went to that page for, as well as understand why they didn't go and what what they wanted to do.At this point, there weren't a lot of meaningful actions that you could take:
- View 10 leads
- See where your leads came from
- Sort leads by the date they were created
- Delete
- Filter on 4 categories
- Search

Approach

To validate our initial assumptions we began research:- Surveyed users to determine which columns were most important and to get input on ordering
- Conducted interviews to gain a better understanding of the actions users' take with each new contact/lead, the details that are most important to quickly view, and insights into their daily workflows.

Initial list of requirements

1. Virtualization of local data (infinite scroll)
2. Remove or move reporting to top of leads table and create a simpler view
3. Make the table wider and responsive with column reordering and freezing
4. Move the nav to left side (my leads, groups, tasks and activities)
5. Batch editing and quick add (inline)
6. Filtering - filter in columns with checkboxes
7. Sorting
8. Update the action bar - remove trash as first CTA in row, filter in line, breakout items behind 'actions' and 'more'
10. (Nice to have) - column resizing

Iterations

- Once we had a view variations of the navigation and grid , we ran a user preference test to gather visual design feedback on navigation and layout

Background

Armed with data from user interviews and surveys, the UX team (myself and 3 others) led a collaborative workshop to help us distill the data and develop viable personas.

Process

We held 2 half day sessions and worked in teams of 5-6, which each included a member of UX, marketing, product, sales, customer success, support, and engineering.Each team had a portion of interview and survey excerpts to use for affinity diagramming. Teams were responsible for coming up with 6-9 key attributes.We covered each team's attributes as an entire group and discussed the key trends. Before the second day, a small group decided on focal points for the personas and created an outline for teams to use the next day.Teams then dug deeper into the attributes and used interview data and their first hand experience with customers to fully develop a persona.The results were a fun and useful way for the company to build empathy for our users. They were also a helpful tool for design to use to go more in depth and validate findings.