Walter Lim — UX, UI, Frontend
Will Seagar — Full stack dev
Matt Weston — Full stack dev, AWS Infra
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.
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.
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.
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.
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.
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? 😅
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 😅
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.