Product Landing Page

UX/UI Case Study

Keep track of your

Habits using Habit
Planner

Made with

What we did

Scope of Work & Timelines

For explosive events (sprints up to 400 metres, long jump, triple jump) the reduction
in atmospheric pressure means there is less resistance from the atmosphere.

Research UI & Interaction Prototype Testing

Following the research and We created the animations that Following the research and
strategy phase, we created user depict the intended behavior of strategy phase, we created user
stories and user flow map that the app making the experience stories and user flow map that
depicts the journey of design. delightful. depicts the journey of design.

Discovery Design Delivery

Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8

19 May 20 May 21 May 22 May 23 May 24 May 27 May 28 May

Research Research on Similar Products

UI Design UI Kits, Style Guide, User Interface

Interaction Make Prototype and test on it

Development Develop & cross platform development

achievement

Project Overview

01. 02. 03. 04.

1 Weeks 8 Meetings 6 Screens 7 Components

For explosive events (sprints up
to 400 metres, long jump, triple
jump) the reduction in atmosph
pressure means there is less the
resistance.
Following the research and
strategy phase, we created user
stories and user flow map that
depicts the journey of design.
For explosive events (sprints up
to 400 metres, long jump, triple
jump) the reduction in atmosph
pressure means there is less the
resistance.
Following the research and
strategy phase, we created user
stories and user flow map that
depicts the journey of design.

Challenges For explosive events (sprints up to 400 metres, long jump, triple jump) the reduction
in atmospheric pressure means there is less resistance from the atmosphere and the
athlete's performance will generally be better at high altitude. Following the
research and strategy phase, we created user stories and user flow map that
depicts the journey of design.

Research For explosive events (sprints up to 400 metres, long jump, triple jump) the reduction
in atmospheric pressure means there is less resistance from the atmosphere and the
athlete's performance will generally be better at high altitude. Following the
research and strategy phase.

We created user stories and user flow map that depicts the journey of design.

Site Map

Product Landing Page Product Detail Page Billing Details Buy Product

UI Colors

Color Styles

Primary

50% HEX #2C292A

HEX #2C292A HEX #30A1E7 HEX #6DB9E8

Secondary
HEX #666666
45%

Accent HEX #A39A9A HEX #5A4F4F HEX #C1ABAB

HEX #F5F4F4
5%

Typeface

Aa
Sofia Pro

Habit Atlas Landing Page

Lorem Ipusm

ext many screens with a meaningful relationship to all screens.

Product Page (Desktop & Mobile)

This is the product page to get all the details of the product, what
do you needed.

Cart Page
Enter your billing and mailing addrress and pay for your desired
product throught many payment methods.

Thanks For Watching

 Web App Design

MIST Gallery

UX/UI Case Study

Keep all your code and

notebooks in one place
MIST is a platform similar to GitHub where a user can save
the code notebooks and run them in Jupyter with just one
click. The main feature is the query search where the user can
search the markdowns, notebooks, and tags. This project is
fully prototyped.

Tool Used

AI

What we did

Scope of Work & Timelines

We added the search feature in this project. The user is now able to search the
notebooks, markdown, and tags. In case of no result against a query, a no record
found page is added.

Research UX Design UI & Interaction Prototype Testing

Following the research and We designed the app having the We choose the colors that added In this phase, we fully prototyped
strategy phase, we studied similar youngest user in mind. The accent to the design. Also, the the design for the ease of
systems to better understand the interface was kept user-friendly best practices of design were kept understanding of the client and
client’s requirement . for the ease of the end user. in mind. the developer as well.

Discovery Design Delivery

Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8

23 June 24 June 27 June 28 June 29 June 30 June 01 July 04 July

Research Research on targeted Audience

Strategy Challenge, Goals, KPIs

UI Design UI Kits, Style Guide, User Interface

UX Design Userflow, IA, Sketches, Wireframes

Interaction Make Prototype and test on it

Result on test Feedbacks & results updations

Development Develop & cross platform development

Project Overview

01. 02. 03. 04.

2 Weeks 4 Meetings 9 Screens 6+ Components

