Swiftly
Helping small kiwi stores sell stuff online.

Website: Swiftly.nz
Demo store: Swift Donuts


Credits
Walter Lim — UX, UI, Frontend
Will Seagar — Full stack dev
Matt Weston — Full stack dev, AWS Infra

Challenge
During the 2020 COVID lockdown, three friends got together as a product team and used their skills to make life easier for fellow kiwis at the Hack the Crisis hackathon.

Response
We designed and built a simple ecommerce system in 48 hours with three people. To date, we've helped 850+ stores earn over $200,000 in revenue as COVID continues to affect trade.

Initial steps


We started by choosing a hypothesis. "How hard is it to sell online?"

The entire team performed quick & dirty ethnographic research remotely with small businesses, as well as usability testing on competing products. It turns out that only half of our surveyed businesses were able to sell online, and many small businesses struggled with incumbent offerings.

One of the participants took hours to create a Shopify store, and many participants ended up either failing to complete the test, or quitting in frustration. To avoid contamination, we told them nothing about our hypothesis, and that we were just interested in how they ran their businesses during COVID.

As a team, we then synthesized the research into user needs, which were then mapped into functional requirements, user flows and a sitemap. The fact that we also had to legally comply with lockdown requirements also added additional constraints to design and development.

We then mapped out the data into a simple schema, and split the work responsibilities between functionality and markup so that development could begin as barebones functionality while I fleshed out the rest of the user flows and design.

Draft documentation Draft documentation

Lo-fi prototyping


To keep things in sync as a remote team, we livestreamed the designs as they were being mocked and collaboratively proposed designs to each other as the wireframes developed. Lo-fi designs that only demonstrated the happy path as well as expected behavior were explored, and subsequently developed in parallel as the high fidelity designs were put together.

Draft documentation Draft documentation

Hi-fi prototyping


By the time the functionality was built with barely any CSS markup, the high fidelity designs were done. Given that we only had 48 hours to ship, I made extensive use of Uber's Base Web component library to save time and not have to deal with tricky components like complex inputs. After completing the hi-fi designs, I joined the rest of the team on development by writing frontend code and polishing bits of the user flows that needed attention.

Draft documentation Draft documentation

Frontend development


Most of my remaining time was spent writing react components, and cleaning up how components behaved responsively. I don't have many screenshots unfortunately, nor is the repository public, but I can show how I review responsive behavior here. I usually pair a tool called Solis with Visual Studio Code... Unless you want some screenshots of a Code Editor or IDE? 😅

Draft documentation Draft documentation

Post-launch


An hour after we launched Swiftly, we had ten organic signups. After a week, we had about 200. To date, we've helped 850+ stores earn over $200,000 in revenue. While the service is still running, we've had to grandfather the free tier and only offer a free trial to new signups going forward - the cost of hosting all the free accounts grew too large to bear 😅

Draft documentation

Managing design workflows in Figma after the hackathon


To be cheap and cost effective, we kept everything in a single free Figma account. Shipped designs were archived in one page, WIP designs were in another, as well as a page for shelved work.

Draft documentation Draft documentation Draft documentation

Go back to main page