Input Clarity
The primary action needed to be immediately understandable so users could shorten a URL without having to figure out how the interface worked.
Work / Case Study / 04Web Application
URL Shortener / Web App
SHORTLY
URL
A clean, focused URL-shortening experience designed around simplicity, clarity and a fast path from long URL to short link.
UI/UX × DevelopmentShortly — Homepage
Role
UI/UX Designer + Developer
Type
URL Shortener
Platform
Web Application
Work
Design + Development
01 / OverviewBuilt
Built
Shortly
Shortly is a focused URL-shortening experience designed to make one task feel effortless: turning a long URL into a short, usable link.
The interface was designed around clarity rather than unnecessary complexity. The main action stays visible, navigation remains minimal and the shortening flow is easy to understand from the first interaction.
Visit Shortly↗02 / ChallengeKeep it
Keep it
simple
Visual Hierarchy
The interface needed a strong visual hierarchy that kept the URL input and shortening action as the clear focal point.
Result State
Once a URL was shortened, the resulting link needed to be presented clearly without making the experience feel complicated.
Responsiveness
The experience had to remain simple and usable across desktop, tablet and mobile screen sizes.
03 / SolutionOne
One
action
01
A focused interface built around one primary action.
02
Clear hierarchy between the URL input, action and result.
03
A dedicated shorten experience that keeps the workflow simple.
04
A minimal navigation system that avoids unnecessary distractions.
05
Responsive layouts designed around the actual user flow.
06
A consistent visual system carried across every interaction.
04 / ProcessFrom idea
From idea
to product
Plan
Defined the core user journey and reduced the experience to its most important interaction: entering and shortening a URL.
Design
Built the interface around a strong typographic hierarchy, simple spacing and a focused visual language.
Develop
Translated the interface into a responsive web application with reusable components and a clean implementation.
Refine
Polished spacing, states, responsiveness and interactions to make the final experience feel intentional.
05 / Interface
Homepage
The homepage is designed to immediately communicate the product and place the main URL-shortening interaction at the center of the experience.
Shortly — Homepage
06 / ExperienceShorten
Shorten
flow
The shortening experience keeps the user focused on a single task. Enter the URL, trigger the action and receive the shortened result without unnecessary steps.
Shortly — Shorten Experience
07 / User FlowShort
Short
path
01
Enter URL
The user starts by entering the long URL they want to shorten.
02
Shorten
The primary action processes the URL and creates the shortened link.
03
Receive Result
The shortened URL is presented as the final result of the workflow.
08 / FeaturesWhat it
What it
does
01Responsive Layout02URL Input03URL Shortening04Shorten Page05Result State06Clear CTA07Simple Navigation08Focused Workflow
09 / DevelopmentDesign
Design
meets code
Shortly was built with the same principles used during the design phase: clarity, responsiveness and a focused user experience.
Frontend
Next.js
Component-based frontend architecture with responsive layouts and reusable UI.
Styling
Tailwind
A utility-first styling system used to keep the visual system consistent throughout the application.
10 / OutcomeA clearer
A clearer
product
Simple
The product keeps the primary task obvious from the moment a user lands on the page.
Focused
The interface avoids unnecessary elements and keeps attention on creating a shortened URL.
Responsive
The experience is structured to adapt cleanly across different screen sizes.
11 / ReflectionWhat I
What I
learned
01
Less can do more
A URL shortener does not need a complicated interface. Removing unnecessary elements made the core action stronger.
02
States matter
The experience is not only about the initial input. The result state is equally important because it completes the user's task.
03
Design and code together
Building the interface while thinking about implementation helped keep the final product practical and consistent.
Next Project
WORK
View all projects→