Case Study

Appraiser Supervisor.png

Case Discussion With Mockups

Case Study Introduction

Group 2022.png

This case study will demonstrate the responsiveness of the website by showing the website on different screen sizes and devices. It gives a project overview of the project by discussing what type of project it was, the team's roles and responsibilities, the duration of the project, and the problem. It describes the user persona of the customer to show we have an extensive understanding of the customer. It presents the sitemap that we created to demonstrate the clean, professional, and creative organization of the site. It discusses our design process from discovery, ideation, testing, defining, and design. It shows that we understand the user through conducting desk research, wireframing, user research, and visual design. It displays all of the components we used across the site. It introduces the different types of typography we used across the site by demonstrating fonts, sizes, and weight. It shows our expertise with color schemes, by demonstrating our choice of colors across the user interface. It shows the wireframes created by the user experience designer, using customer input and user research. It shows the final UI design demonstrating color concepts, stock photography, and graphics used across the site. It also gives samples and APIs for the code used across the site. 

Group 2023.png

Project Overview

The Project

Brian had an outdated website that was poorly designed, not professional,  and not responsive on mobile. We redesigned Brian's website, authored his SEO, wrote his homepage content, and conducted and applied ADA and GDPR compliance. 

Our UX Designer created wireframes for the website. Our UI Designer created a mood board, picked a color scheme, and fonts. Our content writer wrote SEO page descriptions and the homepage content. Our CEO conducted an ADA audit and applied GDPR to the website. Our engineering team created a custom search engine, built databases, and wrote code for the website. 

Our Role & Responsibilities
Project Duration

We created Brian's website in four weeks. 

Brian's website was outdated, poorly designed, and not responsive. 

The Problem
Group 1946.png
Appraiser Supervisor.png
Design Process.png

Understanding The Users

Desk Research

About Apps, Building product’s personas, Marketing strategy, User research, User Behavior, decision making, Find problems, Flow & SOW

Wireframing

Allows to define and plan the information hierarchy, to process information on a site, based on the research, making prototypes & feedback

User Experience

Problem’s solutions, user centered design, user flow, create products that provide meaningful and relevant experiences to users

Visual Design

Improve the user experience through considering the effects of illustrations, photography, typography, space, layouts and color on the usability of products and on their aesthetic appeal

Components

Appraiser Supervisor.png

Typography

Let’s us introduce the fonts we used on this website. 

Typo style

Weight

Size

Poppins

SemiBold

36

Poppins

SemiBold

30

Poppins

SemiBold

24

Poppins

SemiBold

18

Poppins

Regular

18

Color Palette

Group 1858_edited.png

Wireframes

Appraiser Supervisor.png

Final Design

Appraiser Supervisor.png

Code Description

Rectangle 1602.png

How We Started

The sample code was used to set up the side menu that controlled the multi-state box holding different pages of the respective menu item.

The idea was to be able to allow site users access all contents of each Manual from one page. The multi-state box was very useful and fast when it came to loading a new page. Hence, the hide() and show() promises used interchangeably to show desired page with a line indicator under each menu button that signifies an active state or menu item.
 

Code Description

Appraiser.png

APIs We Used

Get Started With Destiny’s Designs