The 2-week time span The 4 meetings included the initial Initially, one screen was We created multiple variants of
comprised of user research, meeting for requirement designed for testing. After the six different components to
requirement gathering, gathering, the review about the approval from the client, we find the best fit for the design and
providing a test design, getting test design, the feedback on the further created the screens to also for the ease of developer.
feedback, revising the design, final design and the final meeting complete the design and in These components were for dark
and project closure. for closing the project, total, we ended up on 9 screens. and light mode as well

Challenges They already had a few screens created and we were supposed to design the
screens that should feel like part of the existing system but improving the UX and UI
was also a priority. Another challenge that I faced was the selection of colors for the
tags. There were multiple tags and if random colors were selected then some colors
disturbed the readability of the content when highlighted.

Research We researched and found some systems with the same working tags. After going
through a number of systems we concluded to make a color palette for the tags and
restrict the developer to use the same colors for the tags. If the number of tags
exceeds the number of colors then the colors should repeat but readability should
never be compromised.

Site Map

List of Notebook Notebook Detail Page Search not found Searched Results

Search Query All Lists

Notebook List

Markdown List

Tags List

UI Colors

Color Styles

Primary

50% HEX #1C628C

HEX #1C628C HEX #30A1E7 HEX #6DB9E8

Secondary
HEX #30A1E7
45%
HEX #30A1E7 HEX #30A1E7 HEX #30A1E7

Accent
HEX #6DB9E8
5% HEX #1B1C22 HEX #6E6F71 HEX #FBFBFB

Typeface

Aa
Inter

maiin Screen

Home Screen
H ome Screen move to further screens with a meaningful
relationship to all screens.

All Screens

Search Results Screens

Search Reasult Screen links to further searh screens including tags,
markdowns and notebooks results.

All Screens

Search ot ound N F

Search not found page is designed to display the message to the

user when the query does not match with any search result.

Thanks or Watching F
 Website Design

UX/UI Case Study

Fall in Love with

your Home again
They are a design/build general contractor, performing all
types of residential and light commercial construction.

Tool Used

AI

What we did

Scope of Work & Timelines

To redesign the site using the best practices of UX/UI and to make the
site feel more like a vacation Calendar

Research UX Design UI & Interaction Testing

Following the research and We designed the website keeping We created brand guidelines and Following this phase, we created
strategy phase, we studied similar the youngest and non technical added appealing images and user flow map that depicts the
systems for better understanding users in mind. We focused on colors to add accent to the site journey of design and then we
and analysis. making the site user-friendly. and to grab user attention. closed the project after testing.

Discovery Design Delivery

Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8

01 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec

Research Research on targeted Audience

Strategy Challenge, Goals, KPIs UI Design UI Kits, Style Guide, User Interface

Feedback Feedbacks & results updations

UX Design Userflow, IA, Sketches, Wireframes

Deliver Deliver the file to the client and close the project

Project Overview

01. 02. 03. 04.

8 Weeks 20 Meetings 14 Screens 18+ Components

In the 8 weeks time, we gathered While lоw fidelity wireframes are
requirements, did market usually abstract, they offer a
research, chance to see the basic structure
of the user interface. They may
not take a lot of effort, but they
spare a lot of extra effort down
the road.
From branding and illustrations to
UI and animations, we designed
the visual part of the app having
the youngest users in mind.
Teams build prototypes of varying
degrees of fidelity to capture
design concepts and test on users.
With prototypes, you can refine
and validate your designs so your
brand can release the right
products.

Challenges The old site is outdated and not user-friendly. It contains very blank and basic pages
with no proper structure and no attraction for the users.

Research To redesign the site using the best practices of UX/UI and to make the site helpful
for the customers to find affordable and best houses in US. We updated the whole
website And made the pages more interactive, attractive, and easy to use.

We created user stories and user flow map that depicts the journey of design.

Site Map

Home Page About Us Journey Team

Services Testimonials Licensed & Secured

Feature Products Contact Details History

Map

UI Colors

Color Styles

Primary

50% HEX #0886F5

Secondary HEX #0886F5 HEX #E48A9FF HEX #94CDFF

HEX #F18200
45%

Tertiary HEX #F18200 HEX #FCA43E HEX #FFDEB7

HEX #2A3240
5%

Typeface

