exp. design

Clark

Clark is an ed-tech startup bridging the education gap by providing tools to help independent educators grow their businesses. I provided design and development services to support the initial product launch and marketing campaign. I used their existing brand identity elements, including the logo, typography, colors, and illustrations, and extended them into the following deliverables.

In addition to designing these assets, I engineered the UI of the marketing site, sign-up flow, and marketing email templates. I created a light design system using a customized version of the Material Web Components and a CSS utility library. This design system utilized design tokens from the brand identity to customize the components in the library.

Marketing site design and development

Screenshot of the hiclark.com homepage.
The homepage of the hiclark.com marketing site catering to tutors looking to scale their business.
Screenshot of the parent landing page for hiclark.com.
The landing page for parents looking for tutors on Clark.
Screenshot of page promoting Clark's appearance on Planet of the Apps.
The landing page promoting Clark's appearance on Apple TV's Planet of the Apps.

Social media marketing assets

Screenshots of Facebook ad assets.
Variations of Facebook ad assets created for students looking for tutors.
Screenshots of Facebook ad assets.
Variations of Facebook ad assets created for tutors looking to grow their business.

iOS app onboarding screens for tutors

Screenshot of the first iOS app onboarding screen.Screenshot of the second iOS app onboarding screen.Screenshot of the third iOS app onboarding screen.
Splash screens created to onboard users to the iOS app experience of Clark.

Sign-up flow for tutors

Scroll horizontally to see more

Step 1: Credentials

Screenshot of the credentials step of the tutor sign-up flow. Features an email and password form with submit button.

Step 2: Personal Details

Screenshot of the personal details step of the tutor sign-up flow. Features a form with first, last, profile name, location, subjects, and rate form fields.

Step 3: Brief Personal Description

Screenshot of the personal description step of the tutor sign-up flow. Features a 500 word textarea form field with word count for tutors to describe themselves.

Step 4: Qualifications Entry

Screenshot of the qualifications entry step of the tutor sign-up flow. Features a 500 word textarea form field with word count for tutors to describe their qualifications.

Step 5: Testimonials and References

Screenshot of the testimonials entry step of the tutor sign-up flow. Features a form field with up to 3 testimonials to add.

Step 6: Profile Picture Preview

Screenshot of the head shot upload step of the tutor sign-up flow. Features a circular image uploader.

Step 7: Profile Picture Uploaded

Screenshot of the head shot preview step of the tutor sign-up flow. Features a circular image avatar with a sample tutor image.

Step 8: Profile Review

Screenshot of the profile preview step of the tutor sign-up flow. Features a profile page with the information previously entered on display.

Step 9: Profile Editing Screen

Screenshot of the profile editing screen where a tutor can edit the information they've added from previous sign-up steps.

Step 10: Profile Pending Review

Screenshot of the profile pending review, similar to the previous screens.

Product UI, dashboard for parents

Scroll horizontally to see more

Upcoming Sessions

Screenshot of the product dashboard for parents featuring a list of upcoming sessions in a calendar format and a booking link for a new session.

Upcoming Sessions Expanded

Screenshot of the product dashboard for parents featuring a list of upcoming sessions expanded with more details of the session.

Session Booking Flow: Verify Contact Information

Screenshot of the session booking screen where a parent needs to update their contact information using a form with input fields such as name, email, phone, and date range pickers.

Session Booking Flow: Verify Payment

Screenshot of the payment screen where a parent enters their payment information.

Session Booking Flow: Pick a Session

Screenshot of the date picking screen with three date options in a calendar card format as well as a date picker for suggesting a custom date.
Back to work