ClickASnap
2023
What
Master’s project redesigning ClickASnap, a photo-sharing platform.
Problem
The original site lacked consistency, had a confusing layout, and caused users to struggle with navigation and task completion.
Solution
Conducted user research and evaluation, then built a unified visual system and clearer information architecture—prioritising key user goals and reducing points.
#WebDesign
#UXUI
#UserResearch
#Figma
The Problem-solving Process:
1
Research
2
Problem Recognition
3
Key Insights
4
Proposed Solutions
5
Design
Research
Users
Photographers
Sell Photos
Share Photos
Get Inspiration
Build Connections
Designers
Search Photos
Purchase Photos
Photo Enthusiasts
Share Photos
Sell or Buy photos
Follow Photographers
Get Inspiration
Major Objectives
View Photos
Upload Photos
Purchase Photos
Purchase Merchandise
Problem Recognition
Original Website
Visually Overwhelming
Lack Structure and Consistency
Confusing User Journey
Key Insights
Methodology
Heuristics Evaluation
Think-Aloud Protocol
Key Findings
1
Confusing Navigation & UI
2
Difficult Photo Upload Process
3
Inefficient Purchasing Experience
4
Usability & Accessibility Issues
5
Limited Account & Authentication Options
6
Hard-to-Find Support & Help Resources
Proposed Solutions
1
Clear Font Hierarchy
Inter Font Family
H1: Heading
H2:Title
H3: Sub-Title
H4: Sub-Title
H5: Body Highlight
H6: Body
Note - Bold
Note - Regular
2
Strict Grid System
3
Consistent Visual Style
#049ff7
#106ef6
#9247ff
#33333
#e1e1e1
4
Improved Sitemap
5
Structured Information
6
Convenience & Flexibility
7
Design Consistency
Upload Photo Modal
Photo Viewing Modal
Design
Visual Consistency
Home (Landing Page)
Marketplace
Explore
Flexibility & Freedom
Load More & Back to top
Header
Footer
Scenario
Create Account
Create Profile
Subscription
Finish
View Photos
Visibility of Status
Status Bar at Major Photo Pages
Home
Explore
Street Art
Status Bar at Profile-creating Process
Create Profile
Subscripition
Finish
Status Bar at Purchasing process
Your Cart
Your Details
Payment
Finish
Purchase Photos & Merchandise
4-Step Process
Individual Photo Modal
Product Page
Cart Page
Confirmation Page
Upload Photos
Sticky Button
Enhanced Photo Uploading Process with Modal
Modal pops out
Choose Photo
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention
FAQ
Contact Us
Complete
Error Recovery
Error Page
Next Steps &
Considerations
Responsiveness
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
v
ClickASnap
2023
What
Master’s project redesigning ClickASnap, a photo-sharing platform.
Problem
The original site lacked consistency, had a confusing layout, and caused users to struggle with navigation and task completion.
Solution
Conducted user research and evaluation, then built a unified visual system and clearer information architecture—prioritising key user goals and reducing points.
#WebDesign
#UXUI
#UserResearch
#Figma
The Problem-solving Process:
1
Research
2
Problem Recognition
3
Key Insights
4
Proposed Solutions
5
Design
Research
Users
Photographers
Sell Photos
Share Photos
Get Inspiration
Build Connections
Designers
Search Photos
Purchase Photos
Photo Enthusiasts
Share Photos
Sell or Buy photos
Follow Photographers
Get Inspiration
Major Objectives
View Photos
Upload Photos
Purchase Photos
Purchase Merchandise
Problem Recognition
Original Website
Visually Overwhelming
Lack Structure and Consistency
Confusing User Journey
Key Insights
Methodology
Heuristics Evaluation
Think-Aloud Protocol
Key Findings
1
Confusing Navigation & UI
2
Difficult Photo Upload Process
3
Inefficient Purchasing Experience
4
Usability & Accessibility Issues
5
Limited Account & Authentication Options
6
Hard-to-Find Support & Help Resources
Proposed Solutions
1
Clear Font Hierarchy
Inter Font Family
H1: Heading
H2:Title
H3: Sub-Title
H4: Sub-Title
H5: Body Highlight
H6: Body
Note - Bold
Note - Regular
2
Strict Grid System
3
Consistent Visual Style
#049ff7
#106ef6
#9247ff
#33333
#e1e1e1
4
Improved Sitemap
5
Structured Information
6
Convenience & Flexibility
7
Design Consistency
Upload Photo Modal
Photo Viewing Modal
Design
Visual Consistency
Home (Landing Page)
Marketplace
Explore
Flexibility & Freedom
Load More & Back to top
Header
Footer
Scenario
Create Account
Create Profile
Subscription
Finish
View Photos
Visibility of Status
Status Bar at Major Photo Pages
Home
Explore
Street Art
Status Bar at Profile-creating Process
Create Profile
Subscripition
Finish
Status Bar at Purchasing process
Your Cart
Your Details
Payment
Finish
Purchase Photos & Merchandise
4-Step Process
Individual Photo Modal
Product Page
Cart Page
Confirmation Page
Upload Photos
Sticky Button
Enhanced Photo Uploading Process with Modal
Modal pops out
Choose Photo
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention
FAQ
Contact Us
Complete
Error Recovery
Error Page
Next Steps &
Considerations
Responsiveness
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
v
ClickASnap
2023
What
Master’s project redesigning ClickASnap, a photo-sharing platform.
Problem
The original site lacked consistency, had a confusing layout, and caused users to struggle with navigation and task completion.
Solution
Conducted user research and evaluation, then built a unified visual system and clearer information architecture—prioritising key user goals and reducing points.
#WebDesign
#UXUI
#UserResearch
#Figma
The Problem-solving Process:
1
Research
2
Problem Recognition
3
Key Insights
4
Proposed Solutions
5
Design
Research
Users
Photographers
Sell Photos
Share Photos
Get Inspiration
Build Connections
Designers
Search Photos
Purchase Photos
Photo Enthusiasts
Share Photos
Sell or Buy photos
Follow Photographers
Get Inspiration
Major Objectives
View Photos
Upload Photos
Purchase Photos
Purchase Merchandise
Problem Recognition
Original Website
Visually Overwhelming
Lack Structure and Consistency
Confusing User Journey
Key Insights
Methodology
Heuristics Evaluation
Think-Aloud Protocol
Key Findings
1
Confusing Navigation & UI
2
Difficult Photo Upload Process
3
Inefficient Purchasing Experience
4
Usability & Accessibility Issues
5
Limited Account & Authentication Options
6
Hard-to-Find Support & Help Resources
Proposed Solutions
1
Clear Font Hierarchy
Inter Font Family
H1: Heading
H2:Title
H3: Sub-Title
H4: Sub-Title
H5: Body Highlight
H6: Body
Note - Bold
Note - Regular
2
Strict Grid System
3
Consistent Visual Style
#049ff7
#106ef6
#9247ff
#33333
#e1e1e1
4
Improved Sitemap
5
Structured Information
6
Convenience & Flexibility
7
Design Consistency
Upload Photo Modal
Photo Viewing Modal
Design
Visual Consistency
Home (Landing Page)
Marketplace
Explore
Flexibility & Freedom
Load More & Back to top
Header
Footer
Scenario
Create Account
Create Profile
Subscription
Finish
View Photos
Visibility of Status
Status Bar at Major Photo Pages
Home
Explore
Street Art
Status Bar at Profile-creating Process
Create Profile
Subscripition
Finish
Status Bar at Purchasing process
Your Cart
Your Details
Payment
Finish
Purchase Photos & Merchandise
4-Step Process
Individual Photo Modal
Product Page
Cart Page
Confirmation Page
Upload Photos
Sticky Button
Enhanced Photo Uploading Process with Modal
Modal pops out
Choose Photo
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention
FAQ
Contact Us
Complete
Error Recovery
Error Page
Next Steps &
Considerations
Responsiveness
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
v
ClickASnap
2023
What
Master’s project redesigning ClickASnap, a photo-sharing platform.
Problem
The original site lacked consistency, had a confusing layout, and caused users to struggle with navigation and task completion.
Solution
Conducted user research and evaluation, then built a unified visual system and clearer information architecture—prioritising key user goals and reducing points.
#WebDesign
#UXUI
#UserResearch
#Figma
The Problem-solving Process:
1
Research
2
Problem Recognition
3
Key Insights
4
Proposed Solutions
5
Design
Research
Users
Photographers
Sell Photos
Share Photos
Get Inspiration
Build Connections
Designers
Search Photos
Purchase Photos
Photo Enthusiasts
Share Photos
Sell or Buy photos
Follow Photographers
Get Inspiration
Major Objectives
View Photos
Upload Photos
Purchase Photos
Purchase Merchandise
Problem Recognition
Original Website
Visually Overwhelming
Lack Structure and Consistency
Confusing User Journey
Key Insights
Methodology
Heuristics Evaluation
Think-Aloud Protocol
Key Findings
1
Confusing Navigation & UI
2
Difficult Photo Upload Process
3
Inefficient Purchasing Experience
4
Usability & Accessibility Issues
5
Limited Account & Authentication Options
6
Hard-to-Find Support & Help Resources
Proposed Solutions
1
Clear Font Hierarchy
Inter Font Family
H1: Heading
H2:Title
H3: Sub-Title
H4: Sub-Title
H5: Body Highlight
H6: Body
Note - Bold
Note - Regular
2
Strict Grid System
3
Consistent Visual Style
#049ff7
#106ef6
#9247ff
#33333
#e1e1e1
4
Improved Sitemap
5
Structured Information
6
Convenience & Flexibility
7
Design Consistency
Upload Photo Modal
Photo Viewing Modal
Design
Visual Consistency
Home (Landing Page)
Marketplace
Explore
Flexibility & Freedom
Load More & Back to top
Header
Footer
Scenario
Create Account
Create Profile
Subscription
Finish
View Photos
Visibility of Status
Status Bar at Major Photo Pages
Home
Explore
Street Art
Status Bar at Profile-creating Process
Create Profile
Subscripition
Finish
Status Bar at Purchasing process
Your Cart
Your Details
Payment
Finish
Purchase Photos & Merchandise
4-Step Process
Individual Photo Modal
Product Page
Cart Page
Confirmation Page
Upload Photos
Sticky Button
Enhanced Photo Uploading Process with Modal
Modal pops out
Choose Photo
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention
FAQ
Contact Us
Complete
Error Recovery
Error Page
Next Steps & Considerations
Responsiveness
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
v
ClickASnap
2023
What
Master’s project redesigning ClickASnap, a photo-sharing platform.
Problem
The original site lacked consistency, had a confusing layout, and caused users to struggle with navigation and task completion.
Solution
Conducted user research and evaluation, then built a unified visual system and clearer information architecture—prioritising key user goals and reducing points.
#WebDesign
#UXUI
#UserResearch
#Figma
The Problem-solving Process:
1
Research
2
Problem Recognition
3
Key Insights
4
Proposed Solutions
5
Design
Research
Users
Photographers
Sell Photos
Share Photos
Get Inspiration
Build Connections
Designers
To search and purchase stock photos to for designs
Photo Enthusiasts
Share Photos
Sell or Buy photos
Follow Photographers
Get Inspiration
Major Objectives
View Photos
Upload Photos
Purchase Photos
Purchase Merchandise
Problem Recognition
Original Website
Visually Overwhelming
Lack Structure and Consistency
Confusing User Journey
Key Insights
Methodology
Heuristics Evaluation
Think-Aloud Protocol
Key Findings
1
Confusing Navigation & UI
2
Difficult Photo Upload Process
3
Inefficient Purchasing Experience
4
Usability & Accessibility Issues
5
Limited Account & Authentication Options
6
Hard-to-Find Support & Help Resources
Proposed Solutions
1
Clear Font Hierarchy
Inter Font Family
H1: Heading
H2:Title
H3: Sub-Title
H4: Sub-Title
H5: Body Highlight
H6: Body
Note - Bold
Note - Regular
2
Strict Grid System
3
Consistent Visual Style
#049ff7
#106ef6
#9247ff
#33333
#e1e1e1
4
Improved Sitemap
5
Structured Information
6
Convenience & Flexibility
7
Design Consistency
Upload Photo Modal
Photo Viewing Modal
Design
Visual Consistency
Home (Landing Page)
Marketplace
Explore
Flexibility & Freedom
Load More & Back to top
Header
Footer
Scenario
Create Account
Create Profile
Subscription
Finish
View Photos
Visibility of Status
Status Bar at Major Photo Pages
Home
Explore
Street Art
Status Bar at Profile-creating Process
Create Profile
Subscripition
Finish
Status Bar at Purchasing process
Your Cart
Your Details
Payment
Finish
Purchase Photos & Merchandise
4-Step Process
Individual Photo Modal
Product Page
Cart Page
Confirmation Page
Upload Photos
Sticky Button
Enhanced Photo Uploading Process with Modal
Modal pops out
Choose Photo
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention
FAQ
Contact Us
Complete
Error Recovery
Error Page
Next Steps & Considerations
Responsiveness
Current Design only applys to Desktop, will need to further develop for tablet size and phone size to achive full repsonsive expereince
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
v
ClickASnap
2023
What
Master’s project redesigning ClickASnap, a photo-sharing platform.
Problem
The original site lacked consistency, had a confusing layout, and caused users to struggle with navigation and task completion.
Solution
Conducted user research and evaluation, then built a unified visual system and clearer information architecture—prioritising key user goals and reducing points.
#WebDesign
#UXUI
#UserResearch
#Figma
The Problem-solving Process:
1
Research
2
Problem Recognition
3
Key Insights
4
Proposed Solutions
5
Design
Research
Users
Photographers
Sell Photos
Share Photos
Get Inspiration
Build Connections
Designers
Search Photos
Purchase Photos
Photo Enthusiasts
Share Photos
Sell or Buy photos
Follow Photographers
Get Inspiration
Major Objectives
View Photos
Upload Photos
Purchase Photos
Purchase Merchandise
Problem Recognition
Original Website
Visually Overwhelming
Lack Structure and Consistency
Confusing User Journey
Key Insights
Methodology
Heuristics Evaluation
Think-Aloud Protocol
Key Findings
1
Confusing Navigation & UI
2
Difficult Photo Upload Process
3
Inefficient Purchasing Experience
4
Usability & Accessibility Issues
5
Limited Account & Authentication Options
6
Hard-to-Find Support & Help Resources
Proposed Solutions
1
Clear Font Hierarchy
Inter Font Family
H1: Heading
H2:Title
H3: Sub-Title
H4: Sub-Title
H5: Body Highlight
H6: Body
Note - Bold
Note - Regular
2
Strict Grid System
3
Consistent Visual Style
#049ff7
#106ef6
#9247ff
#33333
#e1e1e1
4
Improved Sitemap
5
Structured Information
6
Convenience & Flexibility
7
Design Consistency
Upload Photo Modal
Photo Viewing Modal
Design
Visual Consistency
Home (Landing Page)
Marketplace
Explore
Flexibility & Freedom
Load More & Back to top
Header
Footer
Scenario
Create Account
Create Profile
Subscription
Finish
View Photos
Visibility of Status
Status Bar at Major Photo Pages
Home
Explore
Street Art
Status Bar at Profile-creating Process
Create Profile
Subscripition
Finish
Status Bar at Purchasing process
Your Cart
Your Details
Payment
Finish
Purchase Photos & Merchandise
4-Step Process
Individual Photo Modal
Product Page
Cart Page
Confirmation Page
Upload Photos
Sticky Button
Enhanced Photo Uploading Process with Modal
Modal pops out
Choose Photo
Modal extends if users click Add more photos
Confirmation pops out with suggested actions
Error Prevention & Recovery
Error Prevention
FAQ
Contact Us
Complete
Error Recovery
Error Page
Next Steps &
Considerations
Responsiveness
Current design is optimized for desktop only; further development is needed for tablet and mobile devices to achieve a fully responsive experience.
User Testing
Conduct usability testing to validate assumptions and refine interactions.
Accessibility
v