Tikler
The Problem
We were tasked to redesign the Tikler website, addressing how the company might better reflect the product’s value proposition and use cases, and encourage more product demo signups.
The Solution
We created a landing page that prioritized a product demo video that would allow users to experience the product immediately & create an aesthetically minimalistic interface that represented Tikler's ease of user & approachable system for information management.
Project Overview
Timeframe: 2.5 weeks; Client Project
Team: Abby, Arthur, Emily, Han and Hetal
Tools: Figma, FigJam, Maze, Otter, Notion, and Canva
Roles: UX Designer, UX Researcher
Who is Tikler?
Tikler is a SaaS-based information management platform that serves as the single source of truth for cross-functional operations teams.
Over past 2 years Tikler has provided 8 different organizations a platform that has is simplified and uniformed their work processes allowing all employees to have access to one single source of truth for greater efficiency and productivity.
Who is using Tikler?
Their average users are typically government employees who are not tech-savvy and need something easy to use.
The design process
Discover | Define | Design | Develop | Deliver
Analyzing User Feedback Interviews for Product:
To begin with, Tikler had recently got users' feedback on their actual product that we could use to determine how average users feel about the product and how can we reflect their product on the website.
Here is why Tikler is loved by its users:
“It had 80% of what we were looking for but unlike other systems they prioritized ease of use.”
“I’ve automated my process and can leave on PTO without people emailing me questions.”
“I needed a tool that my team could easily pick up.”
“I chose Tikler because of its ease of use, affordability, gets the job done.”
The good part about this feedback was most of the users emphasized that the product was very easy to use and implement.
So we concluded that we needed to reflect that "ease of use" on Tikler's website.
Persona:
Moving on, to empathize with users journey on Tikler's website we created persona representing its potential user base.
"I have to review 100 pages legal papers everyday and sometimes I end up missing key information in the process."
Hayley is a busy government employee that has been working in the system for years. She wants to be able to maintain all of her files in one place.
Hayley Brown
Age: 50
Status: Married
Location: Illinois, USA
Job: Court Clerk
Goals
To keep files, from all department, stored in one place
An easy to use and seamless navigation
Needs
A single source of truth
Unity across departments
Spend less time looking for files
Frustrations
Tired of losing information
Burdened by constantly searching for document
Misses crucial deadlines for tasks
Now let us walk through the existing website.
Existing website analysis
User feedback: Existing website
To understand further about what kind of information users needed on the website we conducted 1:1 user feedback sessions with 5 people. These are some of the reactions we received from the session:
“I understand what the product is but I don’t know what does it do.”
“I am unable to discern what the product is.”
“I don’t understand if it is an application or web-based platform.”
“I lost interest while browsing the site.”
Website Analysis Conclusion:
Current website does not speak for the product or itself
The website needs unique value proposition to differentiate from its competitors
Clear visual communication is necessary to highlight the product
Market Analysis:
Discover | Define | Design | Develop | Deliver
Business needs vs. Users needs:
Tikler Needs
To convey 'ease of use' of the product on their own
To showcase information management platform
User Needs
A way to understand the product
A clear and simple language to understand product
Problem Statement
The users need a consumable method to quickly understand the benefits of Tikler for their own application.
Discover | Define | Design | Develop | Deliver
Feature Prioritization:
Must have
Product features
Product image gallery
Visuals emphasizing ease of use
A single call to action button
Add current clients
Could have
Custom Illustrations
Client story
Landing animation
About us page
Should have
Updated graphics
Images of people
Metrics
Testimonials
Won’t have
Viewable demo
Accessibility menu
Discover | Define | Design | Develop | Deliver
First Prototype: Mid-Fidelity
User feedback on first prototype:
Once again to have in-depth insight on how users interact with the website we to conducted 1:1 user feedback session with 5 people. This step made it clear that all the users kept referring to the same points again and again which are as follows:
“Colors were too bright.”
“I feel like video of the demo would be more helpful.”
“Product screenshots are not visible.”
“How is Tikler any different from its competition?”
“Language is not user friendly.”
We figured that we still did not overcome the main issues with the existing website.
Key Highlights
A video demo of the product is the best way to communicate to users the benefits of Tikler.
It is important that the language on the website is understandable to all potential users regardless of their prior knowledge.
Toning down the color and graphics on the website will be more attractive to our target consumers.
Highlighting trust factors such as current clients and testimonials help to drive the point home about ease of use and implementation.
Post feedback feature prioritization:
Must have:
Aesthetics
Subtle colors
Overall contrast
Efficiency of use
Button on top
Product Knowledge
Demo Video
Screenshots
Should have:
Product
Demo Video
Could have:
UX Writing
Get started button
User friendly product information
Easy to understand verbiage
Unique value preposition
Won’t have:
Aesthetics
Busy background
Iterated sketches:
Discover | Define | Design | Develop | Deliver
Final Prototype
Next Steps
Demo video
Blog page
Sign up user flow
User feed page
Responsive site
Feature page