ClickASnap
2024
Website redesign for a photo-sharing platform.
A UX/UI case study from my Master’s program focused on evaluating and redesigning ClickASnap, a photo-sharing platform where photographers earn per view. The original site faced major usability issues, which I addressed through a streamlined, user-centered redesign.
Figma Link:
https://www.figma.com/file/YJ4X4h6EY0ioFJBfeXUSAh/ ClickASnap?type=design&nod%20e-id=0%253A1&t=WEAlkW5TtRV7sY8S-1
Get paid
when your photos are viewed
when your photos are viewed
when your photos are viewed
ClickASnap is an online photo-sharing platform that allows photographers to monetize their images through views, downloads, and physical prints. Despite its innovative business model, usability issues and design inconsistencies negatively impact the user experience. This case study details my redesign process aimed at improving the platform’s usability, navigation, and overall user engagement.
ClickASnap is an online photo-sharing platform that allows photographers to monetize their images through views, downloads, and physical prints. Despite its innovative business model, usability issues and design inconsistencies negatively impact the user experience. This case study details my redesign process aimed at improving the platform’s usability, navigation, and overall user engagement.
ClickASnap is an online photo-sharing platform that allows photographers to monetize their images through views, downloads, and physical prints. Despite its innovative business model, usability issues and design inconsistencies negatively impact the user experience. This case study details my redesign process aimed at improving the platform’s usability, navigation, and overall user engagement.
Upload photos
Get views
Get paid
Project Overview
Project Overview
Project Overview
1
1
1
Research
Research
Research
2
2
2
Problem Recognition
Problem Recognition
Problem Recognition
3
3
3
Key Insights
Key Insights
Key Insights
4
4
4
Proposed Solutions
Proposed Solutions
Proposed Solutions
5
5
5
Design
Design
Design
Research
Research
Research
Key Users
Key Users
Key Users
Photographers
Photographers
To get Inspiration
To share their photos
To build connections
To sell digital copies
To get Inspiration
To share their photos
To build connections
To sell digital copies
To get Inspiration
To share their photos
To build connections
To sell digital copies
Photographers
To get Inspiration
To share their photos
To build connections
To sell digital copies
Designers
Designers
To search and purchase stock photos to for designs
To search and purchase stock photos to for designs
To search and purchase stock photos to for designs
Designers
To search and purchase stock photos to for designs
Photo Enthusiasts
Photo Enthusiasts
To share photos
To sell or buy photos
To follow photographers
To get inspiration and hone their skills
To share photos
To sell or buy photos
To follow photographers
To get inspiration and hone their skills
To share photos
To sell or buy photos
To follow photographers
To get inspiration and hone their skills
Photo Enthusiasts
To share photos
To sell or buy photos
To follow photographers
To get inspiration and hone their skills
Major Objectives
Major Objectives
Major Objectives
View Photos
View Photos
View Photos
Upload Photos
Upload Photos
Upload Photos
Purchase Photos
Purchase Photos
Purchase Photos
Purchase Merchandise
Purchase Merchandise
Purchase Merchandise
Problem Recognition
Problem Recognition
Problem Recognition
Original Website
Original Website
Original Website
Visually Overwhelming
Visually Overwhelming
Visually Overwhelming
Cluttered layouts and excessive visual elements, making it hard for users to focus on key content.
Cluttered layouts and excessive visual elements, making it hard for users to focus on key content.
Cluttered layouts and excessive visual elements, making it hard for users to focus on key content.
Lack of Structure and Cohesion
Lack of Structure and Cohesion
Lack of Structure and Cohesion
Inconsistent page designs and absence of a unified style disrupted the overall browsing experience.
Inconsistent page designs and absence of a unified style disrupted the overall browsing experience.
Inconsistent page designs and absence of a unified style disrupted the overall browsing experience.
Confusing User Journey
Confusing User Journey
Confusing User Journey
Disjointed navigation and unclear pathways made it difficult for users to explore or interact with the platform effectively.
Disjointed navigation and unclear pathways made it difficult for users to explore or interact with the platform effectively.
Disjointed navigation and unclear pathways made it difficult for users to explore or interact with the platform effectively.
Challenges
Challenges
Challenges
1
1
Visual Overload
Visual Overload
With thousands of user-uploaded images, the interface can easily become cluttered and overwhelming.
With thousands of user-uploaded images, the interface can easily become cluttered and overwhelming.
With thousands of user-uploaded images, the interface can easily become cluttered and overwhelming.
2
2
Inconsistent Aesthetics
Inconsistent Aesthetics
The overall look of the platform heavily depends on user-generated content, which varies widely in quality.
The overall look of the platform heavily depends on user-generated content, which varies widely in quality.
The overall look of the platform heavily depends on user-generated content, which varies widely in quality.
3
3
Content Scalability
Content Scalability
Managing the sheer volume of images demands a clear, well-structured system to preserve both usability and clarity.
Managing the sheer volume of images demands a clear, well-structured system to preserve both usability and clarity.
Managing the sheer volume of images demands a clear, well-structured system to preserve both usability and clarity.
4
4
Performance & Loading Time
Performance & Loading Time
A large volume of high-res images can slow down the site and hurt UX.
A large volume of high-res images can slow down the site and hurt UX.
A large volume of high-res images can slow down the site and hurt UX.
5
5
Navigational Complexity
Navigational Complexity
Without proper structure, users may feel lost when exploring or uploading content.
Without proper structure, users may feel lost when exploring or uploading content.
Without proper structure, users may feel lost when exploring or uploading content.
6
6
Upload Experience
Upload Experience
Uploading multiple large images can be confusing or error-prone.
Uploading multiple large images can be confusing or error-prone.
Uploading multiple large images can be confusing or error-prone.
Key Insights
Key Insights
Key Insights
Methodology
Heuristics Evaluation
Heuristics Evaluation
Heuristics Evaluation
Heuristics Evaluation
3 Evaluators (UX Master Students), using Nielsen’s 10 Usability Heuristics
3 Evaluators (UX Master Students), using Nielsen’s 10 Usability Heuristics
3 Evaluators (UX Master Students), using Nielsen’s 10 Usability Heuristics
Think-Aloud Protocol
Think-Aloud Protocol
Think-Aloud Protocol
Think-Aloud Protocol
4 participants (Senior UX Designers, Art Director, Professional Photographer & Photo Enthusiasts) are asked to perform tasks on ClickASnap Website.
4 participants (Senior UX Designers, Art Director, Professional Photographer & Photo Enthusiasts) are asked to perform tasks on ClickASnap Website.
4 participants (Senior UX Designers, Art Director, Professional Photographer & Photo Enthusiasts) are asked to perform tasks on ClickASnap Website.
Key Findings
Key Findings
1
1
Confusing Navigation & UI
Confusing Navigation & UI
Confusing Navigation & UI
Inconsistent buttons, poor content organization, and unclear visual hierarchy.
Inconsistent buttons, poor content organization, and unclear visual hierarchy.
Inconsistent buttons, poor content organization, and unclear visual hierarchy.
2
2
Difficult Photo Upload Process
Difficult Photo Upload Process
Difficult Photo Upload Process
Lack of file format guidance, complicated album creation, and no drag-and-drop support.
Lack of file format guidance, complicated album creation, and no drag-and-drop support.
Lack of file format guidance, complicated album creation, and no drag-and-drop support.
3
3
Inefficient Purchasing Experience
Inefficient Purchasing Experience
Inefficient Purchasing Experience
Poor search and filtering, unclear purchase options, and an unintuitive checkout process.
Poor search and filtering, unclear purchase options, and an unintuitive checkout process.
Poor search and filtering, unclear purchase options, and an unintuitive checkout process.
4
4
Usability & Accessibility Issues
Usability & Accessibility Issues
Usability & Accessibility Issues
No real-time feedback, readability problems, and inconsistent UI elements.
No real-time feedback, readability problems, and inconsistent UI elements.
No real-time feedback, readability problems, and inconsistent UI elements.
5
5
Limited Account & Authentication Options
Limited Account & Authentication Options
Limited Account & Authentication Options
Unclear sign-in process, and difficulties with account management.
Unclear sign-in process, and difficulties with account management.
Unclear sign-in process, and difficulties with account management.
6
6
Hard-to-Find Support & Help Resources
Hard-to-Find Support & Help Resources
Hard-to-Find Support & Help Resources
Inconsistent buttons, poor content organization, and unclear visual hierarchy.
Inconsistent buttons, poor content organization, and unclear visual hierarchy.
Inconsistent buttons, poor content organization, and unclear visual hierarchy.
Proposed Solutions
Proposed Solutions
Proposed Solutions
1
1
Clear Font Hierarchy
Clear Font Hierarchy
Clear Font Hierarchy
Establishe a structured typographic system to improve readability, ensuring users can easily scan and understand content.
Establishe a structured typographic system to improve readability, ensuring users can easily scan and understand content.
Establishe a structured typographic system to improve readability, ensuring users can easily scan and understand content.
Inter Font Family
Inter Font Family
Inter Font Family
H1: Heading
H1: Heading
H2:Title
H2:Title
H3: Sub-Title
H3: Sub-Title
H4: Sub-Title
H4: Sub-Title
H5: Body Highlight
H5: Body Highlight
H6: Body
H6: Body
Note - Bold
Note - Bold
Note - Bold
Note - Regular
Note - Regular
Note - Regular
2
2
Strict Grid System
Strict Grid System
Strict Grid System
Create a well-organized layout with consistent spacing and ampled whitespace, reducing visual clutter and improving focus.
Create a well-organized layout with consistent spacing and ampled whitespace, reducing visual clutter and improving focus.
Create a well-organized layout with consistent spacing and ampled whitespace, reducing visual clutter and improving focus.
3
3
Consistent Visual Style
Consistent Visual Style
Consistent Visual Style
Standardizes icons, colors, and design elements across all pages, enhancing brand identity and user familiarity.
Standardizes icons, colors, and design elements across all pages, enhancing brand identity and user familiarity.
Standardizes icons, colors, and design elements across all pages, enhancing brand identity and user familiarity.
#049ff7
#049ff7
#049ff7
#049ff7
#106ef6
#106ef6
#106ef6
#106ef6
#9247ff
#9247ff
#9247ff
#9247ff
#33333
#33333
#33333
#33333
#e1e1e1
#e1e1e1
#e1e1e1
#e1e1e1
Gradient 1
Gradient 1
Gradient 1
Gradient 1
Gradient 2
Gradient 2
Gradient 2
Gradient 2
4
4
Improved Sitemap
Improved Sitemap
Improved Sitemap
Refines the site's structure for better navigation, allowing users to find content more efficiently while maintaining flexibility.
Refines the site's structure for better navigation, allowing users to find content more efficiently while maintaining flexibility.
Refines the site's structure for better navigation, allowing users to find content more efficiently while maintaining flexibility.
5
5
Structured Information
Structured Information
Structured Information
Organizes content with logical hierarchy, breaking down complex information into digestible sections for a smoother user experience.
Organizes content with logical hierarchy, breaking down complex information into digestible sections for a smoother user experience.
Organizes content with logical hierarchy, breaking down complex information into digestible sections for a smoother user experience.
6
6
Convenience & Flexibility
Convenience & Flexibility
Convenience & Flexibility
Ensures users can complete key actions effortlessly, with short cuts that cater to different user needs and devices.
Ensures users can complete key actions effortlessly, with short cuts that cater to different user needs and devices.
Ensures users can complete key actions effortlessly, with short cuts that cater to different user needs and devices.
7
7
Design Consistency
Design Consistency
Design Consistency
Maintains uniformity across all pages, ensuring a cohesive and intuitive interface that enhances usability and professionalism.
Maintains uniformity across all pages, ensuring a cohesive and intuitive interface that enhances usability and professionalism.
Maintains uniformity across all pages, ensuring a cohesive and intuitive interface that enhances usability and professionalism.
Upload Photo Modal
Upload Photo Modal
Upload Photo Modal
Photo Viewing Modal
Photo Viewing Modal
Photo Viewing Modal
Design
Design
Design
Visual Consistency
Visual Consistency
Visual Consistency
Ensured visual consistency through breathable layout and colour, incorporated filtering options for easier search, and implemented a status bar to guide users through multi-step actions.
Ensured visual consistency through breathable layout and colour, incorporated filtering options for easier search, and implemented a status bar to guide users through multi-step actions.
Ensured visual consistency through breathable layout and colour, incorporated filtering options for easier search, and implemented a status bar to guide users through multi-step actions.
Ensured visual consistency through breathable layout and colour, incorporated filtering options for easier search, and implemented a status bar to guide users through multi-step actions.
Home (Landing Page)
Home (Landing Page)
Home (Landing Page)
Marketplace
Marketplace
Marketplace
Explore
Explore
Explore
Flexibility & Freedom
Flexibility & Freedom
Flexibility & Freedom
To accommodate a large volume of images, traditional pagination was avoided. Instead, a "Load More" button and a persistent "Back to Top" button are placed at the bottom of image-heavy pages, allowing users to explore freely without disrupting their flow.
To accommodate a large volume of images, traditional pagination was avoided. Instead, a "Load More" button and a persistent "Back to Top" button are placed at the bottom of image-heavy pages, allowing users to explore freely without disrupting their flow.
To accommodate a large volume of images, traditional pagination was avoided. Instead, a "Load More" button and a persistent "Back to Top" button are placed at the bottom of image-heavy pages, allowing users to explore freely without disrupting their flow.
Load More & Back to top
Load More & Back to top
Header
Header
Header
Footer
Footer
Footer
Create Account
Create Account
Create Account
Structured Journey
Structured Journey
Structured Journey
The account creation process was divided into a steps and sections, breaking down tasks to avoid overwhelming users.
The account creation process was divided into a steps and sections, breaking down tasks to avoid overwhelming users.
The account creation process was divided into a steps and sections, breaking down tasks to avoid overwhelming users.
Create Profile
Create Profile
Create Profile
Subscription
Subscription
Subscription
Finish
Finish
Finish
View Photos
View Photos
View Photos
Visibility of Status
Visibility of Status
Visibility of Status
Each stage of the user journey clearly reflects the user’s current status using visual cues and progression indicators, also provides flexibility to surf among stages.
Each stage of the user journey clearly reflects the user’s current status using visual cues and progression indicators, also provides flexibility to surf among stages.
Each stage of the user journey clearly reflects the user’s current status using visual cues and progression indicators, also provides flexibility to surf among stages.
Status Bar at Major Photo Pages
Status Bar at Major Photo Pages
Status Bar at Major Photo Pages
Status Bar at Major Photo Pages
Home
Home
Home
Home
Explore
Explore
Explore
Explore
Street Art
Street Art
Street Art
Street Art
Status Bar at Profile-creating Process
Status Bar at Profile-creating Process
Status Bar at Profile-creating Process
Status Bar at Profile-creating Process
Create Profile
Create Profile
Create Profile
Create Profile
Subscripition
Subscripition
Subscripition
Subscripition
Finish
Finish
Finish
Finish
Status Bar at Purchasing process
Status Bar at Purchasing process
Status Bar at Purchasing process
Status Bar at Purchasing process
Your Cart
Your Cart
Your Cart
Your Cart
Your Details
Your Details
Your Details
Your Details
Payment
Payment
Payment
Payment
Finish
Finish
Finish
Finish
Category Page
Category Page
Category Page
(Example 1)
(Example 1)
(Example 1)
(Example 2)
(Example 2)
(Example 2)
Information is adjusted based on user status (e.g., logged-in vs. not logged-in), ensuring users see relevant content at the right time.
Information is adjusted based on user status (e.g., logged-in vs. not logged-in), ensuring users see relevant content at the right time.
Information is adjusted based on user status (e.g., logged-in vs. not logged-in), ensuring users see relevant content at the right time.
Information is adjusted based on user status (e.g., logged-in vs. not logged-in), ensuring users see relevant content at the right time.
Before Login (Section in Home Page)
Before Login (Section in Home Page)
Before Login (Section in Home Page)
Before Login (Section in Home Page)
After Login (Section in Home Page)
After Login (Section in Home Page)
After Login (Section in Home Page)
After Login (Section in Home Page)
Sign Up
Sign Up
Sign Up
Sign Up
Login
Login
Login
Login
Purchase Photos & Merchandise
Purchase Photos & Merchandise
Purchase Photos & Merchandise
Purchase Process
Purchase Process
Purchase Process
The purchase flow was refined into a 4-step process, with prominent CTA buttons clearly leading users from cart to payment.
The purchase flow was refined into a 4-step process, with prominent CTA buttons clearly leading users from cart to payment.
The purchase flow was refined into a 4-step process, with prominent CTA buttons clearly leading users from cart to payment.
Individual Photo Modal
Individual Photo Modal
Individual Photo Modal
Individual Photo Modal
Product Page
Product Page
Product Page
Product Page
Cart Page
Cart Page
Cart Page
Cart Page
Confirmation Page
Confirmation Page
Confirmation Page
Confirmation Page
Upload Photos
Upload Photos
Upload Photos
Sticky Button
Sticky Button
Sticky Button
A prominent, eye-catching sticky button is placed in the bottom-right corner at all time, making it easy and convenient for users to upload photos and encouraging interaction.
A prominent, eye-catching sticky button is placed in the bottom-right corner at all time, making it easy and convenient for users to upload photos and encouraging interaction.
A prominent, eye-catching sticky button is placed in the bottom-right corner at all time, making it easy and convenient for users to upload photos and encouraging interaction.
Enhanced Photo Uploading Process with Modal
Enhanced Photo Uploading Process with Modal
Enhanced Photo Uploading Process with Modal
Modal Pops Out
Modal Pops Out
Modal Pops Out
Modal Pops Out
Choose Photo
Choose Photo
Choose Photo
Choose Photo
Modal extends if users click Add more photos
Modal extends if users click Add more photos
Modal extends if users click Add more photos
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Confirmation pops out with suggested actions
Confirmation pops out with suggested actions
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention & Recovery
Error Prevention & Recovery
Error Prevention
Error Prevention
Error Prevention
Unlike the original cluttered one, a cleanly designed FAQ page using accordions helps users find answers quickly. They are also encouraged to contact ClickASnap for further help.
Unlike the original cluttered one, a cleanly designed FAQ page using accordions helps users find answers quickly. They are also encouraged to contact ClickASnap for further help.
Unlike the original cluttered one, a cleanly designed FAQ page using accordions helps users find answers quickly. They are also encouraged to contact ClickASnap for further help.
FAQ
FAQ
FAQ
FAQ
Contact Us
Contact Us
Contact Us
Contact Us
Complete
Complete
Complete
Complete
Error Recovery
Error Recovery
Error Recovery
In the case of issues, a custom error page apologizes and redirects users to other useful areas of the site, reducing friction.
In the case of issues, a custom error page apologizes and redirects users to other useful areas of the site, reducing friction.
In the case of issues, a custom error page apologizes and redirects users to other useful areas of the site, reducing friction.
Error Page
Error Page
Error Page
Error Page
Next Steps & Considerations
Next Steps & Considerations
Next Steps & Considerations
Responsiveness
Responsiveness
Responsiveness
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
Current Design only applys to Desktop, will need to further develop for tablet size and phone size to achive full repsonsive expereince
User Testing
User Testing
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Conduct usability testing to validate assumptions and refine interactions.
Conduct usability testing to validate assumptions and refine interactions.
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
Accessibility
Accessibility
Ensure compliance with accessibility standards for a more inclusive experience.
Ensure compliance with accessibility standards for a more inclusive experience.
Ensure compliance with accessibility standards for a more inclusive experience.
Ensure compliance with accessibility standards for a more inclusive experience.
See Other UX/UI Projects
See Other UX/UI Projects
TUNG WEBSITE
Website design for a ceramic studio.
View
TUNG WEBSITE
Website design for a ceramic studio.
View
TUNG WEBSITE
Website design for a ceramic studio.
View
TUNG WEBSITE
Website design for a ceramic studio.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
CLICKASNAP
Website redesign for a photo-sharing platform.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View
COASTAL TRAIL CHALLENGE
Website designed to promote outdoor activities along the coast in Hong Kong.
View