Doripod is an reward app which is suffering from bad user reviews and misleading user flows that confuses users who just downloaded the app. I took up this project from my hackathon mentor who is one of the co-founders of Doripod. My task as a UI/UX Designer will help Doripod from doing user research to building interactive prototypes. I have also come up with my own UX process that help guide me and my client into understanding the problem to designing the solution for Doripod.
Every idea or wireframe is frequently tested by myself and other stakeholder if any of us find any problem or solution I will need to bring it back to the Ideation phase to sketch out the flow and solution on a piece of A4 paper.
According to the reviews of the app on Google Playstore which are bad the app is experiencing ridiculous flow issues and SMS verification issue. Each of the review scores are only 1 star which is very poor because it is the lowest rating you can get.
I tried it on myself by downloading the app and also got confused by the user interface and flow of the app. It certainly needs a complete revamp.
The first thing I notice when I use the app is that it didn't ask me to sign up. When I try to access other areas of the application it ask me to log in instead. I have to explore around to search for the sign up action button. What I found out in the end was that I need to access the login page to able to locate the sign up action button.
The sign up flow and transition is very poor in Doripod.
As Doripod is a reward app from shops, customers will need to register themselves to a specific shop/merchant to be eligible for point, voucher redemption and e-wallet usage.
The flow of a customer finding the register button is confusing enough for them to abandon the process and the customer acquisition part has already failed. Another issue is that there may be a chance that a customer cannot register to the merchant or store because there is no option to which is disappointing and frustrating for the customer after going through all the steps.
To be able to find inspiration and solution for Doripod, There are a lot of apps that rewards their users by having them to complete certain task or action but the ones I have selected focus on e-wallet and coupon redemption . I downloaded some new apps and also talked about the ones that I have been using.
4. Touch ‘n Go eWallet
I sent out a Google form to my friends, colleagues, and also posted it on Facebook to gain some traction. I got 31 responses. Before looking at the charts and graph some general insights collected is more than 95% of the respondents are working adults and 41.9% of them exist in the age group of 45-54 years old.
As expected the amount of e-wallet users is still more than non-e-wallet users.
An interesting insight about the types of e-wallets being used in Malaysia. The results actually lead me to create another survey to further investigate the reason behind the high usage of GrabPay and Touch 'n Go eWallet.
Since most of the e-wallets are associated with rewards and loyalty the assumption has been confirmed customers use e-wallets to gather points and redeem rewards.
I also gathered data on people who prefer the traditional payment method and their reasons behind it.
Cash is still considered to be easier to use compared to digital wallets in Malaysia.
After going through results and found out that GrabPay and Touch 'n Go eWallet has the highest user rate in the research I decided to conduct another in-depth survey on these 2 apps to find out the reason behind the high usage.
My assumptions are right for TnG eWallet.
My assumptions are right as well for GrabPay.
I created 2 personas who are May and Steve from the first and second survey to further visualise who I am designing for.
To understand more about the personas I created, I illustrate their daily life story to further explain how they perform in their daily life.
I use Miro to write out ideas on digital sticky notes together with my client who is a developer and business stakeholder. He wrote down his ideas as well for Doripod. We discussed about the ideas generated via Skype to pin down necessary actions.
From the research datas, user personas, stories and discussion. Here's the few components we think that Doripod should have.
Some early sketches done for Search, Point Collection, Viewing voucher, etc. There will be more sketches to visualise different iterations after multiple rounds of discussion and testing with stakeholders. Sketching is never done in only 1 phase it is continuously iterative.
The image above shows you the entire medium fidelity of Doripod prototype. It is actually separated by sections like registration process, on-boarding process, applying merchant membership, etc. I have also created frames (or artboards) that shows the evolution of some parts of the application. You can view the wireframes here
2 discussions were held through Skype to agree on parts that can be implement and also find missing parts that should be inside of the application.
The image above shows 3 versions or iterations of the Home page design. It started out as just plain display and with too much whitespace at the bottom. In the 2nd version, I added a search function on top of it and also redesign the entire merchant card to display more information. After discussion and minor testing with stakeholders I added another section just below the search bar. The new merchants section.
On number 2, I added a micro interaction on the merchant which enable users to save their favourite merchant immediately. After discussion I iterate again and made some huge changes to both saved merchants and its navigation. Number 3 shows that Saved navigation button has now been changed to Membership navigation button. I moved the Saved page and integrate it with Merchants page by having a tab function to switch between two different information.
Version no.1 has 3 tabs to display the history/activities conducted with the merchant. It also has a point display for point or stamp collection. Version no.1 was designed with the idea of enrolling to a merchant means enrolling for a membership without membership a user can't do anything with it. On number 2, I reposition how information is displayed and added a button that will direct users to the merchants membership page where they can redeem vouchers and collect points (it acts as a virtual member card). This version enables users to use vouchers that is not limited to only members of the merchant.
Replacing Rewards page with Membership is the biggest change of this part. The membership page will act as a page that stores all your membership subscription or cards where you can easily access them. The 3rd version is a minor text change on availability of vouchers.
This is a new page that shows details of a membership of a merchant. This page can be accessed from Merchant Details page or Membership page. No. 1 shows that vouchers have thumbnail images and I later removed it in No. 2 as I find it wasting too much space. In No. 2 I also added text button to afford actions on the vouchers. If a voucher has not been purchased then it will display "Purchase voucher" else it will display "Use now". After some discussion with my client we decided to put the thumbnail image section back and reposition the button to be more organised.
The discussion also helped me to include some important minor features to merchant details page. I added a icon that signifies more function where users can copy the merchant's address, share merchant's page to friends and also open merchant's location on Google Maps or Waze for navigation. We chose No. 2 because user can still save their favourite merchant immediately with extra functions just right beside it.
The comparisons above are selected to be shown here because they have gone through some significant and interesting changes throughout the iteration process. I cannot share the link to the mid fidelity as it a paid project but if you are interested you can email me to get to know more about it.
This is the high fidelity prototype of Doripod. I built the new interface with the foundation of Google's Material Design Guidelines and UI Kit because I wanted to learn about the design system.
These are the 2 final discussions with the team that has developers and business stakeholders to test out and iterate or add mini functions around Doripod. I chose some of the most important parts in the prototypes to indicate the iterations.
The navigation bar has 3 iterations throughout the design process because we decide to prioritise E-wallet page over Profile page.
The most important page in Doripod as it the first page when any new or existing users will see.
The membership details page can be accessed in both merchant details page and rewards page.
The finished prototyped is then imported into Zeplin where my client can then exported it into code. Feel free to play around the prototype here
The biggest challenge in this project is leveraging business needs and usability of the design because I need to learn how the business work and implement it into my designs even though sometimes it is a bit feature packed but it’s my job to balance it.
Communication is key in this project. We had a total of 5 Skype calls in the span of 3 weeks. We need to listen to each other’s opinion and in the same time provide constructive feedback to the ideas suggested from software developers and business executives in the team.
The first thing that come in mind will be the interactions. This is because I wanted to learn about micro-interactions and its effect on user testing.
The second thing will be actual user testing with external stakeholders. The testing and evaluation has so far been done by 1 external stakeholder who is my father and he managed to interact with the interface without much problems.
My client is very helpful and also gave me full authority and flexibility to design the UI. I am grateful to have them as clients. They also listen to my research data carefully and also thankful that the data I provided is actually useful for them in the future. I hope I can see my designs in action in the next few months after they develop it.