As the design lead on this project, my responsibilities included research, design, prototyping, usability testing, front-end development, and product management.
When I was asked to join this project, very little work had been done to determine what was actually wrong with our checkout. All we knew was that we were updating our technological infrastructure and that this presented us an opportunity to update the design as well.
With the little information we had at the outset, I proposed that we started with a research spike to understand the challenges we were facing. Over a two week period I conducted the following activities: stakeholder interviews, data analysis, competitor review, and surveys. The data I collected gave us a clear sense of where we were falling short and helped us identify some possible directions forward to improve the design.
Equipped with this information, I was able to put together a comprehensive project brief that highlighted our goals, metrics, and launch plan. I also began sketching different approaches, with a mobile first mindset, and shared them with folks from across the company for their input. I went through a couple rounds of feedback and iterating before moving into higher fidelity mockups, which included desktop designs, and repeated the process of collecting feedback and refining the design. Within the span of another two weeks, I had a design that was good enough to start prototyping and testing.
The prototype not only helped us collect feedback from our customers and iterate on our designs but also helped in the development process. It provided us a source of truth to work through various interactions and let us experiment with some of the latest front-end technology. As the developers worked their magic on all things back end, I played a crucial role building out the front-end for our new checkout. This gave the developers the opportunity to focus on bigger, more complex tasks while I sweated the details and helped the project proceed more rapidly.
Once we were ready to go live, we staged our release starting with a small audience to make sure we weren't having a negative impact on our revenue. We waited a couple days to ramp up our test cell and eventually worked through a number of iterations until we landed on a final design.
After 2 months of testing, and a roller coaster of emotions, we were able to increase our overall purchase rate by 5% globally. Digging into more specifics, we saw our biggest gains on mobile where we increased conversions by 27%.
WordPress.com is a hosted version of the popular content management system that powers over 34% of sites on the internet. From mid 2018 to late 2019, I served as the Design Director for WordPress.com’s onboarding flow. My responsibilities included partnering with an engineering lead to manage a team of designers and developers, setting the onboarding product vision and strategy, doing quality assurance on design and development, running usability tests and competitor analysis, performing quantitative and qualitative analysis, and reporting.
When we started working on WordPress.com’s onboarding, millions of people were visiting WordPress.com every month to create a site and yet only a fraction of them succeeded. A small percentage of those visitors became paying customers that quickly refunded within their first couple days.
To get a better understanding of what was happening, we kicked things off with a usability test of our existing onboarding experience. I lead the efforts to interview eight participants over the span of a week and synthesized the results. We learned a lot but our biggest takeaways were that it was not clear to our participants what they were signing up for, they didn’t know what to do after their site had been created, they expected their sites to be hidden from the public until they were happy to publish them, they found our product overwhelming and hard to use, and it was difficult for them to create content.
Working with my engineering partner, we brought our teams together in a design sprint fashion to design an ideal end state. We started with a high level flow diagram of what we wanted to create and worked through quick iterative cycles to produce a prototype that made the following bets:
Introducing a preview of the site in our signup flow will help people better understand what they’re working towards and therefore lead to more sites being created.
Pre-filling our new sites with relevant starter content would help people get up and running quicker.
Setting a site to hidden after it was created would better align with our customers’ expectations and offer a new customer centric metric to measure our success.
Guiding people with next steps after they signed up will keep them engaged, teach them how to use the product, and help them achieve their ideal end state.
We had a lot of work to do and so I worked with my engineering partner to break things down into smaller chunks that we could implement and measure at a regular cadence. I also took some time upfront to figure out what kind of data we needed to collect and worked with our data team to design the reports that I published on a weekly basis. While we got to work on our our first milestone, I ran another usability test on our ideal end state to see how it compared to our existing experience. It was a crude prototype but it got the point across, highlighted some changes we needed to make, and validated the direction we were heading in.
As we worked through each milestone, I worked really closely with the engineering team helping them prioritize their work and testing new features before we launched them — there were a number of times I’d get right in there and fix some bugs myself. I also continued to run regular usability studies after each major milestone which helped us understand the numbers we were seeing and course correct our design for a better outcome. While we brought our initial vision to life, I continued to work with the design team to think ahead and experiment with different approaches to see what we could learn. There were times that paid off and we incorporated some of thinking into our existing work.
Over the course of a year we built and tested a lot of changes to our onboarding experience and we had our shares of ups and downs. The biggest takeaway during this time for me came from our usability testing and working closely with our customers. The regular contact allowed us to make changes on the fly and showed in the impact we made by increasing our purchase rate by 23% and reducing our churn by 21%.
Shopify Partner Program
The Shopify Partners team fosters a community of designers and developers that build Shopify stores for their clients and was responsible for 30% of Shopify’s revenue in 2016. As their first Operations Manager, I worked with a handful of team leads to set the strategy and vision for the greater team, defined the product roadmap, conducted product and user research, performed qualitative and quantitative analysis, give design feedback and direction, trained other employees, and reported the progress for our team.
Shopify’s Partners team had grown to over 50 people and it was getting harder to keep them aligned. They were comprised of a number of smaller teams that didn’t regularly speak, duplicated efforts, and worked towards different objectives. I was hired as the team’s first Operations Manager to bring them together and help them achieve their maximum potential.
I was drawn to this particular role because there was a product management aspect to it but there was a lot more to it that I didn’t know. My first instinct as a designer was to dive right in and to see what it I could learn. I spent my first two weeks talking to customers and stakeholders on the team, combing through our reports, and reviewing our competitors’ offerings. By the end of it things started to come together and I was able to paint a picture in my mind of the work that we had to do.
I assembled the team and facilitated a couple sessions where we created our vision for what we wanted the Shopify Partner program to be. We then broke off into the sub teams where I worked with them to identify their key metrics and helped them draft roadmaps to achieve the goals we set. Shopify had been developing a unified process to project management which I began to implement across the teams so we could start speaking the same language and get more ideas off the ground. Inspired by Shopify’s values of giving people the information they need to make good decisions, I designed and implemented new reports that we could use to measure our impact and report our progress up the chain in a clear and succinct manor.
During my time as Shopify’s Partners Operations Manager the team began to work closer and deliver more consistently. We implemented a number of projects that lead us through four successful quarters with double digit growth — we could see this clearly in our dashboards.
One of my proudest achievements was helping to usher the Shopify Partners Academy into this world. The Academy was an online training program where anyone with an internet connection could go learn how to build ecommerce businesses with Shopify and promote themselves as a Shopify Partner. It not only created opportunities for people all over the world but also helped our business grow.
Shopify Developer portal
As the lead designer on the project, I collaborated with a product manager and front-end developer to help this project through. My responsibilities included information architecture, market scans and competitor research, internal and external stakeholder interviews, landing page design, copywriting, and illustration.
Up until mid 2015, Shopify had a number of tools, resources, and APIs scattered all over their web properties for developers to find. There wasn’t a single place where they could go to learn about all of Shopify’s APIs and the resources available to them if they wanted to build an app.
Our bet was that if we created a home for all our documentation and resources then we would see an increase in the number and quality of apps being produced.
My first order of business was to make an inventory of all the content we had available to us. I scoured our sites and spoke to a number of teams and stakeholders to leave no stone left unturned. Once I had that all in front of me, I was able to organize it in a way that aligned with the way similar businesses were doing it as well as what I had heard from our customers. I worked with some copywriters to develop a concept and wireframed some comps about how a unifying portal page would be structured. Our “fresh eyes” design critiques were helpful for getting feedback from designers and developers across the company which I believe helped me improve my design.
With all our major stakeholders onboard and the design concept solidified, I began working with a front-end development partner and applied Shopify’s design system to the wireframes. While we worked on implementing the designs, I also whipped up some illustrations, using our illustration guidelines, to bring the page to life.
After two short months, we had a brand new developer portal where developers could go to learn about all the tools, resources, and APIs available to them on the Shopify platform. The work we did over four years ago laid the foundation for what’s still mostly in place today and helped us improve the quality, quantity, and diversity of apps being submitted to the app store.
As the lead designer on this project, I did the research, design, and assisted with development. My responsibilities included stakeholder interviews, competitor analysis, content inventory, brand style guide, information architecture, mood boards, visual design, and front-end development.
A year after it was created, the Shopify Plus team learned a lot about who they were and the product they were offering. The brand they had set out with in the beginning of their journey remained the same and fell out of touch with the customers they were going after.
After a year without any changes, I was given full reign to redesign the Shopify Plus website and in essence redefine their whole brand. Things started with a quick round of research for me to wrap my head around the problems we had with the old site and how we wanted to be perceived with the new site. I conducted stakeholder interviews with the executive team and some of our top customers, took a content inventory of the old site, did a quantitative review of the metrics, and performed a competitor analysis.
The data I collected in the research phase lead to the creation of a brand guide and values document which we used to inform the design for the rest the project. My first deliverables were a series of mood boards with photos, colours, images, and swatches that presented different approaches we could take. After negotiating a direction, I used the new information architecture and wireframes, with all the copy I wrote, to design responsive layouts for desktop and mobile devices. As the development locked into gear, I was a regular contributor to the efforts and also played an active role in all the quality assurance.
We collected both qualitative and quantitative data to measure the effectiveness of the new design after it launched. It was successful not only based on how our customers perceived us but also by the number, and quality, of leads we were collecting. I am glad to see that there are parts of my design that still live on in Shopify Plus’ brand today.
In early 2014, Rogers Communications launched an online video streaming service to the Canadian market. A couple months earlier, they contracted You.i TV, the company I worked for, to design and build Shomi’s first generation of mobile apps.
As the lead designer for the account, I was responsible for managing a close relationship with our client, overseeing all design deliverables, directing other designers, and collaborating with the engineering team.
When Shomi launched, it was the new online streaming service on the block and it was going up against some stiff competition with Netflix — it needed a way to stand out. They believed they could do that by offering the best mobile experience paired with staff, and celebrity, curated movie collections from their TV show and movie library.
When we started this project, we joined an existing group of contractors that had already started working with the brand and the web based experience. We were on a tight timeline and had to catch up with the web team to meet the launch deadline. While the engineering team started planning their technical architecture, I worked closely with Shomi’s product mangers and our engineering lead to define all the use cases we would cover in our first release.
Once we had the scope defined, I started rapidly mapping the various parts of the app with information architecture, wireflow, and storyboard diagrams. These artifacts facilitated lots of great conversations with our client, the engineers, and our other designers. We iterated on them a number of times as they evolved into higher fidelity wireframes which we used to implement a framework where we could work on the visual designs and animations right in the code. Thanks to You.i’s proprietary technology, we could prototype and test or designs with small focus groups very early in the process.
Things got really tense as we got close to the deadline but we made it and delivered on time. Shomi was launched successfully and was well received by its customers. It operated for roughly two years until it shut down due to the challenging climate of the online video marketplace in Canada.