SALES & INSIGHTS
MY ROLE
Sole UX/UI Designer
User Research
Usability testing
Visual design
Product Manager
PLATFORM
iOS
Android
Web App
TIMELINE
2021 Q1 - 2022 Q2
Working on multiple features
Usability testing + design iterations
Design evolution over 6+ months
When I took on this role in early 2021 I had previously worked with graphic design, so I did know basic design principles, but I had no prior experience or education in actual UX / UI design. I taught myself as I went along — by analyzing other apps, scrolling through design inspiration sites, watching tutorials, etc — but you can clearly see how my understanding of UX and UI grew stronger over the course of the year of working for GuidePal as the sole UI / UX Designer.
I’m laughing at some of my early design choices now, but I think it’s important to show how I got from A to B to C, and I’m proud of the progress I made in a short amount of time.
Dashboard & Insights page
v. 1 — February 2021
v. 2 — April 2021
v.2 IMPROVEMENTS:
Added a toggle to switch stats between “All time”, “Today”, “This week” or “This month”.
Updated fonts, some color choices, and flipped the Guide thumbnails from vertical to portrait mode, to match the cropping of the actual cover photos.
Simplified the Insights page and added a text box with some information about payments.
Note — The reason there was no major progress or design updates on these pages between Apr 2021 and Jan 2022 was because I was working on all pages and features of the app over the course of a year, and this was the very last project that we tackled before the beta launch, since it wasn’t being used until then.
v. 3 (Final) — January 2022
v.3 IMPROVEMENTS:
Separated the Insights page from the “Create a Guide” Dashboard and made two separate buttons for the pages in the bottom navigation.
On the Guide Dashboard page, I added an overlay on top of each guide showing how much money each guide has generated and how many times it’s been bought.
On the Insights page, I created a navigation at the top to quickly flip between Insights / Stats and Payouts.
Updated fonts again, added more functionality, and added some visual representation in form of graphs of the monthly and daily statistics.
Added a FAQ section with a dropdown toggle for each question.
Added a page where the user can access all of their monthly earnings reports.
A problem we ran into…
Instagram’s web browser limitations
GuidePal allows influencers to create guides, that they then promote to their followers on their own social media channels. This means that most people who are buying a guide for the first time does not have the GuidePal app installed, and instead they are viewing the guide in the web app (an almost identical, slightly simplified, version of the app that opens in a web browser).
When designing, building & testing the web app we had implemented the option for “Quick Checkout” using either Stripe Pay, Apple Pay or Google Pay, depending on if you were using iOS or Android, and Safari or Chrome.
But we ran into a big problem: when running the first user tests, we saw that we had a 100% drop off rate. Yikes!
We discovered that when Creators were promoting their guides on social media, the potential Buyers weren’t actually opening the guide in Chrome or Safari — the guide would open in the built-in Instagram browser, or TikTok browser (where ever the Creator linked to it) — something that none of us had taken into consideration or tested. And it turned out that these social media browsers did not support any of the quick pay options, and most people did not have any saved credit card information in these browsers either.
This created a huge barrier for the first purchase. Instead of it taking a few seconds and 1 button click to buy a guide, someone would have to go get their wallet and then manually type in all their card details first, which could take several minutes.
The solution…
API text messages
Step 1. Once a user has viewed the free preview of the guide and decided to hit the “Buy”-button to unlock the full guide, it triggers a pop up that asks for the users phone number to complete purchase.
Step 1b. A confirmation message is shown.
Step 2. The user receives a text message with the link to the checkout page for the guide they want to purchase, which opens up in their preferred web browser (Safari or Chrome for example), where they can now buy the app with one click using Stripe Pay, Apple Pay or Google Pay.
Step 3. After purchasing the guide, the user receives a confirmation text message with a link to open the guide. This makes it easy for the user to go back to the guide whenever they want as well.
After implementing this change, we sad a huge reduction in drop-off rate — and another positive outcome was that we were now able to collect buyers phone numbers, and could automatically link their purchases to it. So if they decide to download the app and create an account in the future, they will automatically have all their previous guide purchases already available in their account.
ABOUT THIS PROJECT
The Sales & Insights was probably my biggest and most complex project I’ve worked on. Besides the obvious part of designing a sleek & well-functioning app interface, I also had to figure out how to:
— Report the Creator’s monthly earnings, and how to display subtracted fees and more, both in-app and using API emails.
— Optimize the purchase flow for buyers across all devices and web browsers.
— Optimize the Stripe sign up process, which Creators had to go through to be able to get paid from GuidePal.
— Send out payment confirmations and receipts after a purchase.
ABOUT GUIDEPAL
GuidePal is an iOS, Android & web app service for creating and selling location-based guides, with content creators and influencers as the target audience.
MY ROLE
I was the sole Product Designer leading this project between Q1 2021 - Q2 2022, ideating early concepts, creating all designs from first to final versions, presenting regularly to leadership, and delivering final assets for production. I was also simultaneously the sole Product Manager / Head of Product for the company, leading a team of 4 engineers, and working closely with Marketing, Comms, Legal, and the CEO and board.