Role
UI Designer
Time
4.5 weeks
Task
React-Native App
Tools
Adobe XD
Introduction
Beyond Med is a membership program that elevates your health and well-being by providing access to a proprietary network of board-certified doctors and licensed providers at reduced rates of up to 20% off on elective and cosmetic services.
The Challenge
The challenge was to design an app so that users can sign up and search for providers near them. 
Solution
Design their app that allows clients to sign up/login and search their services efficiently with no hassle. As well as create the flow of the app.
Design Aspects
I designed the screens on Adobe XD and created the user flow. I used the colors, fonts, copy, and images they provided to create the screens. I found some illustrations that can work for their company and ended up changing the colors to go with their brand guidelines. 
Brand Guidelines

(Brand guidelines created by another company)

Splash + Onboarding Screens
Splash Screen
Splash Screen
Onboarding 1
Onboarding 1
Onboarding 2
Onboarding 2
Onboarding 3
Onboarding 3
Onboarding 4
Onboarding 4
Login/Sign Up
Loading Screen
Loading Screen
Login
Login
Sign Up
Sign Up
Group ID Enroll
Group ID Enroll
Reset Password
Reset Password
Search Provider
Search by Specialty
Search by Specialty
Search by Name
Search by Name
Specialty Search - Dermatology
Specialty Search - Dermatology
Filter by Distance
Filter by Distance
Filter by Saved Providers
Filter by Saved Providers
Map View 1
Map View 1
Map View 2
Map View 2
Discount Treatment
Discount Treatment
Member Card and Profile
Member Card and Family Members
Member Card and Family Members
My Profile
My Profile
Profile and More - Add Profile Picture
Profile and More - Add Profile Picture
Profile and More
Profile and More
User Details and More
User Details - My Details
User Details - My Details
Member Card - Edit Dependant
Member Card - Edit Dependant
Request Physical Card
Request Physical Card
Leave Feedback
Leave Feedback
Choose Plan
Choose Plan
Hear About Us - Select Option
Hear About Us - Select Option
Hear About Us - Other Selected
Hear About Us - Other Selected
Refer a Friend
Refer a Friend
Success, Error, and More Messages
Oops Error Message
Oops Error Message
Success Message - Forgot Password
Success Message - Forgot Password
Success Message - Reset Password
Success Message - Reset Password
Searched Provider Not Found - Message
Searched Provider Not Found - Message
Deleting Dependant Message
Deleting Dependant Message
Success Message - Delete Dependent
Success Message - Delete Dependent
Success Message - Dependant Details
Success Message - Dependant Details
Success Message - Leave Feedback
Success Message - Leave Feedback
Success Message - Referral Email
Success Message - Referral Email
Success Message - Request Physical Card
Success Message - Request Physical Card
Success Message - User Details
Success Message - User Details
App Store

Find Beyond Med on The App Store

Conclusion
The RAW files, layout, prototype, images, and fonts were sent over to their developers, who implemented the designs for the screens on their end. The app is deployed and can be found on the App Store and Google Play.

You may also like

Back to Top