Redesigning Zenpark’s car park page
UX/UI DESIGN
ROLE
TWO UX/UI DESIGNERS
TEAM
TIMELINE
TWO WEEKS
At the Hackshow
Hackshow finalist
This was the final project at the Ironhack UX/UI Design bootcamp.
This time we worked with a real company.
My partner, Sara Delannoy and I got the opportunity to work with Zenpark.
Our project then got selected for Ironhack’s Hackshow which was a
great recognition for the work we had put into this project.
Brief
Zenpark is the European leader of shared car parks. Zenpark’s goal is to optimize the use of parking spaces.
For drivers, Zenpark offers an easy way to park their car in private parking spaces and at the same time Zenpark
allows the owners of those car parks to share their parking spaces in order to make their assets more profitable.
They offer two types of services, booking and long term rental.
Our task was to redesign their mobile carpark page in a more modern way to increase their conversion rate.
Research
Started with some online research. First we looked at Zenpark’s website, both on desktop and mobile. We also downloaded their app to have a better overview.
Heuristic analysis
We conducted a heuristic analysis. Heuristic analysis is an evaluation method in a digital product’s design to a list of predefined design principles (commonly referred to as heuristics) and identify where the product is not following those principles.
Here you can see a few examples of what we had in our heuristic analysis.
Competitors analysis
We looked at Zenpark’s direct competitors like Onepark, Yespark Parclick, Easypark and Indigo Neo. Then we looked at other popular booking websites such as Tripadvisor, Airbnb, Booking.com and Hotels.com. We do that to identify the current identities that are being used within the market so you are aware of current trends and have an idea of what your users may expect. It can also be useful to set your product apart from the competition.
Insight
Our contact at Zenpark was their Marketing Acquisition Manager. He also gave us useful insights about their business and the users and their behavior. Some of the information I won’t share due to confidentiality but the main insight was that they had observed that
the conversion rate on the car park page is lower than on other pages of the website.
Many of Zenpark’s users are using the mobile website when they are using Zenpark for the first time therefore the conversion rate on that page needs to be higher.
Empathizing with the user
We empathize by understanding our users and their needs.
The user
In September 2022 Zenpark made a survey for their users and shared the insights with us.
Due to confidentiality I can’t share the results but it gave us a good insight to who the main users are and how and when they use Zenpark services.
Desirability testing
We needed to get the users perspective of the current design of the car park page, to do that we did desirability testing.
Desirability testing allows us to understand that the user thinks about the aesthetics and visual appeal of the website. Seven car owners and drivers between the ages 28 to 76 years old looked at the Zenpark car park page and told us their thoughts.
Interviews
We needed more qualitative insights and for that we conducted a user interview.
Because of the findings in the survey from Zenpark we interviewed six people.
4 men and 2 women
Between the ages 38-76 years old
Car owners
Four of them had used a service like Zenpark before, the others hadn’t
With these interviews we hope to understand their journey of finding a parking spot, with or without these kind of parking services.
What information they need and if they have ever used a car parking service, is there any information they think are missing on those pages.
Then we needed to get the feeling the user had when looking through the Zenpark car park page. So we asked them questions related to the hierarchy of information on the Zenpark car parking page. Such as what is the first thing they wanna see on the page? Are photos of the parking space important, if so why? Do you look at the reviews? What are you looking for when you read the reviews? After those interviews we got more insights on what information is most important for our users, what we needed to highlight and what was less important.
Affinity diagram
Another helpful tool is the affinity diagram to help us see pain points, needs and see the big picture. Here you have our affinity diagram that helped us with that.
User persona
From all the research and information we had gathered we made a user persona, meet Philippe Beaulieu.
Problem statement
So there were two problems that we needed to look at, Zenparks problem and the user’s problem. Therefore we have two problem statements.
Ideate
We gathered all of the information we had and brainstormed for ideas for the redesign. We thought about what should be on the page, what colors we wanted, how the users had talked about the review and how they would like to see them and so on.
Sketches
Before going into any design on the visual we needed to decide on the hierarchy of the information and content we had on the website. In the interview our users had talked about too much information on the site, it was overwhelming and hard to find what they were looking for. At the same time all this information was required on the page because of SEO.
Our changes and add ons were:
Photos of the car park on the top, the first thing you see and made bigger
Navigation bar so the users can access the information the are looking for quicker
For booking we added an CTA with the price on fixed at the bottom of the screen
Advantages of choosing Zenpark made more visual and for reassurance for the user like secure payment and customer service 24/7
Reviews, our users talked about wanting more detailed reviews such as accessibility, cleanliness, safety and location rather than just a star review, also added the option to see the comments in another page
Description of the car park we made in “see more” on another page instead of having all this text on the page and safe our users some scrolling
Nearby parking had a informations about how long it takes you to walk from one car park to another which didn’t make sense to us because our users are driving so we replaced it with star rating of the car park
Here are our first wireframes of the page.
The carpark page 1/3
Scrolling down the page 2/3
Scrolling down the page 3/3
Review page
Description page
Opening of the booking flow
Testing
Now of course we needed to conduct usability testing of our wireframes.
Five men and two women that were car drivers and potential users were tested.
Main insights were:
The page was clear and simple
Easy to find the information
they were looking forWe had removed the price listing from the page and added it in the booking flow but users found it missing from the page
Some users wanted to see the map first, not the photos
Price and location most important to the users
Redesign
With the users feedback in mind we started the redesign.
Testing the redesign
Once again we conducted useability testing on the redesign and made some changes:
We added the pricing list back on the page that we had removed because users found it missing
Not all of our users realized that they could swipe to see more photos of the car park so we added arrows to make that more clear
Again not every user realized that they could zoom in and out on the map so for that we added “+/-” feature to make that more visual
None of our users understood the icon that we had chosen for “open in maps” so we replaced it with straight forward button “Open in maps” to open the map in another application
The pricing list back on the carpark page
Added arrows on the photos
“+/-” feature and “Open in maps”
added on the map
