Website and Web App UI & UX Design Case Study

View Prototype

Project Overview

Project Type

Case Study

Timeline

6 Weeks

Role

UX Research, Writing, Design Strategy, UI Design

Tools

Adobe XD, Illustrator

Background

ConverterGuru is one of my recent projects which I completed and want to share here. One of the finest and most helpful products I designed for this earth. Anyone can use this app to convert their files without login in or signing up. The main goal is to help people to convert their files quickly. We indeed have a human-catered design that will be developed focused on helping people for free.

Background

Challenge

We wanted to make a very clean design with no ads or any other unusual stuff on our website or in our app. So we can call ConverterGuru is a spam-free, net, and clean website and web app. It was not so easy. We did several meetings and discussions and then finalise this design. The company wanted to add more stuff and some paid ad banner but as a designer, I convince them to keep it clean so that we can get people to trust and they use our product. We all knew that we already have many websites which offer conversion services but they don’t have any web apps. So we can almost call this app is one app that will allow anyone to convert files anywhere without revealing their identity.

Background

Process

I have started my work by brainstorming and taking notes. At some point, I stopped and start thinking of different ways to make our project easier for the people. This process ends with the prototype.

Brainstorming

In this step, I took notes on paper and listed the features which I wanted to add to this app.

Research

Started researching, Compared exciting apps and tools, and talked with users about more room.

Develop

In the 3rd stage, I started developing my idea visual. I started with making a design system and end with the prototype.

Deliver

Now, here I am ready to deliver the product for development.

Main Task Flow

  • Information Architecture

  • User Flow

  • Wireframing

  • Visual Design

  • Prototype (Test)

  • Deliver

My Work Process

This is my real process of starting a project. After 6 years of my career, I still need help with my paper and pencil. Taking feedback and notes always helps me to do better design with better UX.

UX Design

User Experience design and analysis is the most important thing at this point. I tried to define everything clearly.

Design Thinking Process

UI Design

After completing my UX research and writing I followed a few more steps and then I started my UI design process. Making a Design system was my first step to do the UI design.

Visual Design and Prototype

Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Basic Analysis
UX Research

(User, Competitors)

Problem Statement
Ideation

(User Persona)

Pitch Presentation
UI Design
Prototype and Test

Typography

Display

Large

H1 - Headline

H2 - Headline

Inter Font family

H1 - Headline

H2 - Headline

H3 - Headline

H4 - Headline

TEXT

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

High-Fidelity Design

View Prototype