Venture Frames

03/ Wireframes

I developed mid-fidelity wireframes to define how each solution would live inside the app:

• Version and action history drawers allowing editors to review and revert changes safer.
• Page-level analytics widgets giving real-time visibility into lead engagement and performance.
• Task dashboards managing ownership, reviews, and publishing schedule.
• Optimizely A/B test setup built in-app, as a separate module for PMs.
• A modular Visual Page Builder with real-time previews and drag-and-drop simplicity.

Early click-path testing validated quicker flows, clearer shortcuts, and a much smoother editorial experience.

04/ Concept Designs

In the concept phase, I extended Toptal’s design system to support new workflows. Design focus areas included:

• Visual clarity in the page building and editing interfaces.
• Seamless in-app setup of experiments using Optimizely.
• Easy access to version control and page history.
• Page-level analytics tied to engagement and conversion metrics.
• Integrated AI Talent Recommendation suggestions which reduced manual effort by 1 FTE/month and improved SEO rankings, resulting in a 14% increase in converting leads.
• Smarter dashboard-looking review assignment flows to cut down approval delays.

05/ Final Designs

The final CMS delivered a robust, modular editing platform built for scale and speed including:

• Visual Page Builder with live device preview.
• Integrated A/B testing for sections and copy via Optimizely.
• Editorial Task Dashboard for managing ownerships, reviews, and publishes.
• Smart talent suggestions via Talent Recommendation Engine.
• Streamlined tools for shared components and internal linking.

The UI was refined over multiple testing rounds with real editors to strike the right balance of power and simplicity.

06/ Implementation & Growth

The results were clear immediately after launch:

• 70% faster publishing, with updates live in under 24 hours.
• 85% feature adoption within the first month.
• 90% task success rate across key CMS workflows.
• 40% shorter session length, with users completing tasks in almost 2x less time.

Behind the scenes, our incredible team of 4 back-end, 2 front-end engineers, 2 QAs, and 2 managers worked intensely to build all of this. We ran several usability rounds to make it work smoothly and intuitively.
I’m proud of the collaboration that turned a slow, outdated CMS into a robust, self-serve platform. It evolved from a blocker into a foundation for smarter, more autonomous growth across Toptal’s entire marketing ecosystem.

Closing Thoughts & Lessons Learned

This project showed how thoughtful design can shift the pace of an entire content operation. By embedding experimentation, streamlining reviews, and building confidence into every step, we turned a rigid CMS into a sophisticated yet flexible platform — one that helped teams move 3x faster.

One key lesson: efficiency isn’t just speed — it’s control. Editors didn’t want more features; they wanted visibility. Version history, real-time previews, and simple workflows delivered that. The new CMS isn’t just easier to use — it gives teams the confidence to experiment, iterate, and scale.

It’s a strong foundation to build on, and a reminder of how far good collaboration and design can take you.

04/ Concept Designs

I led the visual evolution of Packiyo’s system, focusing on speed, flexibility, and easier team management. Key improvements included:

• Bottom navigation for fast task switching.
• Live inventory update flows, letting users adjust quantities, locations, and product statuses directly in the web app.
• Permission-based access control, helping teams manage packing staff and supervisors easily through the dashboard.
• Flexible order views with better filtering, sorting, and bulk actions to handle large volumes more smoothly.

We iterated quickly using heatmaps and usability tests, replacing clumsy swipe-to-confirm gestures with simpler tap interactions.

05/ Final Designs

Our final solution consisted of:

• Full-screen Scan & Pack mode with real-time visual feedback.
• Inventory audit workflows with instant discrepancy resolution.
• Batch action processing to speed up supervisor operations.
• Offline scan continuity, allowing workers to complete scans without connection and sync automatically once back online.
• A real-time picking dashboard that prioritises orders by status, location, and urgency, helping staff tackle critical tasks first.

I worked closely with developers to deliver optimised design tokens and platform-specific specs, keeping the experience consistent across mobile and web.

06/ Implementation & Growth

