I've been working as a Senior Product Designer at Shopify on the Point of Sale team. It’s my job to test and validate designs that will grow Shopify's POS user base, retain new users, and increase overall sales. Check out designs from recent projects below or head over to my journal page to read about some of my design thinking.
One of the projects I worked on at Wattpad was optimizing the design of our app on the iPad. As part of optimizing the design, there was an opportunity to create an interaction that gave a sense of place and reduced the number of overall taps a user had to take to navigate between stories.
Included in the iPad design optimizations was simplifying Library management. Turning the navigation bar to a different colour helped users understand when they were in edit mode.
Another area of the app that was overhauled during iPad optimizations was News Feed or the Feed on a user’s profile.
More shots from the iPad design optimizations.
Adding value propositions on the landing page for Wattpad helped with sign up conversions and higher retention. Read more.
I added value props on our iOS and Android apps but we saw no affect on sign ups or retention so we removed it. Read more.
Email and username suggestions, error and success interactions, and progress animations were used to help increase sign ups in this mobile redesign. After signing up, users start onboarding by selecting their age and gender. I added emojis to this screen which increased our retention and success rate of capturing age and gender information.
For redesigning the Get Mobile page, I focused on letting users know what value they'll get by taking stories with them on mobile.
What the Get Mobile page looked like on mobile web browsers.
When we redesigned our iOS app from the ground up I worked a lot on adding micro-interactions. The first one: informing the user that the app was loading content.
More micro-interactions: adding a story to your Library, creating or continuing to edit an existing story, and voting on a story.
Tapping the pencil will animate it into an X. It then reverts to a pencil if you close the popup or tap the X.
Since our platform was about reading and writing, I explored a pull to refresh micro-interactions based on the different genres people read on our platform. Here are two of them.
To help increase user retention and reading time, I added the ability to find friends to follow during our app’s onboarding. Users could also follow popular Wattpad users and invite any friend that they didn’t already see on the platform. Read more.
This is the Find Friends tablet design.
Find Friends web and mobile web designs.
Users were most likely to share something they enjoyed reading when they finished a story. So, at the end of a story I encouraged users to share by adding a finished reading animation plus a send to a friend call to action.
This design focused on allowing existing users to invite friends to Wattpad.
This is a shot of the 8 different variants of metadata on Wattpad's story discover page that I made. We tested which set of metadata had the most impact in order to determine the correct metadata to show our users. Read more.
We tested adding a value proposition on the importance of enabling notifications. In this shot, the value prop design is added underneath the system alert making non-customizable alert look customized.
Another successful growth experiment where I designed an inline call to action that forced a user to sign up if they wanted to continue reading the story.
On mobile web, I created a banner that was sticky to the top of the page. We tested and discovered that doing a banner like this outperformed the system banner provided by Apple.
We introduced a new way to recommend stories based on your Facebook Like information. That meant that we needed to ask users for their permission to look at their Facebook Likes. This is a shot of what that looked like on mobile and web.
This is video walkthrough of Covers for iOS, a cover creator for your stories on Wattpad. Born from a hack project, I first designed and developed the app for iOS before releasing it on Android. Covers now has over 3 million downloads and 40,000 people using it a day on both platforms. In this video, you can also see the 500px integration to help users find even more images for story covers.
Close-up of the login screen for iOS.
A few screens from Covers on the iPad.
A few screens from the Android version of Covers.
This is a shot of the three controls for editing text: keyboard for text input, colour, and font styling.
This is the launcher icon for Android.
The app icon for iOS.
Clubs came from another Hack Day project. I designed and developed this app in Swift. Clubs was the mobile version of the book clubs’ section of our website.
Above is the workflow a user would take to create a new club.
The icon is a representation of the app's use of colour with splashes of paint.
Similar to the splashes of paint on the icon, I used more splashes for the app load animation and login screen.
A close up of the paint splashes on the Clubs logo animation that I made in After Effects.
This is a video walkthrough of the Apple Watch App I made for Wattpad. Built for writers, the app updates writers on their story Read and Vote counts.
This is the design for the landing page on desktop web for Gourmet Lab, a health and wellness food delivery company.
A video walkthrough of Gourmet Lab's landing page on mobile web.
A close-up of the meal plan selection table.
A shot from the sign up on desktop web.
Sign up screens on mobile web.
A shot from the customer's account management page.
This is the iOS app design for Seat - part of an in-seat service food and beverage platform I designed and developed
Ordering and reording food to your seat made easy.
Seat is available for both iOS, Android, and has a port to Blackberry.
While Seat is made for the customer, Venue App is made for the venue's kitchen to take and fill customer orders from Seat. Venue App, only on iOS, can also control inventory as well as generate sale reports and customer analytics.
This is a shot of some icon exploration for Seat and Venue.
This is the final set of icons I used for both apps.
I created these business cards as part of Seat's branding.
This is the design for Seat's app icon on iOS.
Venue's app icon
Owly is a concept app I explored where users can find out what clothes and products are in the movie/tv show that they are watching. Users could then buy them right from the app. This is a screen from the app I designed and developed in Swift.
Close-up of the Owly app icon.
One of my very first app designs. I just finished working as a personal trainer at Apple when I thought about releasing an app that could teach people the same lessons I taught in Apple Retail Stores. This concept for an app would allow users to watch a few chapters from each topic and buy the remaining tutorials via an in app purchase. One thing I tried with this app was to use only two colours on all of the screens.
Icon work for each topic on Appleseed Training.
The app icon design for Appleseed Training.