Crownpeak Website
Crownpeak is a website service that also provides clients to update pop-up notifications on their websites across the world. With so many new privacy laws such as GDPR and CCPA, organizations need to stay compliant and up to date with new privacy regulations. The problem they are facing is within their privacy tool, the template editor. It is outdated and very difficult for their customers to style and customize privacy notices for their websites. My role was mostly research but dipped into design when our team needed it. I also helped with usability testing and interviews with internal company staff. Through research, design jams, usability testing, and learning our own limits. At the end of this three-week sprint, my team of designers helped improve the company's decrease in support tickets and give new ideas to their existing design team.
Our Goal
Help customers have a better experience navigating their site.
Meet the Team
-
Christian Morantus
RESEARCHER / DESIGNER
-
Quentin Lee
DESIGNER
-
Sean Troup
DESIGNER
-
Max Freeborn
DESIGNER
Tools
Miro
Figma
Illustrator
Zoom
InDesign
Trello
Google Drive
Methods
User Interviews
SME Interviews
Persona Development
Journey Mapping
Design Studio
Sketching
Wireframes
Rapid Prototyping
Usability Testing
My Role
UX Research
Duration
3 Weeks
Research
Understanding the field.
At the research phase, we already hit a blocker. Which was, we were inexperienced in the legal aspect of privacy laws. We did not know that their problem stretched across multiple countries, also the language around that was new to us. In short, we were overwhelmed, but it did not discourage us. So, we took some time to research what we were confused about.
Whom are we focusing on?
So, we focused on what everyone could be able to do, build a website or create something. We wanted to gauge peoples' level of experience in using/creating on a computer, we did not want to assume everyone knew how to create a website or create through a design program. Also surprised from the 22 people who took the survey, everyone had some experience in making a website.
Understanding the Whole Picture
From the user surveys, we still did not have the entire picture of the problem. We had a general idea of how users were feeling but needed to dial in what the issues were in Crownpeak. So, we talked with our client to investigate people who have constant contact with customers that were having the issues. So, we had SME (subject matter expert) interviews with a customer service manager, other customer service people, and a technical manager.
Affinity mapping takeaways
The community section is full of resources but is overloaded with info.
There is often a chain of command coming down, so the person she is supporting is rarely the “decision-maker.”
After onboarding, clients should ultimately be able to self-sustain.
Our users found it difficult because there are so many options and tools, they would need an in-depth tutorial and they feel overwhelmed thinking about it all at once. Another frustration from our interviews was that they feel like it takes forever, and we must change our vision because it’s too hard to accomplish quickly and simply.
Persona
So many options and no tutorial, this can be especially difficult for people who do not have a tech background. Our users found it difficult because there are so many options and tools, they would need an in-depth tutorial and they feel overwhelmed thinking about it all at once. Another frustration from our interviews was that they feel like it takes forever, and we must change our vision because it’s too hard to accomplish quickly and simply.
Analysis
Problem Statement
In order to remain compliant with worldwide privacy regulations, Mark needs an intuitive method to quickly style and update notifications for his company’s website while adhering to its branding.
How might We...
….. help Mark have a smooth experience styling his company’s web notifications?
….. provide Mark the numerous styling options he needs without overwhelming him?
….. help Mark update or edit multiple elements or notifications at once?
….. help Mark answer any technical questions without wasting time?
Ideation Session
Through ideation, we found some great ideas, but also some concerns going through this process. Our presentation to a group of 9 went well, explaining Marks’s situation and where he was coming from helped our participants. The problem statement and our 'how might we" questions gave us a great number of ideas. But we did come into some problems, not everyone had issues like the one Mark was having. Privacy notifications were something not a lot of people have had experience with.
Ideation Affinity
We were able to break the ideas down into four major categories. While having an adaptive template and being able to make simultaneous edits stood out, our participants highlighted numerous reasons to make the interaction as simple as possible. Participants also cited a vast spectrum of ways in which they prefer to learn, which meant that our design team needed to focus on offering a variety of different avenues to assist Mark.
Here are some main take away from our ideation session that I gathered.
There were many features with slight overlaps which we combined into some shared features. This also meant that going forward there are multiple other areas we can expand upon.
Proposed Features
Ability to preview all styled notifications at one time
Ability to edit specific or global elements
Real-time suggestions and directed prompts during the creation
More Adaptive template (using the upload feature)
Old task flow
What is important for Mark is how many steps it takes to make a simple edit across multiple sites. Although it does not appear overly complicated, most of this process must be repeated to fulfill the goal of editing a complete privacy notice.
New task flow
Design
Design Jam
Our group set up a design jam to get a better understanding of how the features are going to look like.
Sketch Testing
Usability testing helped remind us that we were doing the same thing that gave customers problems, too many choices. Users were getting lost trying to navigate the prototype.
Lo-Fi Prototype
As we moved on to a lo-fi prototype we thought the addition of a tutorial, would help people understand exactly where to go, but unsurprisingly people didn't want to “READ” the tutorial, and they were still very much lost when it came to navigation, they were also confused with knowing when they were editing global details versus local or specific details. As you could imagine, this was a tough place to be 36 hours before our final client meeting.
Moment of Clarity
“Most of the programs I use are going away from this top navigation bar and going toward simple interactions based on graphics and hovering… at the end, businesses are trying to lessen the number of clicks, right?”
— Usability Tester Andy W.
In a way, he was the real-life version of our Marketing Mark. The user testing helped us refocus on what we are trying to achieve and gave our designers a way to still implement what we are trying to do, with the help of the hover feature.
UI Design
From the previous prototypes, we took in the lessons we have learned and implemented a hover feature in which it gives you info on what you are clicking on than forcing you into a tutorial. Through testing, we had faster completion from our users and enjoyable experiences.
Hi-fi Prototype
Takeaways/Next Steps
This was the biggest challenge for me, and my team worked on it for a while. I think in the time frame of three weeks to research and re-designing a section of their website was not enough. But our client Crownpeak was surprised to see the amount of research that was put into it and the how the redesign complimented the research. I think in big projects like these it is easy to lose yourself into what the user truly needs and start to assume on just research. Having the usability testing really showed how much we were put in our place and to remember what we are trying to do. To help the user and company together.
Card sorting so people can understand this in layman’s terms
Reworking the other tabs and areas of their website that we didn’t redesign
Focusing more heavily on the location compliance codes