Working hand-in-hand with developers and QA testers during sprints, we ensured that Scan, Confirm, Inventory update and Audit flows were built true to the design intent.
Following launch, Packiyo achieved:

• 85% mobile adoption within 3 weeks.
• 30% faster order processing, reducing it from 150 to 105 seconds per order.
• 40% fewer mobile errors.
• A 2x reduction in training material.

Building on this success, we planned next-phase expansions, including mobile returns workflows and performance dashboards for supervisors.

Closing Thoughts & Lessons Learned

This project reinforced the impact of designing simple, reliable mobile experiences for high-pressure operational environments. By streamlining workflows, introducing real-time feedback, and reducing reliance on heavy training, we helped Packiyo teams move faster and with greater confidence.

However, we failed to anticipate how heavily offline connectivity issues would affect real-world operations. Sync problems under full warehouse load weren’t visible early enough during testing. We also missed the need for better supervisor dashboards at launch, which made it harder for managers to monitor performance during the first rollout. Next time, I would push to stress-test offline flows under realistic conditions and prioritise supervisor tools alongside operator workflows earlier in the design process.

While our work concluded after the initial release, we created a post-MVP improvement list based on user feedback and field observations — highlighting opportunities like expanding offline resilience, adding returns handling workflows, and building supervisor dashboards for better oversight. I’m proud of the foundation we delivered and excited to see how these next phases will help Packiyo continue scaling its warehouse operations.

03/ Functional Specification & Wireframes

I created medium-fidelity wireframes showing:

• Pinned vendor selections, price comparison, matching and merging of items to speed up mapping.
• Export warnings, dynamic reordering and bulk action editing to give control back to the user.
• Log Tab to track item-level changes and movement by user, action, place and time.
• AI-driven suggestions to match quotes to items faster.

04/ Concept Designs

On the visual side, I focused on making the interface clean and easy to handle:

• Dynamic collapsible blocks and zebra-striping to improve scannability and reduce cognitive load, along with switcher to excel view for non-adapting users.
• UoM conversion with a custom query builder and seamless “smart proposal” logic to reduce manual effort
• Multi-currency support with real-time tracking and automatic recalculation of outdated exchange rates
• Mailing assistant with AI-powered email aliasing to parse threads, extract files, and reduce document clutter

Together, these made the UI lighter, faster, and far more manageable — even for dense, multi-step procurement workflows.

05/ Final Designs

Our final solution consisted of:

• A redesigned comparison page with smarter controls, conversions, and itemisation
• AI-assisted matching for faster vendor-to-item mapping
• A flexible import parser removing manual clean-up.
• A new Log Tab showing exactly who made changes, when, and why

We A/B tested key flows with end users to validate efficiency gains and surface edge cases — creating a solid foundation for future enhancements and iterative improvements.

06/ Implementation & Growth

Working closely with developers, I helped deliver:

• Fully tested import parsers and a new audit-log system.
• Validation across 25 real tenders during QA, with 28 issues resolved pre-launch
• 12 UX improvements delivered in a single sprint

After Launch

• Quote-to-BOQ mapping time dropped by 60% (from ~15 minutes to ~6 per tender)
• Export errors fell by 75%, based on user testing
• Unmatched-item clarity received a 4.5/5 satisfaction score
• Full item-level audit trails enabled accurate post-award tracking

The team reported increased confidence in the new flows — and the tested solution gave us a strong base for future improvements.

Closing Thoughts & Lessons Learned

This project reinforced how crucial it is to balance structure with flexibility in procurement tools. By streamlining vendor mapping, cutting down manual clean-up, and adding full audit visibility, we made the entire process faster and easier to trust.

One challenge we underestimated was how much users valued the flexibility of Excel — being able to tweak on the fly or restructure tenders last-minute. Some missed that freedom, so we introduced a toggle between structured and spreadsheet-like views, giving teams the best of both worlds.

It’s a strong starting point, with more to come — smarter suggestions, deeper analytics, and even more flexibility built into future iterations.