Project Files: Lay of the Land
When I joined the project, some groundwork had already been laid. The existing Figma files contained established graphic design elements but lacked a unified design system.
I worked across two separate Figma files: one containing previous exploration work and graphic assets (view-only access), and another serving as my active workspace. Because the team used a free Figma account, I organized hi-fidelity mockups using sections and clear naming conventions to maintain structure and findability.
A previous volunteer designer had established partial UI work for the homepage, catalogue, and product pages, setting a loose precedent for visual style. My focus was to extend this foundation to new workflows and refine usability within the constraints of limited time and feedback availability.
Communications Management: the ACDC principle
Communication followed what I deemed the ACDC principle - Asynchronous, Concise, Direct, and Critical.
When I joined, the project lacked active designers and developer collaboration. The founder, whose first language wasn’t English, preferred written communication. With limited feedback cycles and no agile workflow, I managed progress independently while keeping communication concise. Critique was direct so that both the founder and I were on the same page of what needed to change.
In a discovery call, I clarified the founder’s vision, priorities, and my scope of work. We decided to exchange feedback asynchronously through Figma comments, and to handle logistics via LinkedIn messaging.
To communicate specifics about design work to developers, I left notes beside the relevant work.
Work Environment Setup
Setup
I organized the working file by setting up two main pages: 🔎 Explore and Drafts and 🟢 Completed Designs. Emojis were used in the page names for quick visual recognition. I copied over existing device widths, design motifs, the color palette, and select UI components into the 🔎 Explore and Drafts page for easy reference.
Componentization
I created standardized input fields and buttons with clear state variants (default, populated, error, hover) to ensure consistency across screens. I also replaced mismatched icons with Feather Icons, a free, scalable library, improving visual cohesion and simplifying developer handoff.
Voucher Redemption Page Teardown
I restructured the “Activate Certificate” (voucher redemption) page to clarify information hierarchy—separating primary, secondary, and supplemental details, as well as key interactive components. A short FAQ section that disrupted the flow was identified as nonessential; I recommended either removing it, relocating it to the footer, or linking it from the “Important to Know” section for better focus and usability.
Redesign Workflow and Iterations
To guide the visual design process, I sketched early concepts in conjunction to ideating with Stitch and Uizard AI tools to visualize improvements and define content hierarchy before refining them into polished mockups.
Given the tight timeline, I prioritized iterating on the Redeem a Certificate workflow first. I began with mobile to establish the core information hierarchy, then applied progressive disclosure to expand into desktop and then tablet layouts. Desktop’s larger amount of space meant I had the freedom to add visual motifs, while the tablet version acted as a balanced hybrid of both structures.
AI as a Creative Partner
Ideation Kickstarter: Used ChatGPT a typographic system for Desktop and Mobile, with H1-H4 separate for desktop and mobile, and same body and label text for both
Systemic: Earlier in the design process - Used Stitch to get initial ideas of how to structure certain screens after hierarchical breakdown of “Activate Certificate” page, as well as specific UI such as calendar
Aesthetic: Used Craiyon to generate graphical asset for Contact Us page - retain the delight of the original graphic of the cat on the phone
A screen for redeeming a coupon code. There is a form for redeeming the coupon that has text input fields for coupon #, password, First name, last name. A CTA for activating the certificate is at the bottom of this section. The next section has 5 blocks representing subsections, with one icon and one paragraph of content for each subsection.
Cartoon image of a pudgy cat in an orange jacket holding a landline phone to his ear.
From Visual Polish to Usability Precision
Gift Redemption Workflow
Calendar View in the Voucher Redemption Process: Iterated on date and timeslot selection UI inspired by Google Flights and Mosaic Art Studio Vancouver. Improved contrast, clarity, and responsive consistency across devices.
Homepage and Catalogue
Homepage Hero: Adjusted subheading size and weight for stronger legibility against background photography.
Deals of the Month: Refined discount price styling to make offers more visually prominent and persuasive, making use of the anchoring effect to increase perceived value of the discounted price.
Branding and Legibility Refinements
Catalogue Icons: Recommended replacing neon yellow with primary purple to improve contrast and maintain brand cohesion.
Post-Handoff Feedback
Timezone Coordination: Near project completion, the founder unexpectedly flew overseas. Adjusted communication accordingly and confirmed edit deadlines.
Clear Handoff: Sent a LinkedIn DM two days before project end to clarify that all requested edits could be made until September 8 (end of day, PST). Message was received positively.
Positive Feedback: Founder expressed satisfaction with the final deliverables.
View all mockups in 🟢Completed Designs
Takeaways
Cleanup took more time than anticipated.
Timeline clarity could have been improved by leveraging Figma version history.
Additional enhancements I would have pursued with more time:
Adding microinteractions to enrich the user experience.
Redesigning the email newsletter template to align with the website’s updated visual style.
Explore how Loveable AI might be utilized to bridge design and development.
