CitySmart – Web Design
The company
CitySmart is the solution for Public Administrations and companies that want to offer more efficient services to citizens and tourists. One platform, three components and scalable functionalities to support the evolution of the urban centers of the future.
Project requirements
- Website design
Corporate website design for the CitySmart platform
Project phases
Research
Stakeholder Interview, Design Strategy, Competitive Analysis
Analysis
Brand development, Target Market, Brand Values
Design
Sitemap, Information Architecture, Wireframe, Prototype
Develop
Full color design, WordPress development
Research
Stakeholder Interview
The stakeholder interview is used to get a clear idea of the needs and goals that the project must meet. These are helpful questions for those who have to design (in this case, the website) and the client who can ask himself the most important questions at the initial stage of the work.
The CitySmart platform is a white label product used by several local public transport companies. It is critical to provide a channel where new potential customers can find the information they need and a direct point of contact.
Design Strategy
The key to effective content marketing is centered around quality content with the right intent. If the traffic is well optimized, it will be easier to convert.
The project is about designing a website to provide useful information about the CitySmart platform. The website will also be one of the customer touchpoints.
Informational
Users are looking for information. They want to know how the product works.
Navigational
Users are looking for a specific company.
Lead Generation
To create a touchpoint for the acquisition of new customers.
Brand Awareness
To explain the features and benefits of using the CitySmart platform.
Competitive Analysis
Major Competitors
Competitive analysis is an estimation of the strengths and weaknesses of current and potential competitors. Research requires looking for similar products and comparing them.
After studying the characteristics of the competing platforms, it is possible to focus on the strengths that distinguish CitySmart from the others. The CitySmart platform is the only one to bring together public transportation and parking services while offering a complete management platform for businesses. There are controller monitoring functionalities, the creation and supervision of subscriptions for citizens and a Customer Care section.
Define
Defining goals along with analyzing product strengths is the first phase of research. Creating a set of brand values and defining a target audience is necessary to design a site that adequately communicates the brand.
CitySmart brand goals
For defining innovative models of Smart City and making cities more liveable.
Offering more valuable services to Public Administrations and companies.
A scalable info mobility platform that adapts to individual customer needs.
CitySmart brand values
Target Market
The transportation sector and Public Administrations.
Occupation: transport company owners, entrepreneurs.
Challenge: These sectors are reluctant to change; they are worried about adopting new tools.
Solution: Provide the correct information and ensure reliability.
Design
Information Architecture
Sitemap
In-page information hierarchy
Wireframe
Homepage
The CitySmart website header consists of a horizontal bar. On the right there is the logo and on the left there is the navigation menu.
The hero section welcomes users who land on the site. Title and subtitle explain why the platform was built, a message visually reinforced by the image; the button leads to the "Contacts" page to facilitate immediate contact with potential customers.
The section highlights the benefits deriving from the digitalization of info mobility services. Thanks to the technologies adopted, it is possible to meet the specific needs of Public Administrations and citizens.
In this section, through links leading to an in-depth internal page, it is possible to obtain more information on the platform's components.
A section dedicated to the user app, with an overview of the main functionalities.
This is a slider with the customers' logos using CitySmart to show actual platform use cases.
Call to Action to encourage the acquisition of new contacts interested in purchasing the platform. The button leads to a page with a contact form.
The News section collects all the news (press releases, etc...) about the customers who have adopted the CitySmart platform.
A CTA for acquiring contacts and offering further insight into the platform.
The footer includes the main navigation items and links to the company's social networks.
High Fidelity Wireframe
CitySmart moodboard
Design System
Colors
Typeface
Buttons and Input
Icons
Font Awesome 4
Development
Full Design Color
