Skills and Tools
1. User Interviews
2. Usability Testing
3. Heuristic Evaluation
4. Sketch App
Overview:
Goflyla.com is a website provides discount code of travel partner, their income model is to create unique visit for partner website (booking.com, Hotels.com, etc.) through Goflyla.com. They want to generate more click rate from mobile website users, so they hire me to be the UX designer to study their product and give professional recommendations.
Team and Duration
1 designer
1 week
Main Objectives
1. Be user-friendly when user browsing on mobile, improve the possibilities that users will get the code on mobile.
2. Do not affect the revenue generation of the site. (Code conversion to partner website.)
Secondary Objective
1. Improve overall interaction and site experience.
Improvement area
As an essential workflow, interviews and product testing with users are inevitable. After certain amounts of interviews and product evaluations, a few recommendations are suggested as below:
Code Content Layout
There are mobile version home page(mobile.jpg), the mobile code page (Mobile code.jpg) and the desktop version (Coupon Code Page.jpg) at below. Design base on responsive design, knowing that creating another m.mobile site will require longer development time, changing the current layout and make it mobile friendly would be the best option. On both desktop and mobile version, the layoutchanged to row based and show limited information for users to browse all in a glance, and then they could decide which one to look at the details by pressing “show code” button. On desktop version,there is an option for users to press the “show details” button under the description, to check the additional information like expiry date.
This design allows the code description box to remain the same height and size and give users an aligned browsing experience.

Mobile.jpg

Mobile code.jpg

Coupon Code Page.jpg

Code Page Extend.jpg

The Current Version
Their original design back in 2017, which is similar to the below layout currently shows in the website. However in mobile version, they showed the full rectangular box in mobile with photo banner on each box, as a result, mobile user could only allow to see one code on their mobile screen. If they want to see more, they need to scroll down one by one to see each of the coupon code box.
*Goflyla.com has changed the mobile website design by taking out the photo banner on top of each box to allow mobile user to see more content in one scroll. For details you can visit their website - mhk.goflyla.com on mobile. 
Interaction after clicking “activate code” button
The current interaction after users press the “activate code” button is below:
For desktop site, people can easily recover from the change on the website when partner site pop up, they can see the new tab appear on their browser. However, when it comes to mobile site, new tab will take over the page and users will easily get confused.
To solve the confusion, new process is suggested:
Information on the code details page
Current code details page showing an instruction and require customer to copy the code themselves.As most of the users know about how code works, if not, they should have already read theinstruction on the home page, in this code detail page I would suggest putting information that could arise their urge of using the code. The number of days remaining, it might require some coding too to set the formula.​​​​​​​
For current design, it could change as below:

Current Code Details.jpg

Iterated Code Detail.jpg

In the iterated version, remaining valid days become the important information, and the button becomes a copy action and open a new tab for partner site.
There is another version suggested, based on interview findings that when people looking for coupon code, they would have the partner website opened and get all the information ready before acquiring the coupon code.

New Code Detail.jpg

New Code Detail Step 2.jpg

So, the new version allows users to copy the code by pressing the button and get respond on their action, after that they could use the code on partner site they have opened or open a new tab, or on partner’s app.
To Conclude:
All the above design iteration are based on users feedback, further usability testing are conducted with small group of users. Most of the result were positive on giving a clear flow on the website, avoided some misleading tab jumping around from the previous version. My client took the deliverables and they will discuss further in their internal design meeting.
End of Case Study - Goflyla.com - Website Improvement Project

You may also like

Back to Top