Christine Danzi

• UX Work

Schmooz
Video Session App

Branding Exploration

Exploring different light and dark theme variations of the overall branding approach. In the end, the team liked the pomegranate direction.

Fine Tuning the Logo

Using the base pomegranate idea, iterated on different levels of detail and shape orientations. Eventually landed on the last two design iterations in the row below.

Accessibility Check

After landing on the logo shape, I wanted to verify the accessibility of the logo colors when used in different context (primary color used as background/text, secondary color used as background/text., etc. I wanted to find a balance between colors that could still relate to the pomegranate, but could still be used in an accessible way. Thankfully, there are also purple shades of pomegranates. The purple hues lended themselves to a better combination of accessible styles.

Final Logo

Based on the accessibility check above, landed on the final color scheme below. Just needed to be mindful that in certain contexts, we would need to use bold text styling to ensure the text/background combo was still accessible.

Info Page Exploration

The designs below, think through how to highlight the application as a marketing one pager on a website. The top designs were made prior to the color accessibility check exploration.

These next design iterations show the change from the original color scheme above, to the purple-green color scheme. Also wanted to take into account how the layout would appear on desktop vs mobile layouts.

Viewing Sessions

One of the core actions for the figure is to be able to view any current future sessions scheduled with a follower. Confirmed sessions show the winning bid while in progress sessions have an in progress state.

Analyzing Metrics

We also wanted to allow figures to view overall metrics related to the sessions that have been scheduled. The idea here was to provide a sample of metrics and gather feedback on the value that the provide for the user.

Building out Design System

As different screens were being built out, I realized I also needed to setup a reusable set of patterns and components that could be utilized throughout the different scenarios. This helped speed up the design process and allow for a consistent feel across the user flows.

Including Metrics

It's important to think through what metrics we'd want to track as we build out the core user flows. This would help us understand the best areas to focus for improvement and for roadmap planning.

User Engagement Metrics

Usability Metrics

Business Impact

Takeaways

This was was a great mobile first project to work on outside of my normal job responsibilities (which were mostly desktop designs at the time). It allowed me to think about how to fit content within smaller screen widths without sacrificing functionality. It was also a fun exercise in thinking about branding at a high level and carrying that branding throughout an application.

• UX Work

Mentorship Program Application

User Flow

As user enter the core Mentorship site, they will be presented with an overview of the program and a call to action to sign up. Different forms will be displayed depending on what the user chooses to sign up as: A protégé, a mentor, or both.

Wireframes

At a high level, I wanted to think through how to present core program information to the user while also allowing them to sign up and see the status of their assigned match.

Due to how the existing environment (that this application would live in) was already configured, I had to adjust how we ended up showing some of the information. Ultimately, the user would have a core landing page to review program information and then they would be redirected to their dashboard after signing up.

The New Experience

Signing Up
Now users land on a Mentorship Program dashboard and get an overview of what the program is about. They can sign up right afterwards without having to reference different documents/keep track of different links!

Selecting Mentors
Right after signing up, proteges can view the list of available mentors without having to scroll through a slide deck. Makes it easier to see multiple mentors as once without needing to open up multiple tabs or find the separate sing up form.

Managing Matches
As an admin, I can now manage the mentorship timeline and see requests right in the dashboard. No more need for a separate google sheet to track requests.

Takeaways

Going through a typical user flow and having prior user experiences as evidence allowed me to plan out what we needed in the mentorship dashboard. Even after the first round of designs, having real participants go through the flow again was valuable for future improvements. In the end, signing up to be a mentor or protege is a lot easier, and I have less documents to keep track of.

• Back

Document Extraction

Research

Conducted usability tests with different end users. Asked them to go through different document extraction scenarios: Gave them an invoice and asked them how they would extract certain data from the form.Findings

Designs

Since users were unaware how to interact with the document extraction form, we decided to provide instructional guidance at the top of the screen. When running another round of usability tests, users read the instructions right away and followed along. They were no longer typing in data manually but actually interacting with the form capabilities to extract data faster and more efficiently.

The next improvement was the copy and paste feature. Above you'll notice that when data is highlighted, arrows appear to the right of the input fields. During initial testing, users were missing this, so instead of keeping the paste functionality hidden, we added arrows inline with the fields. That way, they were already visible as users interacted with the form data.

Upon selecting data in the document, fields that matched the data type should light up to indicate that clicking the arrow will automatically paste that value in the field. So much easier than manually types or having to click and drag to copy values from the document.

Takeaways

Giving users actual documents/scenarios is important to see how they will interact in their actual jobs. Sometimes it's better to give directions up front than assuming users will explore the functionality on their own.

• UX Work

RPA Designer
Redesign

The Team

I was the lead designer for the redesign effort. I collaborated with the PO/PM to discuss priorities and incremental changes to the designer. We wanted to ensure that there was parity with our existing designers. I would conduct UX reviews of in-progress tickets and provide implementation support alongside our developers.

Before

Configuring an RPA Task took a lot of clicks to drill into each task and configure each node. Connecting nodes to each other was not very obvious. For additional context, this designer experience was inherited from an RPA company that was acquired in 2020 (Novayre Solutions SL). It was my job to ensure design consistency with the rest of the Appian product.

Personas

It's important to step back and understand the type of user we are designing for. Even when improving upon an existing design experience.

Research

A general survey was sent out to get a sense of how much experience our Appian developers already had with using RPA tools, specifically Appian RPA. I also conducted usability tests to figure out existing pain points with the RPA Designer to target areas of improvement.
Some key areas after the Affinity Mapping exercise were: process variable creation, workflow design experience (starting workflow, linking nodes, multi-action configurations, etc.) We could use these pain points as a way to focus what ways we could improve the design experience.

Takeaways

While working on the various design iterations, I was able to collaborate with another senior designer. Being able to just run through different ideas and brainstorm approaches was a great way to come up with a lot of ideas in a shorter amount of time. There's a great deal of benefit from collaborating with other designers to come up with a great end product.

Fun Fact: I was given an Impact Award for the work I did for this initiative.

• UX Work

Process HQ
Environment

General Timeline

Prior to Q1 of 2023, I had been one of two senior designers on the Process HQ Beta team - building out the first process HQ experience for Beta customers to provide feedback. Starting in Q1 of 2023, we began planning ways to productize the tool. It would be my job to oversee the design direction and design consistency across the Process HQ teams involved in this multi-quarter effort.

The Team

Alpha Pod

I was one of the core designers on the alpha pod. We had to iterate and design quickly to create a working fully working application in a short timeframe. The other designer and I had daily syncs with each other and the PO and PM in order to get feedback fast and make changes accordingly. In some cases, we made our designs in SAIL to speed up development.

Productization Teams

Once we proved out the vision with an initial working solution, we expanded the effort to work on productizing the Process HQ environment. I worked across multiple teams and timezones (US and Germany) to think through design strategy and provide assistance where needed.

Personas

To ensure we had a cohesive story to tell, we also needed to be aligned on our key personas across this new environment:

Areas of Focus

As I worked across teams and conducted UX reviews of junior designers, I also had a core area of focus:
Ensure design consistency for Process HQ environmentAs a result, I worked on certain resources such as a design guideline doc as well and working on a vision for the environment landing page. The goal of the landing page would be to highlight the two core areas of the environment: Process Insights and Data Fabric InsightsYou can see more about my general approach for the landing page below:

Inspiration

I first wanted to look at core patterns across landing pages and specifically wanted to get a feel for dark theme landing pages. For context, the rest of the Appian product has always been in a light theme, and it was part of my job to provide guidance on how this new environment would be styled in a dark theme manner.

Environment Core Concepts

Before diving into what the landing page would look like, it was important to remind myself of the other key pages of the environment and how each core concept should tie back into the home page.

Initial wireframes revolved around a common side pane with a contents section that showcased the core object of that tab. You'll notice even the name of the environment was still being determined (Self Service Analytics vs Process HQ). A collaboration with leadership and marketing was required.

Alternatively for each core page, we could make recent objects easily accessible and allow users to filter/views specific objects based on what they were looking for. We'd need to consider what core action would need to be visible on each page.

Essentially, users would be able to analyze process and record data, and we wanted to promote those core pieces of functionality on the landing page.

Design Iterations

I went through a number of design explorations, playing around with key action location, background styling, and object card styling.

Usage Impact Testimonials

Takeaways

Working across multi teams is a lot of work - at any given day for any given decision, you can have a lot of cooks in the kitchen. It's important to agree upon your key principles and goals so that you can make decisions quickly. As a UX team, we also learned the value of UX reviews within the development cycle and across squads. With the right amount of communication, you can catch design inconsistencies early to ensure that the experience across team features is cohesive.

• Back

Video Session App

Research

Before designer, I interviewed squad coaches, product managers, and designers to discover what functionality they were looking for. Not surprising, each user had different needs, so the main goal was to try to find the typical use cases and allow the sprint map to support those cases.Since there are plenty of existing sprint maps and planning boards out there, I also looked to those as references (JIRA, Trello, etc.) It was interesting to see how data was represented and what editing capabilities are provided.

Design Iterations

First design utilized our card components. Unfortunately due to the limited text functionality at the time, I couldn't truncate the text and instead we ended up with text wrapping. We would have to add custom logic to truncate the text after a certain amount of characters. This first idea focused on showing the planned features across a period of time.

When selecting one of the cards, users would be shown details about that feature and could edit the information from the side panel. The con of this was that it further squished the data on the left.

The next iteration focused on an editable view where we focused on inline editing for that goal. We wanted to have an easy way to read the features across the page and take advantage of the typical wide screens this will be viewed on.

Later, we added the ability to move and add on different feature lines so that users didn't have to reorder if they added features at the end of the list.

The final read-only view incorporated smaller bar images so that we could fit more information on the page. We also moved the text above the bars to reduce text wrapping.

This is one of the final iterations of that first design. Here we are in the edit view where you can edit multiple features at once.

Takeaways

When designing something where different users have different needs, it's important to focus on the main paths for the main users. You can't please everyone, but you can try to make the common actions easy (at least for the MVP) and then later you can work toward future enhancements.