What is Swipt?

Swipt is a gamified mobile loyalty solution which allows small to medium sized businesses create their own customized programs. In this case study, I will walk you through the different designs I made and the Front-End approaches and technologies that I used.

Roles:

  1. Landing Page designs.
  2. UI, UX Design for the business owner system.
  3. Front End Development (HTML, CSS, Javascript).

Part 1: Landing, Sign In and 404 Pages

Landing Page

Swipt Landing Page
Swipt Landing Page

Sign In

I got this page concept from the idea that each store will have a sunshader to protect it from the sunlight. So, I designed it in Adobe Illustrator and exported it as an SVG element, Why? follow up with me and you will know the reason for choosing SVG.

Sign In
Sign In

Sign In loading animation:

Sign In Active
Sign In Active

Okay, as you notice below the sunshader background color is red. SVG is awesome, you know!

Sign In Error
Sign In Error

See the error animation in the below video:

We are humans and sometimes we forgot our password, aren’t we?

Forgot Password
Forgot Password
Forgot Password
Forgot Password

In case the user lost, we will guide him to the right way :)

404 Error
404 Error

See the door opening animation:

Part 2: Logged In Pages

Dashboard

I moved on to what will happen after signing in. First, I started with the dashboard design. Below is the initial layout:

Dashboard Initial Layout
Dashboard Initial Layout

Oh my eyes. This design has some issues:

  1. The icons in the sidebar are not obvious, indicates that it’s off or not working.
  2. Inconsistencies between the font sizes.
  3. Sidebar width should be smaller.
  4. Bad placement for the dashboard items (customers breakdown, social activity.., etc).

I did some small changes for the layout as the below design:

Dashboard Initial Layout 2
Dashboard Initial Layout 2

Unfortunately, the design is still not good. I refined it completely and got the below result:

Dashboard Initial Layout 3
Dashboard Initial Layout 3

Things started to look much better. At this stage, the client said “What about removing the fill color for the block header and making it outlined?”. Like the below design:

Dashboard Initial Layout 4
Dashboard Initial Layout 4

We didn’t like it since it was not looking good. Here is the final design for the dashboard:

Dashboard Final Layout
Dashboard Final Layout

Products Listing

This page should list all the products for the store. The business owner will have the ability to add, remove, edit, filter and search for items.

Here is the initial layout:

Products Initial Layout 1
Products Initial Layout 1
Products Initial Layout 1
Products Initial Layout 1

Again, Oh my eyes. This design has some issues:

  1. The blue header at the beginning of the page is taking tooooo much attention. Could be solved using a tiny button!
  2. The contrast between the sidebar and the main content is not good.
  3. Products listing is not comfortable for the eye, notice the double rounded corners.
  4. Pagination look and feel is depressing.

I did some changes and came out with the following design:

Products Initial Layout 2
Products Initial Layout 2

hmmmm ok, it looks better but still has some issues:

  1. The big header is still taking too much space.
  2. It better to show more items per row (around 4).
  3. Search placeholder is in blue, it’s confusing and look like it’s active. Better to by in grey.
  4. Notice the circles pattern at the top of each thumb, it got rejected.

Alright, here are the final designs:

Products Final Layout
Products Final Layout
Products Final Layout
Products Final Layout
Add Product Modal
Add Product Modal

This is what will appear in case the user did not upload an image for the product:

Product Thumb Empty
Product Thumb Empty

Empty states are important. In case there is are no products, the user will get the following:

Products Empty
Products Empty

What about the items loading? I created a jumping animation from Swipt logo. See it below:

Products Categories
Products Categories

Below is the animation for this page:

QR Codes

For this page, there was not so much back and forth since I learned from the issues in the products page. Here is the final design:

QR Codes
QR Codes

Offers

This is the page that took most of our time, it was complex and a lot of data must be obvious to the business owner. The idea is that you can create two types of offers:

  1. Unique offers: the user can only create one type of it.
  2. Multiple offers: the user can create as many as he wants.

Below is the initial layout for this page:

Offers Initial Layout
Offers Initial Layout

Let us welcome the sunshader concept again! As you see, I added a sunshader at the top of the page to simulate the idea that this is a store that holding offers.(Stupid, I know :p).

This initial design has some issues:

  1. Notice the “Slow Days and Times” offer, this is a multiple one. I only added one offer inside it and did not count for more. Imagine if I’ve 50 offers, how this design can handle them?
  2. Showing the page fields is taking too much space.

We solved the issue #1 in the below concept, by creating two different pages for the unique and multiple offers.

Unique Offers
Unique Offers
Multiple Offers
Multiple Offers

The design still has some issues:

  1. The page height is too big so if a user want to create a new offer of type “Non Frequent”, he need to scroll down the whole page.
  2. What if we have 500 old offers? how the design can handle them in a usable way?

At first, I thought that we use the accordion pattern to view the past offer. As the below design:

Past Offers 1
Past Offers 1

Then, we changed that concept into a dropdown. The user pick the offer type and he will get the past offers (If available).

Past Offers 2
Past Offers 2

Remember when I said that this page took a lot of time? below are two additional designs that we rejected and changed.

Special Offers - Rejected
Special Offers - Rejected
Special Offers - Rejected
Special Offers - Rejected

Alright, now I will show you the final design that solved all of our issues:

Special Offers - Final
Special Offers - Final

The idea is that the user can pick any offer type, and he can add it. When the user pick an offer that has past offers, it will show them in the table. Once we started the Front-End work for this page, the client requested that the table should have an edit button, when clicked it will bind the row data to the offer view.

See the edit button animation:

Push Notifications

This page will provide the business owner with the ability to create new push notifications for the offers.

Push Notifications
Push Notifications

Merchants List

Merchants List
Merchants List

The business admin will have the ability to view a list of all his stores. For example, KFC, McDonalds, XYZ. Each store has a profile that view it’s info and different locations.

Once the user opened an item from the table, he will be directed to the profile page as below:

Merchants Profile
Merchants Profile
Merchants Profile - Edit
Merchants Profile - Edit

Locations for KFC:

Merchant Locations
Merchant Locations

The user will have the ability to view an activity for a specific offer, like the below design:

Activity
Activity

Part 3: Public Pages

These pages could be accessed without an account.

Product
Product
Store Location
Store Location
Offer
Offer

Part 4: Front End Development

I used BEM naming convention for CSS and the 1-7 pattern for arranging the SASS files. I ended up with 34 different .scss files. I learned a lot from working on this project.

Swipt Front End
Swipt Front End

Lessons I learned the hard way:

  1. Don’t follow the agile methodology when you are the person who design and code. It will be hard sometimes to be aligned with the project timeline. Finish the designs, then move to the Front-End coding.
  2. Never accept working on a project when you don’t have full details about all the pages.
  3. Before starting to work on a new project, work on a content inventory or content map for the whole project. You must know exactly what the content is for each page. This is very very important specially in large-scale projects.
  4. From a responsive design perspective, never accept to work only for desktop screens. The client requested that he want only to support tablet and above. Sad.

Finally, thank you very much for reading all of this. Hope you have learned something new and enjoyed watching my work process. Have a nice day!