Redesigning Jollibee Delivery: The Revision (Part 2)

An unsolicited redesign project because I love Jollibee so much

If you haven’t checked out Part 1 yet, head on there first to put things to context.

On the previous posts, I told the reason why I made this case study, determined some “pain points” on the current website, and shared my experiences with ordering through the site.

On this part of the case study, I’ll focus on the Challenges that I faced when I was envisioning a “new” look of the Jollibee Online Delivery System and how I approached the redesign.

Case Challenge

Challenges

Looking at this case study from a Product perspective, there are a lot of business implications when it comes to conducting a website redesign. Apart from the cost, here are some of the things I can think of off the bat:

1. new and unfamiliar experiences for old and new customers
2. constant realignment with the brand
3. time lost in refactoring components
4. constant revisions in the visual design
5. arduous reconstruction and optimization of the database

Given the implications, I challenged myself to approach this study in such a way that the site can be revised with as little work as possible at least on the front end with some consideration on the back end.

Limitations

Even though I had the freedom to do everything I wanted for the “new” design, I had to keep in mind a few things while I was drafting and designing the mockups:

• I’d go for a minimalist visual design but I had to limit myself with the “Jollibee” brand so I interpreted the visual identity on my own and kept the mockups clean but still have that distinct, round, red filled, yellow accented, and fast food look. (I think I failed in this department so forgive me. LOL)
• Since I don’t know the stack of the website, I assumed that some of the components of the site can be called/initiated with minimal refactoring needed hence updating the style is the only thing you’ll need to do.
• I planned to do some illustrations to avoid using the assets on the Online Delivery site but I ended up using them since I was taking up so much time making the assets one by one. (Jollibee gods, please forgive me.)
• I focused on making mockups for the pages that directly involve in the purchasing experience in the site. (I might miss some pages so if anyone sees it or is interested in seeing the pages, just mention it in the comments below.)

Objectives

All in all, here is the gist of what I want to achieve for this case study with the mentality of getting a customer to effectively and successfully order from the site:

• Create a cleaner overall visual design on all pages (palette, typography, layout)
• Remove/restructure recurring and redundant processes in the flow

All other objectives that I had in mind kinda fell under the ones I’ve mentioned so I think that those two reasons are enough.

Discovery

Notes and Sketches

I make it a habit of mine to write down notes and sketch the pages first on paper before translating my thoughts into high fidelity mockups. Although I didn’t sketch for mobile, I bet that the pages that I’ve shared here can be easily translated to a mobile view.

When I’ve already drawn the possible screens that will be translated to high fidelity ones, I normally skip the scanning and usually go straight to Sketch to mock them up.

Logo

Logo concept

One small element I foolheartedly revised from the site is the logo. I’m assuming that — like Coca Cola — Jollibee is already a global brand so I don’t think that there’s any harm with having just Jollibee’s face along with the word “Delivery” as the logo for the Online Delivery System.

Identity

“Style tile”

Since I can’t move on to making the mockups without any visual guidelines, I interpreted and created a simple style guide for me to reference based on the resources that are available online. It’s not much but It’s something that I work with. Moving on…

Redesign

I’ll be comparing the pages by showing the page before and after the redesign. In addition, I’ll be discussing what I’ve changed from the previous design to the new one as well.

Overall, I made cleaner layouts for the pages, used reader-friendly fonts for the text, and used less eye gouging colors for the elements.

1. Landing Page

• One of the major changes that I did is the how the CTA is presented so I placed the promos below and made the Location input more evident. Getting the location of the customer is one of the more important functions of the site so that’s the first thing you’ll see when you look at the proposed design.
• I know that in terms of the visual design, it can be done better because I stripped off all the skeuomorphic elements from the current site. The page I made does not suit the branding but serves it’s purpose of being a clean and functional delivery site.

2. Sign In/Sign Up

