2
2
Days research
Days research
2
2
Weeks design
Weeks design
2
2
Personas served
Personas served
Amilia Images
CHALLENGE:
CHALLENGE:
Ecommerce and reservations SaaS needed to increase revenue by increased bookings.
Booking page was missing key functionality.
Ecommerce and reservations SaaS needed to increase revenue by increased bookings.
Booking page was missing key functionality.
SOLUTIONS:
SOLUTIONS:
B2C UI - Customer-facing gallery UI for better booking experience.
B2B UI - Client-facing setup UI for adding galleries to bookable spaces listings.
B2C UI - Customer-facing gallery UI for better booking experience.
B2B UI - Client-facing setup UI for adding galleries to bookable spaces listings.
Rapid design
Rapid design
1 Sprint time allotted (2 weeks)
1 Sprint time allotted (2 weeks)
Intuitive UI
Intuitive UI
Top 7 similar products analyzed for feature intuitiveness
Top 7 similar products analyzed for feature intuitiveness
User personas served
User personas served
Both B2C and B2B UIs created and implemented
Both B2C and B2B UIs created and implemented
Location
Location
Montréal, Canada
Montréal, Canada
Industry
Industry
SaaS
SaaS
Services
Services
UX / UI Design
UX / UI Design
Technology
Technology
Figma
Figma
Link:
Link:
--
Context
Opportunity:
Opportunity:
The image upload feature was created in hurry.
Clients complained only 1 image could be added to a listing.
The image upload feature was created in hurry.
Clients complained only 1 image could be added to a listing.
Constraints:
Constraints:
2 weeks to design and handoff to developers
2 personas (client orgs and end-users) to solve for
Small team - 1PM, 6 developers, 1 designer
2 weeks to design and handoff to developers
2 personas (client orgs and end-users) to solve for
Small team - 1PM, 6 developers, 1 designer
Research
Competitive analysis:
Competitive analysis:
Airbnb
Adobe portfolio
Booking.com
Etsy
Facebook
Duproprio
VRBO
Airbnb
Adobe portfolio
Booking.com
Etsy
Facebook
Duproprio
VRBO
*Chosen because of similar image feature
Competitive breakdown:
Findings:
Feature parity:
Feature parity:
Clickable image carrousel.
Collage view (large cover photo, with smaller tiles indicating amount of remaining images in set.
Available scroll from outside (using mouse or arrow) of image set.
Ability to change cover photo.
Image edit capability (rotate and scale).
Clickable image carrousel.
Collage view (large cover photo, with smaller tiles indicating amount of remaining images in set.
Available scroll from outside (using mouse or arrow) of image set.
Ability to change cover photo.
Image edit capability (rotate and scale).
Nice-to-haves:
Nice-to-haves:
Cover image breadcrumbs.
Display of erroneous image preview for image formatting errors.
Ability to "like" image for favoriting during shopping.
Cover image breadcrumbs.
Display of erroneous image preview for image formatting errors.
Ability to "like" image for favoriting during shopping.
Iterative design:
First Revision
First Revision
Clickable image carrousel.
Collage view (large cover photo, with smaller tiles indicating amount of remaining images in set.
Available scroll from outside (using mouse or arrow) of image set.
Ability to change cover photo.
Image edit capability (rotate and scale).
Display of erroneous image preview for image formatting errors.
Ability to “like” image for favoriting.
Clickable image carrousel.
Collage view (large cover photo, with smaller tiles indicating amount of remaining images in set.
Available scroll from outside (using mouse or arrow) of image set.
Ability to change cover photo.
Image edit capability (rotate and scale).
Display of erroneous image preview for image formatting errors.
Ability to “like” image for favoriting.
Stakeholder feedback:
Constructive and targeted
Constructive and targeted
UI looks great, UX based on common attributes of well-known platforms.
Use of drag-and-drop uploading is a great idea.
Image reordering by dragging is out of scope for MVP. In the final version, I opted for meatball menu "Make Primary" option.
Preview tile of erroneous images is out of scope for the same reason as 3 above. I opted for in-line error messaging.
Due to database architecture, saving or liking not supported.
Much-needed improvement to the product.
UI looks great, UX based on common attributes of well-known platforms.
Use of drag-and-drop uploading is a great idea.
Image reordering by dragging is out of scope for MVP. In the final version, I opted for meatball menu "Make Primary" option.
Preview tile of erroneous images is out of scope for the same reason as 3 above. I opted for in-line error messaging.
Due to database architecture, saving or liking not supported.
Much-needed improvement to the product.
Final feature list:
Takeaways:
Key points:
Key points:
Check in with engineering early in the process to learn about technical constraints, before starting design.
During the build, technical limits not found earlier can come up.
Code demos are crucial to ensure alignment with the design recommendations, make compromises towards user-centered-design.
Check in with engineering early in the process to learn about technical constraints, before starting design.
During the build, technical limits not found earlier can come up.
Code demos are crucial to ensure alignment with the design recommendations, make compromises towards user-centered-design.
Justin Penney
ADP List mentor
Services
Strategic product design
Growth web design
Connect on LinkedIn
Justin Penney
ADP List mentor
Services
Strategic product design
Growth web design
Connect on LinkedIn
Justin Penney
ADP List mentor
Services
Strategic product design
Growth web design
Connect on LinkedIn