EXPERIENCE

Selleb

2024

Your destination for verified shopping insights.

links

At Selleb, we are revolutionizing product recommendations. In an era where authenticity is eclipsed by sponsored content and AI-generated reviews, our commitment is unwavering: to restore lost trust and ensure absolute accountability. Every recommendation on our platform carries the weight of proof: a tangible receipt, a real person.

Onboarding Tutorial screens

The onboarding tutorial is a critical first step in user engagement. We want to bridge the knowledge gap, ensuring initial curiosity and that users grasp the app's core functionalities. This process started off with two initial iterations.

The first iteration was too simple and lacked essential visuals, such as screenshots of the app. It failed to demonstrate the key process of sending receipts.

Although the second iteration included a screenshot to illustrate the process of sharing receipts, the second step of guiding users on how to save posts with coachmarks fell short in visual appeal and engagement.

Final design

The final design took learnings from both the first and second iteration, presenting a streamlined three-step process that guides users through the app's core functionalites. Each step is accompanied with relevant and visually engaging screenshots, covering the critical actions of sending receipts, saving posts, and viewing products.

In development, I coded a two image slider that is relevant to the first step of sharing your receipts. This approach not only enhances user engagement and understanding by providing clear, step-by-step visual cues, but also crafts a welcoming onboarding experience.

Prototyping slide-up half sheet menus in Figma and SwiftUI

Valuing intuitiveness and discoverability, I developed slide-up half menu sheets in SwiftUI and Figma for how users can easily discover and understand the functionality of the half menu sheet. This includes an "invites" popup, as well as the comment section in a post.

Block and Report flow

The block/report flow is sensitive and critical to the user's sense of safety and satisfaction with the app. This requires the flow to be straightforward and easy to understand, minimizing confusion and cognitive load.

The "unblock user" flow was developed with the usage of snackbar messages. This was an effective way to provide users with a brief feedback of success or error messages without interrupting their flow. The messages are highly visible without overshadowing or blocking important content or other actions the user wishes to take on the screen.

Password flow

Similarly, I crafted a password login flow with snackbar messages and designed any subsequent error messages that may occur for the user.

Final design

However, I ended up transitioning to a Supabase sign-in with magic link through email. This was due to security concerns with weak passwords, friction in user experience, and a simplified login flow. Using a magic link sign-in process led to a prompt email delivery that leads them right to the homepage.

I developed deep linking functions in Swift in order to redirect the users back to the app after the sign-in link was clicked in the email. I also developed an API call to use the Supabase signInWithOTP() function.

My Profile & Settings

Turning Figma mockups into pixel-perfect, responsive user interfaces using Swift.

To view mockups, visit this site on desktop.

Last updated on July 20, 2024, 5:46 PM EST