• I didn’t do any major changes in the design itself but functionally, it should ideally be a separate component and not something that you can only do after you’ve placed your location so I made it into a modal.
• Ideally, Signing into your account is optional so you can Order as a Guest even without pressing any buttons.
• The Order as Guest button is gone in the proposed design because the new flow that I made goes straight to the Menu after the system gets your location.

• On the current site, you are directed to another page when you want to make a new account. On my proposed design, it should also ideally be a modal so that it’s easier for a new Customer to register instead of the customer going to another page.

3. Menu

• Compared to the current design, I made it possible in the new design for Customers to update their location.
• One thing missing from the Menu in the current design are the prices so I added it in on the proposed one.
• Items that are not available get the Disabled state treatment instead of the “Sold out” text in the current design that’s blending with the background making it unreadable.
• For the categorization, I consolidated the food items into one umbrella category i.e. Jolly Hotdog and Yum Burger meals are now located under Sandwiches on the proposed design.

4. Menu (continued)

• Once again, the prices are not transparent in the options so apart from making the layout cleaner, I added in the prices in a form of increments so that means getting a Jumbo sized fries adds P35.20 to the total price.
• I went ahead and removed the graphics and made the size options into radio buttons instead. The flavors and add-ons remain as dropdown lists since it has over 5 selections.

• Apart from the visual changes, I wanted the cart to be a floating and isolated component in the proposed design instead of letting the cart be on the same level as the menu list.

5. Checkout

• The Checkout page that I made is probably one of the most arguable pages since there are a lot of necessary information needed for online deliveries in general.
• In the current system, the site asks the Delivery Address and Contact Information in two separate pages before going to the Checkout page. What I made for the proposed design is that I comes straight from the Menu.
• Functionally, the cart/right column sticks on the right while you fill the necessary info while you scroll the column on the left. I’m not sure if you guys can imagine it but that’s how I see it function.

6. Confirmation and Post-purchase

• Most pages in the current site have a lot of scrolling components; the Checkout page isn’t exempted from that. On the proposed Checkout page design, I just placed everything visibly instead of having to annoyingly scroll within a component.
• I’ve added new CTA’s on the proposed design as well. I’m not sure if Order Again and Print Receipt is apt for this context but it’s possible to test it.

• Apart from the site, I also wanted to make a quick revision of the email confirmation because the current one’s just plain sad. I added in some elements from the visual identity and drafted a possible email design.

Mockups

If anyone wants to view the mockups that I made in full details. Here’s a link to the Invision prototype.

Conclusion

As I conclude this case study, I would like to say that I’m in no way challenging the people who made the site; I just thought that the site can have a better flow especially since they already made the initiative to redesign the site so why not take it to another level? Great effort from the team who made it happen nonetheless.

Again, all of the things that I shared on the two articles are just my (somewhat) 2 cents of what can be done to improve the ordering experience of the site. Now, it’s up to the stakeholders if they want to iterate the website or not. Unless we can test my hypothesis with real target customers, there’s no way for us to know if what I shared are effective or not.

Reflections

1. I don’t know why I did this but it was a good learning experience as a creative who should be looking at things from a Product perspective.
2. I was able to apply and exhaust all the processes that I know in relation to UX onthis case study but there are a lot of things that I definitely still need to learn if I’m going to push through this career path.
3. I’m definitely gonna need to write and read a lot more to improve my writing so I’m sorry if I’m still not consistent with my writing process.

Topic Recommendations

Here’s a list of possible topics for those people who want to take the case study further:

• Mobile view and experience experiments
• Performance optimization for the current site
• Feedback gathering and usability testing with target customers
• Market research in ordering through online vs. through call
• Test research on a translatable website

This has been exciting and fruitful! If you have any comments, inputs, suggestions, or even violent reactions, just post them in the comments section below. I would really appreciate all the constructive feedback that I can get. 🤘

If you’re interested in connecting with me, you guys do so on Twitter. If you want to work with me and want some references, head on to my Website.

Thanks!

Jelvin