Who's Who Design Template
Overview
Who's Who is a design template that incporates a variety of features one would use to build applications. The template is included for free in the Pro NoCoders Dittofi Bootcamp.
Introduction
The Who's Who App is a basic directory app that allows standard users to sign up, log in, create/edit their profiles with basic information, view other users' profiles, and view basic statistics about other users. It will also allow the app admin to be able manage app-wide settings, view all users and their profiles, and manage users' active status.
Research
Personas & User Study
Design Guidelines
Using a scope and initial wireframes from Tonya at Pro NoCoders, I initially created the design in Figma.
The sign up page uses a split screen design on the deesktop with the right side image being hidden on mobile screen sizes. Dittofi uses a Single Page App (SPA) model allowing us to change out elements on the screen while maintaining performance. In this case the sign up, log in and password reset forms all use the same page template.
The Colleagues page displays all active users in the directory. Not shown in the screen shot is a sort and filter menu. The users will be able to click on the profile to get a detailed view of the the chosen user. They'll also be able to favorite profiles to then filter to their favorites.
The app admin will be able to see all active and inactive users, create a list of interests, and update the sites branding.
The template is built using the Bootstrap CSS framework for consistency of styles making it easier for future updates.