Case Study

Group 2054.png

Case Discussion With Mockups

Case Study Introduction

Mobile-removebg.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 2055.png

Project Overview

The Project

Gloria needed an online presence for her counseling service. She wanted to expand her online presence outside of Linkedin and Facebook. She wanted a website that showcased her experience and services. We built a beautiful website for Gloria, we also designed her logo, wrote content and completed her SEO. 

We created the wireframes for Gloria’s website in order to map out the layout. Then we created a mood board, color scheme, and added creative fonts, and designed the user interface. We edited photos of Gloria and placed them around the site to ensure the site represented her brand. Our graphic designer created an engaging and creative graphic for Gloria’s homepage that featured her and represented her services. Our engineering team wrote code, and constructed databases to store data and display her testimonials. Our content writer wrote effective and engaging content for the website and SEO (Search Engine Optimization). 

Our Role & Responsibilities
Project Duration

We created Gloria’s website in two months

Gloria did not have an online presence or showcase. We created a website to showcase her work and give her an online presence. 

The Problem
Group 2053.png
Group 1999.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

Group 2056.png

Typography

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

Typo style

Weight

Poppins

Medium

Poppins

Regular

Poppins

Poppins

Poppins

Light

Light

Bold

Poppins

Poppins

Poppins

SemiBold

Regular

Regular

Size

89

50

50

36

18

18

16

14

Color Palette

Group 1858_edited_edited.png

Wireframes

Group 2057_edited.png

Final Design

Group 2058.png

Code Description

Rectangle 1602.png

How We Started

We needed to add a real-time testimonial feature, so we used WIX Data to save user content submissions with one dataset and displayed them using another dataset. An option to sort the repeater by the date the testimonial was created was also added using WIX Sort API.
 

Code Description

Wix Code.png

APIs We Used

Get Started With Destiny’s Designs