01

Cityo

A website project for Cityo, a self-storage company offering storage units and services for individuals and businesses.

Cityo had a lot to offer. The problem was making all of it easy to understand.

A website project for Cityo, a self-storage company offering storage units and services for individuals and businesses.

Cityo had a lot to offer. The problem was making all of it easy to understand.

Visit cityo

Platform

Web

Timeline

3 weeks

3 weeks

Tools

Figma, HTML, CSS, JS, WordPress

The Project

Cityo offers several storage solutions, from traditional storage units and warehouses to smart lockers and document management. With multiple services, locations and customer needs to communicate, the challenge was deciding what users needed to see, and when.

Cityo offers several storage solutions, from traditional storage units and warehouses to smart lockers and document management. With multiple services, locations and customer needs to communicate, the challenge was deciding what users needed to see, and when.

The Challenge

The website needed to help users move from the question: “What does Cityo offer?” to a more specific decision: “Which option is right for me, where is it, and how do I get started?”

How might we make Cityo's storage services easier to understand, compare and access?

The website needed to help users move from the question: “What does Cityo offer?” to a more specific decision: “Which option is right for me, where is it, and how do I get started?”

How might we make Cityo's storage services easier to understand, compare and access?

Organising the experience

The challenge was not only what information to include, but when users needed to see it. Cityo needed to communicate its full offer without presenting everything at once.

The challenge was not only what information to include, but when users needed to see it. Cityo needed to communicate its full offer without presenting everything at once.

Information Architecture

I worked on the structure and hierarchy of the website to organise Cityo's different services and locations. The main experience was built around key user needs:

01 - Find a centre
Help users discover the closest Cityo location and explore its available services.

02 - Understand the services
Present the different storage solutions in a clear way.

03 - Choose the right space
Help users understand their storage needs and available sizes.

04 - Take action
Make it easy to request information, contact Cityo and online booking.

Design decisions

With the structure in place, I focused on translating it into an experience that was easier to scan, understand and navigate across different devices.

With the structure in place, I focused on translating it into an experience that was easier to scan, understand and navigate across different devices.

01 - Make services easier to scan

Cityo offers several storage solutions and additional services. Instead of presenting them as one large set of options, I grouped related content into clearer categories so users could quickly understand what Cityo offers and where to start.

01 - Make services easier to scan

Cityo offers several storage solutions and additional services. Instead of presenting them as one large set of options, I grouped related content into clearer categories so users could quickly understand what Cityo offers and where to start.

From individual services to a clearer content structure.

From individual services to a clearer content structure.

02 - Create clearer conversion paths

The interface was designed around a simple path from discovery to action. Users can explore a storage solution, understand their options, find a centre and reach out.

02 - Create clearer conversion paths

The interface was designed around a simple path from discovery to action. Users can explore a storage solution, understand their options, find a centre and reach out.

03 - Bring important information forward

What does a user need to know at each point in the journey? Each page was structured around the information users need to make a decision. Service type, key benefits, location and CTA were progressively introduced.

03 - Bring important information forward

What does a user need to know at each point in the journey? Each page was structured around the information users need to make a decision. Service type, key benefits, location and CTA were progressively introduced.

04 - Designing across breakpoints

The layouts adapt across desktop, tablet and mobile while preserving the same content hierarchy and user journey. Content reflows, navigation simplifies and components resize around the available space.

04 - Designing across breakpoints

The layouts adapt across desktop, tablet and mobile while preserving the same content hierarchy and user journey. Content reflows, navigation simplifies and components resize around the available space.

Defining the Visual Language

The visual direction builds on Cityo's existing green identity, introducing a brighter, more contemporary palette. Green became the primary accent for actions and key information, while darker tones improve contrast and readability.

The visual direction builds on Cityo's existing green identity, introducing a brighter, more contemporary palette. Green became the primary accent for actions and key information, while darker tones improve contrast and readability.

Low fidelity wireframes

I started with low-fidelity wireframes to test the page structure, content hierarchy and main user flows before committing to the visual design. This helped me resolve how services, locations and CTA should be prioritised across the main pages.

I started with low-fidelity wireframes to test the page structure, content hierarchy and main user flows before committing to the visual design. This helped me resolve how services, locations and CTA should be prioritised across the main pages.

Final Hi-Fi screens

The final screens translate the structure into a clearer journey from service discovery to enquiry. Service information, centre details and CTA are progressively introduced so users can understand their options before deciding what to do next.

The final screens translate the structure into a clearer journey from service discovery to enquiry. Service information, centre details and CTA are progressively introduced so users can understand their options before deciding what to do next.

What changed

The website has a simple commercial goal: help users move from discovering a storage solution to taking action. The redesign focused on reducing the friction between those stages. From a catalogue of services to a guided experience:

01 - The offer is easier to understand
Services are grouped and structured around clearer categories, reducing the amount of interpretation needed.

02 - The path to the enquiry is clearer
CTA and key information are introduced progressively, connecting discovery with the next step.

03 - The website connects digital and physical experiences
Centre pages make locations and available services easier to discover, helping users move from online research to a real Cityo centre.

The website has a simple commercial goal: help users move from discovering a storage solution to taking action. The redesign focused on reducing the friction between those stages. From a catalogue of services to a guided experience:

01 - The offer is easier to understand
Services are grouped and structured around clearer categories, reducing the amount of interpretation needed.

02 - The path to the enquiry is clearer
CTA and key information are introduced progressively, connecting discovery with the next step.

03 - The website connects digital and physical experiences
Centre pages make locations and available services easier to discover, helping users move from online research to a real Cityo centre.

The website has a simple commercial goal: help users move from discovering a storage solution to taking action. The redesign focused on reducing the friction between those stages. From a catalogue of services to a guided experience:

01 - The offer is easier to understand
Services are grouped and structured around clearer categories, reducing the amount of interpretation needed.

02 - The path to the enquiry is clearer
CTA and key information are introduced progressively, connecting discovery with the next step.

03 - The website connects digital and physical experiences
Centre pages make locations and available services easier to discover, helping users move from online research to a real Cityo centre.

From Figma to live website

The project progressed from the IA, early wireframes and interface design into a live website.

Working from the initial structure allowed me to carry the design decisions through to implementation, translating the information architecture and responsive layouts into a functional website rather than a static visual concept.

The result is a live website that brings together Cityo's services, locations and conversion paths in one digital experience.

What I learned

This project showed me that when a product has a lot to communicate and offer, the solution isn't necessarily to remove information. It's to structure it so users encounter the right information at the right moment.

Explore the interactive prototype below

02

More Projects

News on topics

Mobile

Product Design

Concept project

Personalised news, translated and simplified for every reader.

Personalised news, translated and simplified for every reader.

Craft meets Ecommerce

Mobile

Product Design

Ecommerce

Bringing Valencia’s local ceramics into a digital experience.

Building clear, user-centred

digital experiences.

Building

clear, user-centered digital experiences.

Create a free website with Framer, the website builder loved by startups, designers and agencies.