Subscription Buddy
Why Subscription Buddy?
​
Handling subscriptions of multiple applications are becoming a hassle nowadays. Due to the high usability of online applications, it becomes quite common and every 1 in 5 people uses some or other applications nearly two times a day.
Remembering multiple application's subscription renewal dates, canceling subscriptions from being renewed, and managing different applications is not a piece of cake for those already engaged with other important things. So, we decided to create an application that solves the problem of handling multiple subscriptions.
We completed this project as a part of a graduate course in User Experience Design during the Spring 2021 quarter at Seattle University.
​
Team Members :
​
Aishwarya Superkar asupekar@seattleu.edu
​
Disha Patel dishap7195@gmail.com
​
Man-Ki Wong wongmanki82@gmail.com
​
Pankhuri Barjatiya pankhuribarjatiya@yahoo.com
About Our Project
SubscriptionBuddy handles all food apps that you subscribed to. It provides two features, subscription management and showing special offers and deals on nearby restaurants. It is a single platform for keeping track of all subscription fees and billing cycles so that it will save time and provide better planning on the individual's spending habits. It also gives information for deals available across all the nearby restaurants and allows users to save the deals for future use.
Personas
We picked software engineers as our primary persona and food bloggers as a secondary persona. Since most of them are working from home now, they tend to spend more on food as they are more flexible to spend their time. Also, their work may get busy, and they just want to search for the quickest and cheapest one among all the apps.
Moreover, we picked both, single and family with children, to get a broad idea of how they will spend on the food app since their reasons and considerations could be different. For example, singles tend to spend more when they have friends coming to visit their home. On the other hand, a mom with 2 children in the family will only spend when she is too busy and doesn't have time to cook.
Design Sketches
For designing sketches we first brainstormed and figured out how many pages our website "Subscription Buddy" should have. Out of 40 sketches, we decided to pick the 10 most promising sketches for our website and move forward with it. Out of 10 sketches we chose 4 sketches that we want to include in our process blog.
​
These sketches give basic information for what we want to have in our design as they are just the low-fi sketches and our first attempt. Some of the designs got a bit modified as we thought we need to add more functionalities to the page to make it more intuitive and UI-friendly.
Sitemap
A sitemap is a visual representation of pages of a website, or, in our case, the mobile app used in our system. It shows the organization of components in our system.
The purpose of the sitemap is to provide the information architecture of our mobile application. We created our sitemap after visualizing how the experience that our user might have while using our application. It helped me see the features that we need to implement and our sitemap summarizes all the information we have in our application.
After Drawing the design sketches we all had some idea of what the app might consist of and what features it would have. Based on the sitemap, we were able to draw up a paper prototype using the information architecture because we knew what information should be stored in our application.
Paper Prototype
The paper prototype is a quick and easy tool used for testing our design. We hand drew our design on paper to create a prototype of our user interfaces. After we completed our sitemap, we were able to see the series of steps that it would take to complete certain tasks. This helped us determine buttons and features that would go on the application to optimize its functionality.
The purpose of paper prototyping is to present usability testing, where the user will go through a series of tasks using our prototype to see how efficient our design currently is. Feedbacks and results from the usability testing of the paper prototype will help further the development and improvement of the application.
​
Annotated Wireframes
Our annotated wireframe was one of the last parts in the goal-directed design process where we were able to create how our application will look like. The purpose for this was to portray a quick and easy way to understand the sequence of how each screen will look and where certain buttons would be created. ​We added annotations so that it is clear where we would use drop-down menus, certain button click events, etc.
This step comes after the paper prototype. After drawing the paper prototype, our team made small decisions such as which buttons to use, what font to use, etc. After deciding upon such criteria, we started our annotated wireframes, and keeping the paper prototype in mind, we modified some things and implemented them in the wireframes. After this step, it was time for us to move towards High-Fidelity prototypes where we would be creating what the application would finally look like.
High-Fidelity Prototype
The last step of the design process is the High-Fidelity prototype. High-Fidelity prototypes are close to the complete representation of the app, what the design will look like when it's ready for the user to use. They are refined versions of wireframes. They contain color and details that should give the user an idea of how to interact and navigate through the app without the user needing the details and design rationale provided in the annotations from the previous step.
For the High-Fidelity prototype, we started with selecting the color scheme we wanted. We ended up selecting red and white for our application. Then we decided upon which buttons to choose and then after making these small but important decisions, we started creating the High-Fidelity prototypes. Below are some of the High-Fidelity Prototypes.
