Who's Who Design Template

Who's Who landing page with a hero section that has an image and call-to-action

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.

Sign up page.
Sign up page.

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.

Customer portal which on the colleagues tab. Here you can search, sort, filter, and favorite.
Portal page.

The app admin will be able to see all active and inactive users, create a list of interests, and update the sites branding.

The amin dashboard to manage userss, interests, and branding.
Admin portal.

The template is built using the Bootstrap CSS framework for consistency of styles making it easier for future updates.

Development

Final Product

Key Takeaways

Results

Sign up to be notified when CRAFTees is up for sale

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.