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.
- Landing Page designs.
- UI, UX Design for the business owner system.
Part 1: Landing, Sign In and 404 Pages
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 loading animation:
Okay, as you notice below the sunshader background color is red. SVG is awesome, you know!
See the error animation in the below video:
We are humans and sometimes we forgot our password, aren’t we?
In case the user lost, we will guide him to the right way :)
See the door opening animation:
Part 2: Logged In Pages
I moved on to what will happen after signing in. First, I started with the dashboard design. Below is the initial layout:
Oh my eyes. This design has some issues:
- The icons in the sidebar are not obvious, indicates that it’s off or not working.
- Inconsistencies between the font sizes.
- Sidebar width should be smaller.
- Bad placement for the dashboard items (customers breakdown, social activity.., etc).
I did some small changes for the layout as the below design:
Unfortunately, the design is still not good. I refined it completely and got the below result:
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:
We didn’t like it since it was not looking good. Here is the final design for the dashboard:
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:
Again, Oh my eyes. This design has some issues:
- The blue header at the beginning of the page is taking tooooo much attention. Could be solved using a tiny button!
- The contrast between the sidebar and the main content is not good.
- Products listing is not comfortable for the eye, notice the double rounded corners.
- Pagination look and feel is depressing.
I did some changes and came out with the following design:
hmmmm ok, it looks better but still has some issues:
- The big header is still taking too much space.
- It better to show more items per row (around 4).
- Search placeholder is in blue, it’s confusing and look like it’s active. Better to by in grey.
- Notice the circles pattern at the top of each thumb, it got rejected.
Alright, here are the final designs:
This is what will appear in case the user did not upload an image for the product:
Empty states are important. In case there is are no products, the user will get the following:
What about the items loading? I created a jumping animation from Swipt logo. See it below:
Below is the animation for this page:
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:
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:
- Unique offers: the user can only create one type of it.
- Multiple offers: the user can create as many as he wants.
Below is the initial layout for this page:
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:
- 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?
- 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.
The design still has some issues:
- 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.
- 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:
Then, we changed that concept into a dropdown. The user pick the offer type and he will get the past offers (If available).
Remember when I said that this page took a lot of time? below are two additional designs that we rejected and changed.
Alright, now I will show you the final design that solved all of our issues:
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:
This page will provide the business owner with the ability to create new push notifications for the offers.
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:
Locations for KFC:
The user will have the ability to view an activity for a specific offer, like the below design:
Part 3: Public Pages
These pages could be accessed without an account.
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.
Lessons I learned the hard way:
- 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.
- Never accept working on a project when you don’t have full details about all the pages.
- 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.
- 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!