CASE STUDY 8: CLEVELAND WEBSITE REDESIGN
Cleveland is a city in the state of Ohio in the US. They have their portal (http://city.cleveland.oh.us/) from where all the important information is being spread to the citizens.
Redesigning the landing page of their current website. A 24 hrs design sprint that should include all the problems with the current site and a whole new redesign for the same.
The main focus points will be the problem this page wants to solve and how does it offer people “value”?
How will this page become more interactive so that people can actually come here and learn new things about their own city and its rules?
Currently, it looks like how every typical government website is being designed. It is not bad but it is just way too informative for the users and it makes the process of making people complete a task bit difficult. Though, people are forced to find out themselves the steps and the flow as they are bound to fill what is required on this particular website only.
So, in order to solve this problem, I will be redesigning this website with my understandings and research about the country and its people. My main area will be to target what are the tasks that need to be done by the user coming to the website.
The website looks something like this:
On opening the website, it is pretty clear to understand that it belongs to the US as they have their country’s flag on the logo as well as the stars on the top right corner. There is no hierarchy for the users for visual attractions.
First, the typography of the website has the same font size all over the website apart from two or three headings which are not making any difference.
Second, the website is not very welcoming. The content can be improved to make people feel comfortable in going through the website rather than feeling perplexed.
Third, the CTA (call to action) buttons are not very clear and are hidden on the right side.
Fourth, social media handles are also placed at a position that is not visible to the user. Usually, they look for them in a place that is common to many other websites that is on the top right or top left corner.
Fifth, all the sections have almost similar background colors creating no difference and value.
Sixth, on the left corner, the 4 photographs that are placed are changing only on clicking on one of the main headings on the top nav. This has no use unless people are actually seeing the images. Seems of no use unless they have interaction with users by at least floating on hovering or anything.
Seventh, wrong placement of the breadcrumbs, as they are invisible to the eyes unless we actually look around for help.
Eighth, the city’s mission is hidden after a click on any hyperlink which I guess should be the main content for the website to show to people so that they actually believe in what they are investing their time in has the same goal and would actually motivate others in doing the same.
Ninth, not asking users to interact with the website causing less interest.
Tenth, the structuring of the whole website is not done at all.
One of the best CTA I could find on this website is the CODE RED button. This button will redirect you to signing up for this website in the case to receive news directly on your mobile phones. But, it was somewhere in between the right section that has decreased its value. This is pretty great and should be the first priority for people to opt for. This functionality will help in informing people prior to the disaster that might take place in a couple of hours to get people ready beforehand and prevent many casualties.
In order to understand the above points let me help you by marking some of the problems, I have mentioned on the website screenshot below.
Now, it is time to choose the main features/ functionalities for the users to have, who comes to the website. Before that, we need to define our users.
Let's try to break the user into many types and sub-types. These are some tasks that people are actually looking to do when they visit this website.
He/she may be a citizen of Cleveland or might be someone from another state or country.
He/she may be of the age group above 15 to understand the rules or is being taught how to write a complaint or to get information about their rights as the citizen of Cleveland.
He/she might have a complaint regarding the particular system which many people might oppose and would want the Mayor to change or improve.
He/she who is a citizen wants to show Cleveland to their friends living outside Cleveland by photos and videos of the most famous places this city has.
He/she wants to check some new reforms or steps taken for a good cause so as to donate for the needy ones.
He/she wants to know the latest rules or programs taking place so as to do something for their city.
He/she wants to see the Calendar events for the whole city.
He/she wants to know some emergency number flashing on the website on the bottom right corner which is not very visible to the users.
The next thing to focus on is all the CTAs(call to action) buttons that are necessary for the people to help them with what they are looking for with just a simple glance.
CTAs (Call to Action) Buttons
WRITE TO US
People can actually write a mail regarding any inconvenience with any programs to a large number of people.
People can subscribe to get daily notifications about their city on their mail.
All the information about any department will be present here to read. It will include all the information (For example COVID, SPORTS, POLITICS, etc).
This section will allow people to know all the openings for various roles (for the government sector)
A place where tourists can actually see the images of spots that can be visited, it can show the stats of how crowded the places can be at what time of the day.
This will be of the major preference here, so that people who actually still have a doubt on how the website will work, can search for what they are looking for.
This section can include what the MAYOR is doing for the people who are in need and others who can contribute to the same.
The website is divided into 4 groups of information.
Some of the design decisions can be changed here for people to understand the flow more easily and are willing to opt for a subscription to get notified of the daily news.
The first step of redesigning is to understand the target audience and their needs. What they want to fulfill in less amount of time. The UI is necessary so that they know where to go next. So, for that, I decided to put all the major sections on the top and all the other information will be included inside those headings as sub-headings.
A 24 hours design sprint can only be done for making the first look much more appealing than the previous design. The purpose here is solved.
What I have changed from the previous look?
- Welcomed users in a much friendly way
- Used the Mayor’s different image that looks more welcoming and happy.
- Gave hierarchy to the word “Cleveland” as this website belongs to them.
- Given the most important CTA(Write to us) on the first glimpse for more inputs.
- Used background image as the flag plus one of the tourist places in the US.
- A fixed top bar for guiding the people for language and for numbers they might be looking for.
What I could have done better if I had more time than 24 hours?
- Social Media handles could be placed accordingly
- The structure could be a bit more refined.
What I tried to convey with my work?
- My way of doing research is different
- I present my work in a different style than others
- Research > design. If Research is good, the design would obviously be great.
This was a great experience for me to redesign such a great website that targets the whole city and tries to maintain the perfect balance. To understand it more clearly it would have taken some more time. The questions I had would need some interviews and explanations, which would actually escalate my designs even more without just making assumptions.
Thank you for being so patient. I hope you have liked my design and I would love to hear the criticism/reviews as well. It would help me grow and become even better.