Login and Onboarding
A snapshot of the interaction flow for the onboarding procedure
The first screen welcomes the user to the application’s name with an attractive splash screen. Further, the different functions of the app can be seen in cards via a carousel. They’re associated with a small, succinct description of what the app can do.
User can either Sign Up by creating a new account or Login into an existing account.
A background with the yellow accent color creates a sense of spaciousness and airiness, which makes the onboarding feel less cluttered and more inviting. It also adds a pop of color and visual interest to your design.
Users can select the topics they are interested in, with visual feedback that highlights these topics
Onboarding Slider
Interactive experiences that people will find engaging while helping inform the design in an aesthetic fashion.
Snapshots of the interaction flow
Option 1
This option communicates information in a minimal yet clear manner, keeping in mind the visual branding and accent color scheme.
Option 2
This option imbues a fun visual interaction that changes illustrations with change in the component of the slider.
Finding an Activity
Snapshots of the interaction flow
Users can explore the recommended activities for the week or can click on the See All button to view all the activities.
Snapshots of the interaction flow
This page acts as a catalog for all activities categorized based on their type. Users can click on any category to open the list of Activities.
Doing an Activity
Snapshots of the interaction flow
As the user is doing the activity, the number of steps is shown on the top. Due to this, users can keep a track of the completed steps.
Snapshots of the interaction flow
To create a post, the user needs to input the Title, Description, and a photograph of the activity. After clicking on a post a circular progress bar will keep the user aware of the progress until it gets posted.
Profile
Snapshots of the interaction flow
After clicking on Edit profile, the user will be redirected to the edit page where he/she can details like email address, name, ethnicity, etc. Clicking the input box changes the stroke color to denote the active state.
Milestone 5: Microinteractions
Brief - Add microinteractions to your hifi prototype.