Tinting Chicago v1 Website Redesign
Tinting Chicago v1 Website Redesign
My Roles
My Roles
Competitor analysis
Research analysis
Information Architecture
User journeys
Low-fidelity wireframes and prototypes
High-fidelity designs
Usability testing
Regular stakeholder presentations
Competitor analysis
Research analysis
Information Architecture
User journeys
Low-fidelity wireframes and prototypes
High-fidelity designs
Usability testing
Regular stakeholder presentations
Team
Team
3 people
3 people
Duration
Duration
4 month
4 month
Summary
Summary
I lead the project of re-designing of Tinting Chicago’s
website and brand as well as helping stakeholders to
define the clear future of the brand and possibilities to scale.
I lead the project of re-designing of Tinting Chicago’s website and brand as well as helping stakeholders to define the clear future of the brand and possibilities to scale.
Problem statement
Problem statement
Business was not getting enough leads, users were leaving the website without taking any actons and it was hard to find the information users needed. Structure was optimized only for SEO and website’s visuals were outdated and not appealing.
Business was not getting enough leads, users were leaving the website without taking any actons and it was hard to find the information users needed. Structure was optimized only for SEO and website’s visuals were outdated and not appealing.
Project goals
Project goals
1
Generate more leads and sell more services.
Generate more leads and sell more services.
2
Improve the user experience of finding the right service.
Improve the user experience of finding the right service.
3
Allow users to compare services and book appointments online.
Allow users to compare services and book appointments online.
4
Create a seamless experience between different platforms.
Create a seamless experience between different platforms.
5
Explore the film selection for a more interactive experience.
Explore the film selection for a more interactive experience.
BEFORE
AFTER
Start with Understanding
Start with Understanding
Before getting right into the design I had to understand 2 sides.
Before getting right into the design I had to understand 2 sides.
THE USER
THE USER
THE BRAND
THE BRAND
After talking to the stakeholders we were able to identify the main problems and get preliminary answers to following question:
After talking to the stakeholders we were able to identify the main problems and get preliminary answers to following question:
What problem are we trying to solve for brand?
What problem are we trying to solve for brand?
The brand wants more people to understand all the types and benefits of the service, therefore, helping more people and getting more customers.
The brand wants more people to understand all the types and benefits of the service, therefore, helping more people and getting more customers.
Do the solutions for user align with goals and mission of the brand?
Do the solutions for user align with goals and mission of the brand?
Yes, the more people know about the service and understand it’s value the more customer the company will get.
Yes, the more people know about the service and understand it’s value the more customer the company will get.
What issue are we trying to solve for user?
What issue are we trying to solve for user?
Users don’t know the field and therefore have a hard time choosing the right service / product and need more guidance and education on the topic
Users don’t know the field and therefore have a hard time choosing the right service / product and need more guidance and education on the topic
Do the Research
Do the Research
Next, we had to do a research to prove our hypotheses about users and brake down their pain points.
Next, we had to do a research to prove our hypotheses about users and brake down their pain points.
Research methods
Research methods
Market research analysis
Custome Discovery
Customer Interviews
Persona
Customer journey
Prototype testing
We performed a series of behavioral and customer discovery interviews because we wanted to understand the types of users and what exactly motivates them to do the service.
We performed a series of behavioral and customer discovery interviews because we wanted to understand the types of users and what exactly motivates them to do the service.
After the research, interviews with customers and staff and exploring online forums for problems people face, we’ve discovered that our hypotheses were correct.
After the research, interviews with customers and staff and exploring online forums for problems people face, we’ve discovered that our hypotheses were correct.
Analyze the findings
Analyze the findings
By doing multiple surveys and conducting 1 : 1 interviews we were also able to identify who our users are and what are they struggling with the most.
By doing multiple surveys and conducting 1 : 1 interviews we were also able to identify who our users are and what are they struggling with the most.
Main types of users
Main types of users
New car / home owners
Customization enthusiast
Privacy seekers
Protection seekers
New car / home owners
Customization enthusiast
Privacy seekers
Protection seekers
Top motivations
Improve the look
Increase comfort
Get more privacy
Protect interion / skin
Pain points
Pain points
Not understanding the differences between different films.
Not understanding the differences between different films.
Having hard time choosing the tinting film percentages.
Having hard time choosing the tinting film percentages.
Not knowing legal limitations of tinting in a particular state.
Not knowing legal limitations of tinting in a particular state.
Fear that end result will look differently from what they expect.
Fear that end result will look differently from what they expect.
To solve these problems we’ll need to work on information organization to explain film differences without getting into the specifics of the field and also we’ll need to create visualizers to give the user the ability to visually see the difference between films (both tinting and wrapping). Also, a galery with real-world examples of end results should help to eliminate some uncertainty.
To solve these problems we’ll need to work on information organization to explain film differences without getting into the specifics of the field and also we’ll need to create visualizers to give the user the ability to visually see the difference between films (both tinting and wrapping). Also, a galery with real-world examples of end results should help to eliminate some uncertainty.
To help us keep track of user needs we created a couple of personas that served us as a guide for better design decisions.
To help us keep track of user needs we created a couple of personas that served us as a guide for better design decisions.
Getting to Design
Getting to Design
After defining the users and before starting the drawing of the designs we had to analyze and organize this massive field of information Tinting Chicago was covering so we got to Information Architecture and created Site Map first.
After defining the users and before starting the drawing of the designs we had to analyze and organize this massive field of information Tinting Chicago was covering so we got to Information Architecture and created Site Map first.
After this, we could create User Flows to see how hard it may be to get to where the user wants to get.
After this, we could create User Flows to see how hard it may be to get to where the user wants to get.
When the structure was defined I got to pages design by sketching multiple options of layouts of each page on paper before I could transfer my wireframes to digital form and proceed to the first round of prototyping
When the structure was defined I got to pages design by sketching multiple options of layouts of each page on paper before I could transfer my wireframes to digital form and proceed to the first round of prototyping
Then, I set up a lo-fi clickable prototype to help aid the customer conversations and also provide usability insights. I was following a mobile-first approach to designing, so my first prototype was on mobile with Invision App.
Then, I set up a lo-fi clickable prototype to help aid the customer conversations and also provide usability insights. I was following a mobile-first approach to designing, so my first prototype was on mobile with Invision App.
Home screen evolution
Home screen evolution
After carefully crafting the visuals to make using the website on different platforms as easy as possible I faced a problem with animation design. I knew that subtle animation will immensely enhance user engagement and add delight to the experience, but as I don’t have a lot of experiance with animation design I found some pieces of animation I wanted on the Internet and sent them to developers as a reference.
After carefully crafting the visuals to make using the website on different platforms as easy as possible I faced a problem with animation design. I knew that subtle animation will immensely enhance user engagement and add delight to the experience, but as I don’t have a lot of experiance with animation design I found some pieces of animation I wanted on the Internet and sent them to developers as a reference.
Launch
Launch
This project never got to launch due to Covid and budget cuts.
Few years later project was revitalized and an independent agency created a new website based on these designs and on this research.
This project never got to launch due to Covid and budget cuts. Few years later project was revitalized and an independent agency created a new website based on these designs and on this research.
Learnings
Learnings
Clearly define the company’s objectives at the start
Clearly define the company’s objectives at the start
Despite having multiple interviews with stakeholders at the beginning, company objectives were still changing in the middle of the project which made us go back to start every time and see how new goals align with what already was stated and researched before, which added a lot of hours of changes to an existing structure and design.
Despite having multiple interviews with stakeholders at the beginning, company objectives were still changing in the middle of the project which made us go back to start every time and see how new goals align with what already was stated and researched before, which added a lot of hours of changes to an existing structure and design.
Define a style guide
Define a style guide
As the project was growing bigger and bigger we needed a way to keep track of all of the existing UI elements and as I was the only designer here I used Sketch symbols and styles in this project. In future projects of this scope Design System will have to be created for easier understanding for other collaborators and developers and serve as a guide for future changes for new designers.
As the project was growing bigger and bigger we needed a way to keep track of all of the existing UI elements and as I was the only designer here I used Sketch symbols and styles in this project. In future projects of this scope Design System will have to be created for easier understanding for other collaborators and developers and serve as a guide for future changes for new designers.
Other projects
Other projects
Case study
UX Design
UI Design
🖐️ Integrating UX principles with Art Direction for cohesive experience
🖐️ Integrating UX principles with Art Direction for cohesive experience
Dig inside
Case study
Volunteering
UX Design
UI Design
💪 Crafting a no-code website using Framer
💪 Crafting a no-code website using Framer
Dig inside
CoNtact me ANyTIME
CoNtact me ANyTIME
If you have any question, suggestions, job offers or just want to talk or share a cool show or documentary you just found - hit me up. I’ll be happy to hear from you.
I’m glad you got all the way here and hope you are having an amazing day. All rights reserved, 2024