Shrink is a mobile app that helps you discover awesome brands, get cash back coupons and unlock loyalty rewards.
When I first took this project, Mel Yu asked me to focus on designing the user interface of the mobil app. At that time, he was in the process of positioning the whole business model. As the project progress, however, I became more and more involved in shaping the strategy and user experience.
User Interface Design
Mobile App Design
Web App Design
Originally, Mel Yu didn't ask me to make any wireframe; he simply asks me to redesign several pages. He was still trying to figure out the best business model that would be able to attract investors. He honestly told me about many drawbacks that the application had, especially because it was not really user friendly. Redesigning the application was not merely about the interface; he was actually talking about changing the reward system that can be easily understood by users.
Once I understood the objectives, I started from creating the wireframe and user flow. I wanted to make sure that we see the exact same big picture prior to entering the visual design stage.
The overall look of the previous design was quite good. However, there were several crucial points that needed some improvements: font that was too small, choice of colors with low readability and other elements that complicates the design.
My goal was to create a familiar design that is simple and easy to use. There were basically no major alterations. I simply deleted some unnecessary lines and modify the fonts and colors to provide convenience for users.
The next challenge was making people understand about this app. According to Mel, most users failed to understand how Shrink works, which leads to many questions to customer support or people just simply stop using the app.
Honestly, I could not come up with any practical solution for this issue. While I was trying to use this app, I simply felt lost after signing up. I didn't know exactly what to do next and how it works. So, I offered three things to Mel.
The first one was coachmark. We basically needed to go through every single part of the system and review them. We tried to find out which part of the system was most confusing, and what questions arose when users are using this app.
The second thing was an onboarding screen, which is a 3-4 pages that can appear the login page or the redeem page. Mel chose to put it prior to the redeem process, because that's the core of the application.
My third suggestion was to give a short tour. This idea actually came from a game app called Clash Royale. Clash Royale, like most other games, offer instructions for first timers: how to upgrade our skills, how to start a war, or how to buy cards or tools. The purpose was to give a step-by-step guideline and give a sense of achievement once they succeed in following the guideline.
With Shrink, the most crucial part is the redeem process. It begins with logging in to the app until they successfully redeem their receipt, get their points and exchange those points.
When I came up with the 3 suggestions, I realize that users comprehend an application differently. Some users might want to skip the instructions and directly start trying the application. There are others, however, that cannot catch on that fast. They would need this guidelines to be able to use this app conveniently.
I convinced Mel to implement these three items. I could not promise that it would directly lead to a significant progress, but it would give us insights on what the users are thinking; whether or not the users need the extra information.
Lastly, I was involved in designing the website. The website focuses more on displaying the products and listing the brands. The redeem process still needs to be completed through the mobile app.