Buy a bouquet
For the "Buy a bouquet" online store, I redesigned the e-commerce platform to enhance user experience and support business scalability. Conducted competitor analysis, optimized the homepage structure, improved navigation, added promotional blocks, and revamped product cards. Provided four color scheme options, with the client choosing a dark green design. Added profile features, order tracking, and a dropdown bouquet catalog for better usability.
Date
January 2024
Role
Web developer, UI/UX designer, SEO specialist, Project manager, Content strategist
BUSINESS GOALS
- SCALING: EXPAND SALES POINTS AND ATTRACT NEW PARTNERS FOR JOINT TRADING.
- INCREASE SALES: IMPROVE USER EXPERIENCE AND IMPLEMENT NEW MARKETING TOOLS.
PROBLEMS
- LOW CONVERSION DUE TO OUTDATED INTERFACE.
- CURRENT STRUCTURE AND FUNCTIONALITY STRUGGLE WITH ORDER VOLUME GROWTH AND ASSORTMENT EXPANSION, HINDERING BUSINESS SCALING.
RESEARCH
WE DID A DEEP ANALYSIS OF ANALOGICAL SERVICES AND CONCURRENTS, studied the product cards, the shopping cart and the ORDER FUNCTIONAL. COLLECTED POPULAR PATTERNS FROM MAJOR E-COMMERCE SITES AND LINKS TO THEM TO IMPROVE THE DESIGN OF THE “BUYBOOKLET”. THIS DATA HELPED OPTIMIZE THE USER EXPERIENCE AND APPEARANCE OF THE SITE.
COLOR SCHEME SELECTION
OUR TEAM PRESENTED 4 COLOR SCHEME OPTIONS WITH A HOMEPAGE MOCKUP. THE CLIENT CHOSE A DARK GREEN OPTION THAT FULLY MET THEIR EXPECTATIONS.
FINAL DESIGN
THE HOMEPAGE STRUCTURE WAS COMPLETELY REDESIGNED. NEW NAVIGATION WAS CREATED, INCLUDING PROFILE FUNCTIONALITY, ORDER TRACKING, AND A DROPDOWN CATALOG OF BOUQUET SUBCATEGORIES. A CATEGORY SLIDER WITH IMAGES WAS ADDED FOR QUICK SEARCH, ALONG WITH PROMO BLOCKS FOR DEALS AND POPULAR PRODUCTS. ADVANTAGES, REVIEWS, AND FAQ BLOCKS WERE OPTIMIZED FOR THE NEW UI.
BEFORE
AFTER
PRODUCT CARD
THE NEW PRODUCT CARD INCLUDES A FAVORITE ICON AND A BADGE FOR PROMOTIONAL OFFER TYPE. ON HOVER, THE CARD EXPANDS TO SHOW A ‘BUY NOW’ BUTTON AND A LIST OF BOUQUET COMPONENTS.
BEFORE
AFTER
CATALOG
THE OLD CATALOG FILTERING WAS INCONVENIENT AND REQUIRED TOO MANY CLICKS. I REWORKED THE ARCHITECTURE TO MAKE FILTERS MORE ACCESSIBLE AND ADDED CHIPS FOR SELECTED PARAMETERS THAT CAN BE EASILY MODIFIED. THIS SIMPLIFIED SEARCH AND REDUCED THE NUMBER OF STEPS.
BEFORE
AFTER
PRODUCT PAGE
THE NEW PRODUCT PAGE FEATURES A PHOTO SLIDER AND STRUCTURED PRODUCT INFORMATION. NOW INCLUDES A ‘BUY NOW’ BUTTON AND DELIVERY DETAILS. ALSO ADDED A RECOMMENDED PRODUCTS SECTION TO HELP INCREASE AVERAGE ORDER VALUE.
BEFORE
AFTER
«BUY NOW» FUNCTION
CLICKING «BUY NOW» OPENS A MODAL WINDOW WHERE THE USER ENTERS ONLY THEIR PHONE NUMBER. A MANAGER THEN CALLS BACK TO CONFIRM DETAILS AND FINALIZE THE ORDER.
CART
THE OLD CART WAS OVERLOADED WITH FIELDS, DISCOURAGING USERS.
IN THE NEW VERSION, THE LEFT SIDE DISPLAYS A PRODUCT LIST WITH OPTIONS TO ADJUST QUANTITY AND ADD A CARD TO BOUQUETS. THE RIGHT SIDE FEATURES CHECKOUT WITH DELIVERY INFORMATION, TOTAL COST, AND TWO BUTTONS: ‘BUY NOW’ (ORDER VIA CALL) AND ‘CHECKOUT’ (SELF-SERVICE ORDER).
BEFORE
AFTER
CHECKOUT PROCESS
WE REWORKED THE CHECKOUT STRUCTURE TO MAKE IT MORE USER-FRIENDLY AND LOGICAL. NOW FIELD COMPLETION IS FASTER AND EASIER.
OTHER SCREENS
CREATED PLACEHOLDERS FOR EMPTY SCREENS AND AN INFORMATION SECTION WITH USEFUL CONTENT. THE DASHBOARD INCLUDES ORDERS, FAVORITES, AND PROFILE SETTINGS.
RESPONSIVE DESIGNS
CREATED RESPONSIVE DESIGNS FOR TABLET AND MOBILE WITH A BOTTOM TAB BAR TO SIMPLIFY NAVIGATION AND MAKE SITE USAGE MORE INTUITIVE.
RESULTS
COMPLETELY REDESIGNED ONLINE STORE WITH FUTURE SCALABILITY IN MIND.
SPLIT THE PROJECT INTO TWO RELEASES, ACCELERATING LAUNCH BY 2 MONTHS.
IMPLEMENTED ‘BUY BOUQUET NOW’ FUNCTION, REDUCING ORDER TIME BY 30%.
ADDED SLIDERS WITH ADDITIONAL OFFERS, INCREASING AVERAGE ORDER VALUE BY 15%.
REDESIGNED CATALOG PAGE WITH CONVENIENT FILTERS AND CHIPS FOR QUICK SEARCH.
CREATED RESPONSIVE DESIGNS FOR TABLET AND MOBILE, IMPROVING USER EXPERIENCE.