Rebrand myPromethean (outdated) — CHAU YIN YU

myPromethean.com

myPromthean.com is a web-based portal where users can sign in or/and create an account to sync and access their data across devices at any time from anywhere.

Take me to current myPromethean.com

“What do you feel after visiting our current myPromethean.com?”

I know. That is why we are going to rebrand and enhance the user experience there.

Project Overview

• Rebrand current myPromethean

• Design a personalised and logical sign in flow

• Build design system to design and develop new myPromethean

Our Teams

• UX Research Team

• UI/UX Team

• Product Management Team

• Marketing Team

• Development Team

• QA Team

Problems

•Low sign up and usage rates

•Confusing and outdated UI design

•Confusing UI creates confusing UX for users

Goals

We are going to rebrand our portal to make it not only visually appealing but also have frictionless user experience.

Rebrand

Desktop Super wide (2500x1080).png

Desktop Wide (1920x1080).png

Desktop 1440.png

Tablet Portrait (768x1024).png

Mobile (375x640).png

UI Components.png

Web Breakpoints (Documentation).png

Web Color System (Sticker Sheet & Documentation).png

Web Typography Hierarchy (Documentation).png

Web Type Density (Documentation).png

Drop Down Menus (Sticker Sheet & Documentation).png

Tooltips (Sticker Sheet & Documentation).png

Links (Documentation).png

Button Usage (Sticker Sheet & Documentation).png

Buttons (Sticker Sheet & Documentation).png

Elevation (Documentation & Sticker Sheet).png

Loading (Sticker Sheet & Documentation).png

Progress Bar (Sticker Sheet & Documentation).png

Rating (Documentation).png

Scale Seleciton (Documentation & Sticker Sheet).png

Scrolling Behaviors (Sticker Sheet & Documentation).png

Status (Sticker Sheet & Documentation).png

Stepper (Documentation).png

Titles (Documentation).png

Focus State - Cards (Stickersheet & Documentation).png

Focus State - Modals (Stickersheet & Documentation).png

Focus State - Page Components (Stickersheet & Documentation).png

Focus State - Tables (Stickersheet & Documentation).png

Focus State Documentation.png

Focus State Future Design (Stickersheet & Documentation).png

Focus State Pages (Stickersheet & Documentation).png

Table Select Behavior (Stickersheet & Documentation).png

Table (Stickersheet & Documentation).png

Table Loading & Error Messaging (Stickersheet & Documentation).png

Above Table Controls (Stickersheet & Documentation).png

Pagination (Stickersheet & Documentation).png

Table Cells (Stickersheet & Documentation).png

Table Column Behavior (Stickersheet & Documentation).png

Table Search & Filter (Stickersheet & Documentation).png

Tables Showing All Columns (Stickersheet & Documentation).png

UI Elements.png

2Header (Sticker Sheet & Documentation).png

Header (Sticker Sheet & Documentation).png

Footer (Sticker Sheet & Documentation).png

Cookie Notification (Sticker Sheet & Documentation).png

Cards (Sticker Sheet & Documentation).png

Card Usage (Sticker Sheet & Documentation).png

App Switcher (Sticker Sheet & Documentation).png

App Switcher Usage (Sticker Sheet & Documentation).png

App Switcher Loading (Sticker Sheet & Documentation).png

Messages (Sticker Sheet & Documentation).png

Search (Sticker Sheet & Documentation).png

Upload Drag & Drop (Sticker Sheet & Documentation).png

Mobile Modals (Sticker Sheet & Documentation).png

Modal Completion (Sticker Sheet & Documentation).png

Modal Placement (Sticker Sheet & Documentation).png

Navigation (Sticker Sheet & Documentation).png

Navigation Examples (Documentation).png

Form Elements - Code Input (Sticker Sheet & Documentation).png

Form Elements - Input_ date (Sticker Sheet & Documentation).png

Form Elements - Input_ password validation (Sticker Sheet & Documentation).png

Form Elements - Input_ radio & checkbox (Sticker Sheet & Documentation).png

Form Elements - Input_ text & password (Sticker Sheet & Documentation).png

Form Elements - Mini (Sticker Sheet & Documentation).png

Form Elements - Textarea (Sticker Sheet & Documentation).png

Form Elements -Select (Sticker Sheet & Documentation).png

Page Templates.png

Page (LTR).png

RTL Page Layout (Sticker Sheet & Documentation).png

Pages Anatomy (Sticker Sheet & Documentation).png

Pages Breakpoints (Sticker Sheet & Documentation).png

Pages Types (Sticker Sheet & Documentation).png

Email Template (Sticker Sheet & Documentation).png

Full Pages.png

Generic Error.png

No access.png

No Internet Connection.png

Version=IT Admin (signed in).png

Version=Supported Language (not yet signed in).png

Version=Teacher US (signed in).png

Version=Teaher INTL (signed in).png

Version=Unsupported Language (not yet signed in).png

I would like to walk you through this project in details. Let us talk.