Aa
Poppins
Poppins is a geometric sans-serif typeface published by Indian
Type Foundry in 2014. It was released as open-source and is
available for free on Google Fonts. Indian Type Foundry describes
Poppins as “an internationalist take on the geometric sans
genre.” It supports both Latin and Devanagari languages and is
available in nine weights with matching italics.

Light Black

Design skeleton

Sketches or Wireframes
For explosive events (sprints up to 400 metres, long jump, triple jump) the reduction
in atmospheric pressure means there is less resistance from the atmosphere.

Website Design

maiin Screen

Home Screen
Home Screen move to next many screens with a meaningful
relationship to all screens.

Other sections

Home Screens
For explosive events (sprints up to 400 metres, long jump, triple
jump) the reduction in atmospheric pressure means there is less
resistance from the atmosphere.

other Screens

Other Pages
Home Page move to next many screens with a meaningful
relationship to all screens.

Other screens

About Us
For explosive events (sprints up to 400 metres, long jump, triple
jump) the reduction in atmospheric pressure means there is less
resistance from the atmosphere.

Thanks For Watching

 Website Design

UX/UI Case Study

Begin your Search for Figma

After

Affordable Housing Hub https://www.figma.com

Affordable Housing Hub is a website that allows user to

buy houses in affordable prices.

Tool Used

AI

Before

Figma
https://www.figma.com

What we did

Scope of Work & Timelines

To redesign the site using the best practices of UX/UI and to make the
site feel more like a vacation Calendar

Research UX Design UI & Interaction Testing

Following the research and We designed the website keeping We created brand guidelines and Following this phase, we created
strategy phase, we studied similar the youngest and non technical added appealing images and user flow map that depicts the
systems for better understanding users in mind. We focused on colors to add accent to the site journey of design and then we
and analysis. making the site user-friendly. and to grab user attention. closed the project after testing.

Discovery Design Delivery

Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8

01 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec

Research Research on targeted Audience

Strategy Challenge, Goals, KPIs UI Design UI Kits, Style Guide, User Interface

Feedback Feedbacks & results updations

UX Design Userflow, IA, Sketches, Wireframes

Interaction Make Prototype and test on it

Result on test Feedbacks & results updations

Deliver Deliver the file to the client and close the project

Project Overview

01. 02. 03. 04.

8 Weeks 20 Meetings 14 Screens 18+ Components

In the 8 weeks time, we gathered While lоw fidelity wireframes are
requirements, did market usually abstract, they offer a
research, chance to see the basic structure
of the user interface. They may
not take a lot of effort, but they
spare a lot of extra effort down
the road.
From branding and illustrations to Teams build prototypes of varying
UI and animations, we designed degrees of fidelity to capture
the visual part of the app having design concepts and test on users.
the youngest users in mind. With prototypes, you can refine
and validate your designs so your
brand can release the right
products.

Challenges The old site is outdated and not user-friendly. It contains very blank and basic pages
with no proper structure and no attraction for the users.

Research To redesign the site using the best practices of UX/UI and to make the site helpful
for the customers to find affordable and best houses in US. We updated the whole
website And made the pages more interactive, attractive, and easy to use.

We created user stories and user flow map that depicts the journey of design.

Site Map

Home Page Provo Design Public Housing Page City Page

Mission Statement Provo Apartments

Inspection Score

Public Provo Housing Housing Authorities

Public Housing

Nearby Cities Area Information

Fair Rent Market

City Zip Codes

UI Colors

Color Styles

Primary

50% HEX #0886F5

HEX #0886F5 HEX #E48A9FF HEX #94CDFF

Secondary
HEX #F18200
45%
HEX #F18200 HEX #FCA43E HEX #FFDEB7

Tertiary
HEX #2A3240
5% HEX #2A3240 HEX #AAABAC HEX #F8F8F8

Typeface

Aa Proxima Nova
Released in 2005, Proxima Nova is an extremely popular typeface
designed by Mark Simonson. It is often described as a hybrid of Futura
and Akzidenz Grotesk, combining a geometric appearance with modern
proportions.

Light

Aa
Circular Std
It is a quality sans-serif font with strong geometric types. You should
utilize it for web sites, prints, and so forth. It is the latest script that's
designed in detail, Made with customary hand pulls, The circular book
to satisfy wants such as photography, Signatures, Branding, logos, And
extra.

Book Bold

