Pegipegi is one of the renowned travel companions for travelers who are trying to find transportations and accommodations for their trips.
The goal for this Case Study
This redesign was not meaningless nor pointless. I had a clear vision when I was working on the new design for the Homepage of Pegipegi. It was a simple vision: to help users to be able to navigate through the website easier with outstanding and appealing visual, starting from the Homepage which was the first, top page users would see when opening the website and the mobile application.
Getting Started
After taking interest in redesigning the Pegipegi Homepage for the Desktop Website and Mobile App, I began with Research and Exploration. Of course, it was a basic thing to do, but it was never a thing to be missed even after having many experiences in designing. So, since Pegipegi is an existing website and even a mobile app, I started with exploring the said website and mobile app. I tried to navigate along with the website and mobile app while at the same time trying to compare it with the competitors to find out what was missing and could be improved.
Tips: It's good and very helpful to take down notes when you are doing research and explorations, especially when you are comparing with the competitors.
Thanks to the research and exploration, I finally found out what to be made better from both the User Experience (UX) and the User Interface (UI) perspectives. The main idea that came up to my mind was to make it "more user friendly and easy to navigate with more modern visual using more of Pegipegi's brand color."
Let's Get to Work!
After you've done your research and exploration part, created persona, storyboard, and others. The next thing you would like to do is creating the wireframe to help with knowing better about the flow.
In this case, because I was only planning to redesign the homepage for the desktop website and the mobile app, I won't really show the others, but I tried creating some wireframes. The three on the right are the ones I decided to try going further with for the desktop version. While below are the ones for the mobile app.
From the wireframe alone, you could see that I have tried making it in a different way from the original homepage both for the desktop version and the mobile app. Let's try to break it down one by one.
Desktop Website
For the top section below the navbar, the users will be able to see a simpler and neater Navbar with all the navigations needed. Continuing on, the banner section which could be used for any promo or event was made into a sliding one, with the active one in the center while the previous and next ones, on the left and right respectively, being shown partly to let users know that there was more than one banner there.
Then right below it was the form with the buttons for the transportations and accommodations available for easy access in looking for what the users want. Then below that are parts for more of the marketing where the Pegipegi can help recommending more of the promotions, accommodations, and even events they have to their customers. At the same time, it will help the users to find some of them while they were still blind on where to stay at. Then close it with the selling point of Pegipegi and ask users to subscribe to the newsletter and it's perfect. Of course, don't forget the footer with more info and menus to help users who need to find out more about pegipegi.
Mobile App Version
The mobile app version's sections did not differ much from the desktop one, except that I moved the top navbar to bottom navbar instead to make it easier to use since it's an app, not a website. Another one is that the form was hidden until the users choose which transportations or accomodations they want to look for.
Why promo at the top? Well, I mean... Who doesn't like promos? It helps to know that they have promo especially if we are traveling on budgets, right.
Oh, How Beautiful!
Dun dun! Behold, after putting some colors, changing the fonts, adding some icons and pictures, didn't it look good already? Of course, it all sounds easy, but it's not that simple. I had to choose the correct color, the matching font, the perfect icons and pictures to make it look good.
For the colors, I decided to go with the Pegipegi brand color, which was orange. I went a little further to play with the hue, tint, and shade of the orange to use in this design. Adding gradients also helped. For the font, it was a simple one yet it needed to match the design or else it will also ruin the overall look. The size, the thickness, everything matters. As for the icons, I also tried matching them along with the branding. And then for the pictures, because it had to attract people to click on the recommendations, finding good pictures is a must.
Tips: It's reccommended to use high quality pictures for your website as it is also one of the important elements to attract users to visit and stay at your websites longer.
Extra Cherry on Top
It was overall done after I have done a test for the redesign. But, for me, it was not enough, so I played a little bit with the animation to make the flow looked smoother and even more appetizing. Just like the video below:
Yes, you have seen it at the top, but I spared your time scrolling back to the top again to rewatch it, that if you watched it in the beginning. Haha...
Jokes asides...
If you notice at the beginning I was only scrolling from top to bottom to show you how the overall page looked. However, it looked like a still image and it might be shown on the design that some parts are scrollable, thanks to the little parts of the next item showing, but others than me (developers or you, who I am presenting to) might not know about how it would look like being scrolled if I did not add animation to it.
Especially in the last part of this video, it's the most important part I want to show to you all. If you noticed, after scrolling back to the bottom, I tried scrolling back up a little, and there was something showing. That was the menus for the accommodations and transportations at the most top of the page. It was intentionally designed like that to make it more user-friendly, so the users could easily tap on one of those icons to get the search form, instead of scrolling back to the top again after they decided to find it using the form instead.
It is actually the same action I do here with this video.
So, what do you think? Is it helpful? 😊
Fare Thee Well, Let's Meet Again!
It might be a simple and short Case Study, but nonetheless, it was fun to explore and tried a new style of design. I gained and learned many things from this Case Study too so it was not useless at all.
For this blog, it's my first time writing a Case Study report but it's still fun after all! It was kind of hard to find proper words to express how I feel about some process but overall I have written what I could. I hope you find it helpful even just a little bit. 😊 Of course, comments, feedbacks, and suggestions for improvements are always welcome!
If I got the chance again, I'd love to try another Case Study and write it down like this again!
Thank you for reading this and I hope you enjoy it! Come read the new one too after I publish it! Haha 😁
So, let's meet again next time!
Commentaires