Case study – Theming center

editoreditor


Time: March 2017 – August 2017

Project: Theming center

My role: Design lead

Responsibilities: User research, wireframing, customers validation, UI, iterations. 

Within existence of Help Center, we have identified the need to revisit our “Customize design” functionality. The lack of flexibility and functionality limitations kept appearing on our radar for a long time, so we decided to lean into data and understand the need.


We have reached out to a set of new Help Center customers at the time and asked them to fill out the short survey.
 

This survey helped us to identify our customer goals and first tasks when activating this product.

We have also looked into the product data warehouse which showed us that it takes around 103 days for our customers to launch their help centers. This is a significant amount of time and we wanted to make sure that number goes down.
 

reportreport

Another metric we have relied on was a number of custom themes our customers have based on the Support plan they were on. We have identified that around 42% of our Enterprise customers have custom themes. Meaning that they go put additional effort accessing templates and editing code.

 

Problem:

  1. How to create a tool that empowers developers to customize their Help Center templates easily using their own prefers tools?
  2. How do we empower our not technically savvy users to brand their help centers using the provided theme settings?

 

User testing

Target group:

We have identified two groups:

  • Non-technical – support managers, content managers
  • Technical – internal IT, Zendesk professional services, Zendesk partners

 

Competitive analysis:

Also, we have looked at the competition and tried to identify feature set with the product manager.

Screenshot 2017-10-29 16.07.12Screenshot 2017-10-29 16.07.12

Qualitative user research:

We have set a goal to talk to Zendesk partners, the most technically savvy target group that helps to develop themes for our customers. We have reached out to 6 Zendesk partners and had combined interviews together with engineers. These validations allowed the whole team to feel included and they also could associate with the problems our customers were experiencing. 

Theming center beta:

As this feature is currently being developed we are running a theming center beta, that allows to identify risks and to pinpoint unexpected bugs. This beta gives us an opportunity to talk to our customers after they have been using this feature within their Guide. We are still in the process of running this beta, with the goal of GA this feature in the end of November.

 

Screenshot 2017-10-29 16.55.11Screenshot 2017-10-29 16.55.11

User interface design

Brainstorming and wireframing

After initial problem discovery phase, we usually start projects with the design session. Here we try to tap into the ideas and knowledge from everyone, meaning engineers, product managers, and designers. 

 

meetng-raninstromingmeetng-raninstroming

After the design session that usually lasts for 1 – 2 days I gather all the ideas and try to categorize them, and scope them down to something feasible.

 

Wireframing allows me to put ideas quickly on paper and discuss them with my team and iterate fast on concepts. I always start a project using pen and paper.

 

Concept explorations

As with the every new design project I try to explore different directions and different versions of the user interface. I try to base these ideas on the sketches that I did before where I have explored the structure and the flow. 

 

With every step and every iteration, I try to identify the desired interactions and user experiences. These micro animations help me to communicate my ideas faster, and I can discuss them with engineers or product managers easier.

 

Screenshot 2017-10-29 16.43.54Screenshot 2017-10-29 16.43.54

Final designs

Theming center was a very interesting and exiting project, that allowed me to have a very close collaboration between engineers. Since our own engineers are part of the target group, they had a lot of insights on how features should behave. This created an interesting dynamic that empowered and inspired all team members in a unique way. 

 

As with every functionality that is an existing UI in the product, it is necessary to take care of the flow for migrating customers from one interface to another seamlessly. I have worked on the interface that allowed existing customers to migrate their themes with few easy clicks.

 

Design delivery

With every design handover to engineers, I try to structure my projects in a meaningful way. My goal is to empower engineers to work on feature development smoothly. I invite them to join my Invision project where I structure section per individual features. I try to cover and design for every micro-interaction that we have to refine during the planning meetings. 

 

 

Screenshot 2017-10-29 17.23.54Screenshot 2017-10-29 17.23.54

Outcome and learnings

This project is still under development, but we have been running an open beta for a few months now and we are planning to launch at the end of November. Some additional work will need to happen after we GA the feature. 
After we GA this feature we will need to monitor if the 103 days metric has decreased.

 

Learnings

  • Engineers are more open to design iterations and changes if they are involved in the user validation sessions
  • Looking at data points in advanced helps us to identify key metric easier
  • It is easier to work on the UI after identifying user flows with pen and paper