maiin Screen

Home Screen
Home Screen move to next many screens with a meaningful
relationship to all screens.

other Screens

Other Pages
Home Page move to next many screens with a meaningful
relationship to all screens.

P u b l i c pag e

Figma
https://www.figma.com

P r o v o Pag e

Figma
https://www.figma.com

After

L i h tc pag e

Figma
https://www.figma.com

c i t i e s Pag e

Figma
https://www.figma.com

Thanks For Watching

 Web App Design
Vacation Calendar

UX/UI Case Study

Keep Track Of When

Your Vacation home is in
Use
The Vacation Calendar is an online application that allows
user to register their vacation houses and the shared
calendar makes it easier to keep a track of when the
house is free and when it is in use.

Tool Used

AI

What we did

Scope of Work & Timelines

Revamp the site to improve the user experience and user
interface. Add new features like a Bulletin Board, Blog, Gallery,
Social Media Feed etc. The main purpose was to shift the site
from conventional to an updated design.

Research UX Design UI & Interaction Testing

Following the research and We designed the website keeping We created brand guidelines and Following this phase, we created
strategy phase, we studied similar the youngest and non technical added appealing images and user flow map that depicts the
systems for better understanding users in mind. We focused on colors to add accent to the site journey of design and then we
and analysis. making the site user-friendly. and to grab user attention. closed the project after testing.

Discovery Design Delivery

Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8

01 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec 08 Dec

Research Research on targeted Audience

Strategy Challenge, Goals, KPIs UI Design UI Kits, Style Guide, User Interface

Feedback Feedbacks & results updations

UX Design Userflow, IA, Sketches, Wireframes

Interaction Make Prototype and test on it

Result on test Feedbacks & results updations

Deli er Deliver the file to the client and close the project
v

P ro ect O er ie
j v v w

01. 02. 03. 04.

8 Weeks 07 M eetings 14 M ain Screens 18+ Components

In the 8 weeks time, we gathered The initial meeting was for Initially we provided the home We designed multiple variations of
re uirements, provided the test
q re uirement gathering. Then we
q page. ater, we also designed the
L 18 components with respect to
+

design, changed the design had meetings for reviews, authentication screens, colors and layouts to find the best
according to feedback, provided feedbacks, adding further screens dashboard, and rest of the front fit from the design, user
the final design and closed the and the final meeting for closing end screens. We designed 1 main 4 experience and the development
project. the project. screens and multiple sub screens. prespective as well.

P roblem The old site was outdated and not user friendl at all. t contained ver dull and blank
- y I

pages. o application of best practices for user e perience made the site even more
N x
y

hectic to use. ome pages were mere structures with no st ling at all. We also added
S y

additional features like a blog bulletin board social media feed etc.
, , ,

Research & Solution We did competitor analysis and market research and picked out the best options for
the client. Then we showed the client what we picked and after taking suggestions
and preference from the client we revamped the whole website including branding,
user experience, user interface, prototyping and testing.

Site ap M

Start Screen Guest ogin

L Home Page Start Screen

Administrator & Services Bulletin Board

Owner oginL

Features Blog Page

Sign Up

Social Feed Contact Us

Forget Password

Help

UI Colors

Color Styles

Primary

50% HEX #E8604C

HEX #2A3342 HEX #E8604C HEX #EEA59A

Secondary
HEX #2A3240
4 5%
HEX #21B994 HEX #90F1D9 HEX #EAFFFA

Tertiary
HEX #6D6D6D
5% HEX #6D6D6D HEX #AAABAC HEX #F8F8F8

Typeface

Aa
Poppins
Poppins is a geometric sans-serif typeface published by Indian
Type Foundry in 2014. It was released as open-source and is
available for free on Google Fonts. Indian Type Foundry describes
Poppins as “an internationalist take on the geometric sans
genre.” It supports both Latin and Devanagari languages and is
available in nine weights with matching italics.

Light Black

main Screen

Home Screen
Home Screen move to next many screens with a meaningful
relationship to all screens.

other Screens

Authentication Screens
Authentication Screen move to many screens with a meaningful
relationship to all screens.

other Screens

Additional Feature Screens

Additional features include the House Blogs, Bulletin Board, Help,
Contact Us and many other screens.

Thanks For Watching