Case Study
Revised & Rebranded
Client:
Tikler
Role:
UX Designer
Timeline:
3 Weeks
Tools:
UX Research, Figma, FigJam, Notion, Canva
Single Source of Truth
Tikler is a SaaS-based information management platform that serves as the single source of truth for cross-functional operations teams. In a website redesign, we conducted market research, crafted a new design system, and overhauled the entire composition of the existing content. This case study follows how I created an experience that champions what Tikler does and encourages users to try the product for themselves.
Why are we here?
With plans to launch a new marketing campaign in the following month, Tikler needed to ensure that the users will be directed to a website that encourages and retains engagement. This case study follows how we came to understand what Tikler does, identified their client base, evaluated the existing website, and crafted a redesign that directly addressed the business and customer goals.
Tikler’s Goals
1️⃣
Increase sign-ups for the product demo.
2️⃣
Evaluate and improve the existing content in order to communicate the products unique proposition value.
3️⃣
Ensure the website content meets WCAG standards.
Research
🕵️
Research 🕵️
Who do they help?
As an information management platform, Tikler can help any organization that manages numerous files, people, and deadlines. For the upcoming marketing campaign, Tikler targeted the following demographic:
Why are people switching over?
Through user interviews, we were able to identify the frustrations and features that led current users to pick Tikler. These insights would prioritize how we revised the website.
The Old Look
The current color scheme did not meet color and contrast accessibility guidelines. While it is good practice to adhere to these guidelines regardless, Tikler’s target demographic were especially prone to these concerns.
Accessibility: Color Contrast
The current color scheme does not meet color and contrast accessibility guidelines. While it is good practice to adhere to these guidelines regardless, Tikler’s target demographic are especially prone to these concerns.
Flexibility & Efficiency of Use: Can I demo?
Taking away the user’s freedom to demo the product directly, Users must first sign-up to arrange a live meeting before being given the option to demo the product. In addition to the option not being apparent, it detracted from the desired outcome of increasing demo sign-ups.
First Impressions
With the marketing campaign directing new clients towards the website, we observed how people unfamiliar with the product interacted with the website for the first time. Afterward inquiring their understanding of the production and their impression of the overall experience.
Trends & Takeaways
Concluding our research, we were able to identify trending concerns and pain points with the existing website to inform our problem space.
1️⃣
Users are unable to determine what the product is.
2️⃣
The website has poor visual emphasis and hierarchy.
3️⃣
The unique features that users enjoy are not apparent.
Define
🔎
Define 🔎
Business & Consumer Needs
With a clear understanding of what users are missing and need, we are able to compare and define the overlap with Tikler’s business needs.
Problem Statement
The overlaps, or “happy place”, in both Tikler and their visitor defines the boundaries of our problem space. This directive informed the way we designed and made decisions moving forward.
Users that are looking at Tikler’s website need a consumable method to comprehend how the product can easily optimize their own processes.
Brainstorm
🧠
Brainstorm 🧠
What are others doing?
Before generating our own ideas to tackle the problem, we took a step back to see what larger competitors in the market were doing to address or circumvent our issues.
Monday
Monday shows screenshots of their tool in action providing use cases for their product that are relatable and understandable to visitors on their website. They also display recognizable and trustworthy partners that speak to their credibility.
Empower
Empower uses loud and concise language that articulates what the product does in a single sentence. Reinforcing their claim, they provide details of the key features that explain how their product works.
Sketches
To visualize and generate our own ideas, we ran a design studio to quickly draft ideas solving specific pain points.
As Seen On TV
An idea to quickly and simply convey to the user how Tikler consolidates and eliminates the need for multiple tools was an animation that shows the user's current cluttered window on an average workday simplified into one program, Tikler.
Quickly Navigate
Addressing a critique that the current website required a lot of scrolling to navigate through the key features, creating a fixed nav bar would both summarize all of the features available and allows users to quickly navigate toward the sections they are interested in.
Don’t Just Take My Word For It
A common practice within the industry, providing examples of current clients and their personal reviews informs the user that the product is not only being used but works in making the lives of others easier.
Implementation
💻
Implementation 💻
New Look, Same Great Taste
With no style guide provided, we seized the opportunity to create a design system for the website. By updating the content to meet accessibility standards and creating a consistent style guide, we created a more cohesive and digestible experience for incoming clients.
A One-Stop Shop
With a new UI kit, we created a new landing page. We updated the hook to be concise and accurate. The call to action directly encouraged user sign-ups and offered alternative paths. Users can view a quick demo video exemplifying Tikler in action.
What and How
We removed the need to tediously scroll between the four key features of what Tikler does. With navigable cards and corresponding imagery, users can read and see what makes Tikler a powerful tool.
Don’t Just Take Our Word For It
Providing validity to Tikler’s assertions, we included features that would accredit their merit. Adding current clients and reviews, the site visitors are affirmed that the product is being used and provides satisfaction. Coupled with the anecdotal evidence, are measurable impacts providing quantified metrics that cannot be refuted.
Iterations
🔁
Iterations 🔁
Close to the Source
Sticking close to the source material and incorporating ideas from our brainstorm, our mid-fi prototype was similar to the original.
Usability Testing
Through user testing, we found persisting issues in the content and visual design of the website.
Major Changes
Understanding that what we were currently doing was not working, we made drastic changes to our following iteration.
Glow Up
Building from scratch, we remade the entire UI kit using colors that were less distracting and more legible. Creating a foundational design system ensured compliance moving forward and set the tone with a friendlier and more inviting atmosphere.
Cut To The Chase
Highly requested and more direct, instead of showing what applications Tikler eliminates, we show the product in action. With a demo video simulating a use case, users are able to see the exact ways the tool is used for their purposes.
All-In-One Place
To reduce scrolling and how far users have to navigate, we compressed all four features onto one screen. Prioritizing screenshot sizes, we represented the four key features as cards that users can use to navigate through the gallery.