CLiQQ Website
REDESIGN / ARCHITECTURE / MOCKUP / PROTOTYPE / INITIAL COPYWRITING / HTML & CSS / RESPONSIVE CODING / PUSH CODE TO GITLAB & NETLIFY
Embedded Files
Project overview
The product
CLiQQ is the official 7-Eleven Philippines rewards programs that have features like for CLiQQ WiFi, Rewards and Payments. CLiQQ Rewards is a loyalty rewards program where you earn points by presenting your loyalty barcode every time you buy at 7-Eleven. CLiQQ Wallet is 7-Eleven Philippines’ mobile wallet. Use your mobile phone to pay in store, quickly and convenient, you even earn points at the same time! You can also add credits to your CLiQQ Wallet through loans. Select from our secured loan partners and get verified.
The goal
Redesign the CLiQQ website to increase brand reputation and awareness and improve the customer experience. Help users who are returning and new users navigate and browse in the website easily.
Research
I conducted a research using Heuristic Evaluation by Jakob Nielsen. Evaluation that allows us to identify usability issues without the involvement of users for CLiQQ WEBSITE. As a designer, we should regard heuristic evaluations as an inexpensive sanity test to easily identify potential problems based on feedback, data and usability principles.
Design before the update
Research findings:
Users have an assumption that CLiQQ website is only about CLiQQ Shop since it is the first section highlighted in the website.
Location of the subscribe to newsletter section looks misplaced. No need to highlight this in the second section since this is not the main focus of the website.
Re-evaluate if we want this feature highlighted more.
The information stated and the download app button is confusing since it is not stated if it is referring to the rewards mobile app or CLiQQ shop.
Digital Wireframe
I started making digital wireframe using Balsamiq, an outlines or sketches of a product. The goal of digital wireframes is to add enough detail to product that users can understand its basic features and navigation.
High-Fidelity Design
How I Maintain the Website
STEP 1:
Receive System Request Update
Form includes the background of the update and action point. This signed form is approved first by the supervisor.
STEP 2:
Start Coding
I use Visual Studio Code as my editor. I also make sure the page is mobile responsive using media query.
STEP 3:
Push changes to staging for approval before pushing to production
After coding, i push changes to my branch. This push will generate a netlify link that I share to the requestor for approval. After approval, I create Gitlab request to our IT to merge the branch to master.
Supporting Loans Page
Before we promote the loan partner to the site we make sure that we tested the app/website end to end. Below are the loan partnership journey and the tasks involved.
Get in TouchLINKEDIN: /grace-villaver-ux | EMAIL: marygracevillaver@gmail.com | MOBILE: +971 55 524 7943
Page updated
Google Sites
Report abuse