About the product

Have you ever found yourself in a situation where you had to buy more to save some money?, Have you ever bought two pairs of the same items just because of the BOGO offer, but never used the second one?, Have an offer ever put you off just because you do not want two similar items?

If yes, then SplitnSave is the perfect solution for the situation. It is a mobile application used for selling and buying deals/offers at a discounted price. It is operational in some states of the USA.

How it works

Let’s say, you got a BOGO(buy one get one) deal, but you want only half of it. You take a picture of the offer, post it on the SplitnSave mobile application and ask for a split price which in this case might be 50%. When someone agrees to your deal, you and the person each gets half of the deal and save 50% of the money.

The Challenge

Searching for a deal offline and online from the plethora of retail stores and websites has become an intricate process over the years. It is almost impossible to find an offer on things we want to buy. So, the challenge was to design a user-friendly interface which allows users to upload and share any coupon or deal running at a store or on a website with nearby people and build a clean chat interface to facilitate easy communication between buyers and sellers.

Old Designs

These are some of the old designs.

The designs were pretty raw and old. They were designed to validate the idea in the market as quickly as possible. However, we shouldn’t be too much focused on the idea validation and ignore a good and a user-friendly interface that empowers its users to use the product easily and efficiently. There should always be a balance between these two. When a product lacks these basic attributes and does not comply with the basic rules the chance of people using it drops significantly. In the old design navigation system, layouts, color choices and font selection were poorly chosen. There was extraneous and irrelevant content on some screens which was distracting and making users less efficient. So, to learn what was wrong and what was right in the design, the first thing I did was analyzed the old interface and wrote down all the issues based on the user’s suggestions and feedback in the design as well as in functionality so that I could avoid and improve them in the new design.

The Design Approach

I used User Centered Design(UCD) approach throughout the design and development life-cycle of the project which emphasizes on end users who are going to use the product. The steps I followed are:

1) Requirement Gathering
It involves user research and stakeholder interviews to collect sufficient data about the business and users.

I started this step by taking stakeholder’s interview as they were the point of contact for both client and the team. They had all the information about the product required to lay the ground for the product functionality. I prepared some basic questionnaires which include questions like “what is the product all about?”, “What is the market size?”, “Who are the competitors” etc. Once I had enough functional information on the product, I conducted an interview with the client who was the point of contact for end users. I asked them basic information about the end users, their demographic information, needs, behavior, pain-points etc., as well as verified the data I collected from the stakeholder’s interview which would help me to lay the foundation for the next design step.

2) Modeling
It involves creating personas, process/task flows, developing use cases to educate every in the team about the in's and outs of the product and the requirements to make them cognizant about the product functionality and target users.

I started this process by creating a persona which represents our end users based on the data collected in the previous process. It consists of all the information about the end users like demography, motives, goals, pain-points and needs. This was an important artifact which would help the team to focus on the end users rather than making their own assumption about them through the design and development life-cycle.
I took the inspiration from xtensio for the persona template and created on by using photoshop. These days you can find many free or licensed persona templates on the internet. So, you don’t have to create them from scratch.
Based on the information client gave us about the target users, I created this persona which represents a user group which consists of women between age 24–35, who love shopping and spend a good amount of money on it. They believe in smart shopping who always look for deals and offers before buying anything. I have attached the persona below:

After persona was ready, I started working on the process flows for every task so that everyone can understand the product functionalities quickly and can focus on creating a solution around them keeping target users’ (personas) needs, as well as the needs of the business in mind. Some of the process flows are below:

3) Prototyping
It involves conducting design studios, which include all the designers, developers, and stakeholders, to create basic, low fidelity wireframes on the paper, converting them into high-fidelity wireframes and creating interactive prototypes.

At this step, I had enough information on end users and product functionality, so I started conducting design studio for each task mentioned in the previous step. I asked every team member to draw their ideas/solutions on the paper. After everyone had their ideas on the paper, we started discussing them. I asked everyone to show their sketch to everyone one and tell them how this sketch suits to the solution we are trying to solve. At the end of the every session, we together decided the best solution for each task. Some of the paper mock-ups are below:

Once paper mock-ups were ready, I converted them into wireframes using photoshop and send them to stakeholders for further review. Once they agreed on the design solution, I created a color palette for the project. One by one I started applying the color scheme to each wireframe. Some of the high-fidelity wireframes are below:

Color Palette


4) Evaluating design
It involves testing the design solutions with the real users and stakeholders by conducting usability testing and redesigning it based on the feedback.

The product was going to launch in few states of the USA but the development was happening in India. So, I did not have the privilege to meet the actual users and conduct usability testing. However, we conducted some basic testing sessions for both the Android and iOS platform in the USA with the help of Google Play alpha/beta testing program and Test Flight respectively and got some really good feedback. After incorporating these feedback in the existing design we launched the product on the both the platform Google play as well as Apple store.

Take away

It was my first project in Ananth Technologies where I was redesigning the entire mobile user experience for both Android and iOS Plateforms. There were many challenges through out the course of the project like getting information about the end users, learning about the marketplace, collaborating and communicating with the client remotely. In the end, everyone was happy with the process and the result and we were able to launch the product before the due date.






© 2018 www.ravisurana.com. All rights reserved.