Done and Dusted

Updated by Anmol Maini (December 3, 2015)

Oct 13, 2015 · 17 min read

We finally finished our application this week!

Our Coders had a fun Thanksgiving Break spending several hours writing thousands of lines to complete the application.

The past couple of days have been very busy:

  • Testing the application
  • Coming up with our pitch deck
  • And practicing our presentation to impress the investors.

We decided against doing a live demo in our presentation because seeing countless demonstrations previously, we all know that it usually doesn’t end up perfectly (even when Apple does it in their conferences!)

So, we decided to make GIFs out of how our app flows, and use that in the presentation. GIFs are short videos that keep looping, so it is perfect for our situation to show all the features of the application. And we are able to break our app up into small segments because of these GIFs.

Sample GIF used

The presentation went great, and we believe that the sharks were very impressed with our app and are likely to fund us. We do have some goals for future implementations of the app, which are:

  • Gamification: Have a points system to reward users for doing their chores. And in the future we hope to tie up with grocery stores and users could redeem their points for buying daily essentials.
  • Events: We want to also tackle the social aspect of living with other people. We haven’t decided how we plan to do this yet, but it will involve spending more time with your roommates doing things you collectively enjoy.

I would say the project was frantic at times (especially towards the end), but turned out great because everything worked!

And that’s us signing off!

Unanimously Voted as the best GIF on our Slack

Implementation Week Begins

Updated by Ellen Yang (November 23, 2015)

This week, our team began implementing and finalizing screen designs based on the user feedback we received.

Our team started out the week by listing out the steps that we needed to accomplish, categorized the tasks between coders and designers, and began to delegate the tasks to members.

Our coders divided up the work amongst each other and are working on both the back end and front end of the features and will consolidate them in the near future and then implement design decisions. Some execution goals we discussed are listed below.

Execution Goals:

  • iOS based.
  • Get dummy backend in place (make applications not network-connected), but at least able to store data for the lifetime of the presentation, preferably with sample data (this makes more sense if we have iOS application, web application probably means data has to be put on the web regardless, unless we have a SPA where everything is cached locally).
  • Make application storyboards/segue based.
  • Groceries frontend to be worked on separately, and then merged in at the end of the week.
  • Assess at the end of the week, if we want to move to hybrid ionic.
  • If time, make data sent to external database to allow multiple users, save data between uses.
  • Work on finances and Venmo integration.
  • Work on chore board -> bulletin board should be a direct port of this.

Our team’s designers polished the logo and app icon, decided on in-app icons, and finalized screens for some of the features based on the feedback we received during the formal user testing. Some design components we primarily worked on were the color, content, and layout of the screens.

Polished App Icon & Logo
Some screen designs we worked on

Finances are Complicated (Week 7)

Updated by Jason Lo (November 16, 2015)

This week, our team implemented a prototype detailing the current vision of our application. We then did formal user testing with other groups in order to pinpoint present weaknesses and general places for improvement.

Last week (and a little bit this Tuesday) we sat down and solidified the core ideals of our application, what we want to accomplish. We knew even back in week 1 that we had too many ideas that we wanted to implement, and that we’d have to majorly cut back if we wanted to avoid the application becoming too “large”.

Even after mass consolidation, we realized there were a few sticking point with features in our applications. Finances in particular was a set of features that we knew we wanted to have, but not exactly how we wanted to have them. It’s a complex page — it has to represent the debt that’s been collected, the items that led up to that debt, and the relationship of what’s owed between the various members of the apartment. It’s also about money at its core, a very sensitive topic, so we need to make sure that we approach it smartly. It’s definitely a page that we had to play with, and continue to play with in the future.

One of the things we decided early on is that we wanted our application to be dedicated to mobile, and to iOS at that, given that most of our development group owned iOS devices. This ends up making design a good bit easier — iOS and Apple have a set of established design guidelines, both represented in Apple’s official docs, as well as the many, many iOS applications that our team have used in the past. This means that we can reuse existing paradigms in our application, such as the five-button tab bar for internal navigation, or the pop-out chat bubbles to display messages.

Our team members then put together a really cool prototype using the awesome Marvel service. It’s pretty simple — you upload the screens that you’ve drawn externally, and then make buttons within the service to link the pages together.

Using this demo, we were able to get really helpful feed back on our applications. Some of the critical feedback was

  • “What does money in the finances page represent?”
  • “The color of this button makes the text hard to read.”
  • “How do I get home?”
  • “I want to be able to check off finished chores.”
  • “What do Phetched and Phetch It mean?”
  • “I want to be able to delete my house.”
  • “What if I don’t have Venmo?”
  • “What do the category icons on the Phetch It page mean? How are things categorized in general?”
  • “How does this chore wheel work??”
  • “Who initiates money transfers?”

There was a good amount of positive feedback as well. The common themes though were that although some of the features were cool, they needed some up-front explanation in order to be fully utilized. We need to make sure that our application is more intuitive and discoverable, hopefully without having explicit tutorials.

Consolidated Personas & Storyboards (Week 6)

Updated by Ellen Yang (November 10, 2015)

This week, our team discussed the feedback we received from last week’s informal user testing and agreed on some design decisions based on that. Additionally, we looked over our previous personas and storyboards along with the feedback we received to create three new personas and storyboards that addresses the personalities and scenarios of our app’s target audience.

[Feedback] — From the feedback, some of the main concerns were 1) being able to use other methods besides Venmo to make payments, 2) incorporating a bulletin board for announcements and to avoid personal confrontation, 3) streamlining the information to be displayed on the dashboard, 4) being able to “claim” an item on the grocery list, 5) having more customizability, and 6) improving the visibility and clarity of features and buttons in the app.

Annie’s Paper Prototype — One of the Prototypes Used for Informal User Testing
Jason’s Paper Prototype — One of the Prototypes Used for Informal User Testing

Here are some of the issues we discussed: (Details are in the Design Decisions section of this update.)

  1. For payments, users will have the option to pay via Venmo by tapping a button in the app which automatically updates the balance in the Finances section; otherwise, they can manually update the balance if they decided to settle the balance with another method such as cash.
  2. We decided the bulletin board was a good suggestion and will be incorporating it to help with avoiding confrontation (by being able to post anonymously) and to facilitate spreading announcements/information (by being able to post as the user).
  3. We discussed what was crucial to include in the dashboard and what aspects we could include in the individual profile pages.
More Personas & Storyboards from Feedback Received

[New Personas] — After reviewing the feedback and our past personas and storyboards, we decided on three polished personas and storyboards (will be created by Neil) to represent our app’s target audience. Enter Jim, John, and Dwight.

Jim: lazy, unhygienic, willing to help but doesn’t recognize problems and needs such as doing chores, disorganized

John: stingy, meticulous, keeps track of everything, organized

Dwight: shy, doesn’t like confrontation, forgetful, disorganized

[Design Decisions] — Some decisions our team made regarding the design of our app are listed here. We also drafted a rough layout for the dashboard and log-in screens.

  1. On the dashboard, include the bulletin board and clickable icons representing the housemates
  2. Clickable icons will lead to the personal profiles of the housemates that detail all payments, chores, lists, and everything regarding that housemate
  3. Use “Phetched” (inventory) and “Phetch It” (grocery) lists in place of the names “Have” and “Want” lists due to misleading naming
  4. Include “Claim” feature on the Phetch It (i.e. grocery) list
  5. Disregard automatic bill payments
  6. In Finances section, include categories of payments, how much each person owes, history of payments, and being able to pay without Venom (manual entering)
  7. Use tabs on the bottom rather than the hamburger menu

[Game Plan] — Since we will soon be approaching the deadline for our project, we devised a rough timeline for the duration of the project. Our designers (Annie and I) will work on the polished prototype this coming week while our coders (Anmol, Jason, and Neil) will work on the initial coding of the app as we finalize the designs (e.g. the login page). Of course, everyone will be involved in all the steps of the process; it’s just that certain responsibilities will be delegated to the people with relevant skill sets to ensure that the workload is even across the team and to streamline the progress of the completion of our project.

Because of our time constraint, we also prioritized which features we want to implement first and which we’ll incorporate if time allows. The features, according to priority, are 1) the Grocery Retrieval feature with the Phetch It list (a.k.a. the grocery list) and the Phetched list (a.k.a. the inventory list), 2) the Finances feature, 3) the Bulletin Board on the dashboard with the individual profiles of housemates accessible via profile icons for each housemate on the dashboard, and 4) the Chore Wheel. If time permits, we’d also like to incorporate a Scheduling feature that consolidates everyone’s schedules to find free time and gives suggestions for apartment outings and activities to do.

Prototyping and Wire-framing

Updated by Anmol Maini (November 2, 2015)

I read a really interesting article by one of Airbnb’s cofounders last weekend. In his article, he talks about how Airbnb went about designing their platform and what they missed out in their initial storyboarding:

The customer’s experience before, while and after using the application.

An app can look pretty and have the best interface designers on board, but if the consumer doesn’t have a great experience with it (too complicated, not enough directions, click events not being emphasized enough or any other problem) the app becomes useless. So when we were given the task to come up with our initial prototypes for this week, we decided to focus on the user’s experience rather than how the app would eventually look like.

Our team had a couple different approaches to creating prototypes:

Jason’s prototype being tested by First World Dinosaurs

Jason created his prototype with the quintessential design tools: pen and paper. And then he would act as the intelligence behind the app, explaining what would happen when the user clicked on an actionable event, along with manually changing the screen each time a process occurred. It was really easy for him to draw it up, but setting it up for each user took time. We got some really great feedback from it though: we had only explained our overall goal of the application and didn’t give any specifics to the users. By doing this, we were able to clearly identify what parts of the application were straightforward to the users, and what were the parts that weren’t obvious enough for the user to click on (i.e. the elements we had to improve upon).

Anmol’s Prototype

Over the summer, I had worked as a Mobile UI designer so I had some experience with what are some of the neats tools that I could utilize for the initial prototyping process. As we had all made our paper prototypes the week before, I was able to collate the best parts of each and come up with a really basic layout of how the app could look using a wire-framing tool.

Then using a prototyping tool, I created an interactive prototype. Interactive prototypes are great because you can send them to a larger testing base, and can focus on how the user is using your app, rather than focussing on changing screens every couple of seconds.

We will probably have huge debates this week about key design elements for example, tabs on the bottom versus the hamburger menu, and how the chore wheel should be represented. So our plans is come up with a couple of different versions, which have these contrasting elements and conduct A/B testing to conclude what would give the user a better experience.

Our plan for the following weeks is to go through a couple of more iterations with a basic prototype to lock down a great user experience before we start any kind of design for the interface.

Brand evolution of Phetch

Updated by Neil Sengupta (October 22, 2015)

For the last few weeks, we have been trying to forge a brand identity for our product.

We’ve spent numerous hours sketching and figuring out ideas for our logo. We wanted the logo to be a perfect(at least try to) manifestation of the goals we have for our product.

As we sketched out ideas for our logo, there were some key features that we wanted our logo to ship: speed, organization, performance, containership and flexibility.

We wanted the logo to be simple, and elegant, but at the same time, bold and clear cut. The choice of a combination of symbolic and textual representation was a unanimous decision. The shopping cart became an integral part of the logo throughout most of our drafts. We decided to stick with it, tinker around and make small changes to make it look polished.


Something we also considered was adding trails to our text, to convey speed at which the entire process is handled. One of us had the idea of somehow trying to integrate a boomerang into the logo. It was to represent the fact that Phetch helps you get stuff back, faster.

So Artsy

We finally trimmed down all our ideas, picking the best elements of each. Annie finally did some user testing and presented the logo one morning. We realized then, that we had finally found “The Chosen One”. We were really excited and proud that we had something to represent ourselves.

Bringing it all together — After many sessions of brainstorming, and weighing the pros and cons of all the features we had in mind for our application, we finally reduced the scope of our application. There is now a clear focus on the functionality we want the application to have.
As per our original idea, we want our application to organize household commodities and finances. The application will facilitate users to keep track of what items are bought by whom. It will automatically keep track of how much money one person owes another. We are currently in the process of creating an algorithm that uses the minimum amount of transactions to settle any debt between users.

All in all, we are super pumped to start building our application that the provides a brilliant user-experience!

Storyboards and User personas for Phetch

Updated by Annie Park (October 20, 2015)

Meet Jim, Michael, Pam, and Dwight — They’re an odd combination of people. How do they know each other? Well, they technically signed up to be together, and they want to share things, but their personalities and lifestyles are so different that they’re having some trouble…

Oh, did I forget to mention? These people are not our Phetch group members. They’re the personas we collaboratively created this past Wednesday.

Jim, Michael, Pam, and Dwight all live together in one apartment, but are more like acquaintances than friends. They like each other enough to want to share chore duties, share certain items, and have apartment hangouts, but as college students who just started living on their own off campus, they’re having a hard time adjusting. Plus, their personalities and habits are so different, which makes it extra hard.

Storyboarding at The Office

Meet Jim — He is a stinky guy. I mean, he’s nice, but his hygiene level is pretty terrible. Although he is a thoughtful person who wants to help out his housemates, he has a hard time gaging what counts as messy. Thankfully, the Phetch app notifies him of his chore duties and reminds him to organize the living room.

Meet Michael — He really likes the satisfying feeling of washing dishes, and luckily, his chore duty this week is to wash the dishes. He happily walks over to the kitchen only to be seriously disappointed that there is no more soap. Right then, he is notified by the Phetch app that Dwight is already at Target! He enthusiastically adds to the shopping list inventory so that Dwight can get him dish soap.

Meet Dwight — He is one of those people who never seem to respond to texts and calls. He is a tech noob. Luckily, the Phetch app instantly asks him if he wants to tell his housemates he is near a grocery store when he is in close proximity so that he does not have to worry about communicating these things himself.

Meet Pam — She is the only organized one in the house…a little too organized. She actually has something called OOD (Obsessive Organizing Disorder), so she has random spurts of needing to organize something….anything to satisfy her organizing needs. Luckily the Phetch app helps her to see when everyone is free and organize housemate hangouts. Otherwise, she would probably never be able to satisfy her “needs”.

The Phetch app makes living with others a better experience, and that’s what Phetch is all about…making the unnecessarily hard tasks of our daily lives easier so we can worry about the more important aspects of our lives. #thatsphetch

Neil, Jason, and Annie drawing out the storyboard based on the personas.

On Thursday, we grouped up with Fetty Boop to share our ideas and get feedback. It was a very productive time. After getting feedback, we noticed several aspects of our project we should rethink and work on. Thank you Fetty Boop!

We decided that our grocery aspect of having an inventory, geolocation, and an easier way to pay people back via Venmo will be our central focus to help people #phetchthingsfaster, but we are hoping to implement the a dashboard, chore allocation, scheduling & outing, and utilities sections of the app to create a more wholesome app.

Sketching out ideas

Drafting Ideas: Buying Groceries

Updated by Jason Lo (October 13, 2015)

When my roommates and I moved into our apartment for the school year a couple weeks ago, we spent a good bit of time just preparing the apartment. From buying actual furniture to stocking up on paper towels, it took a while before we got it to a usable state. Unfortunately in this buying frenzy we didn’t plan things out very well — for example, each of us bought two giant bottles of laundry detergent, so now we’re set for the next five years or so.

Our COGS187A group has been discussing the idea of “roommate management” for the last two weeks. From handling out chores to scheduling apartment events, there’s a lot of things that could be managed or automated in the realm of roommates. We threw out ideas at each meeting — it’s pretty easy to come up with ideas for this topic given that all of us are living with other people, whether it be friends or random folks. The need was immediately apparent to us, and hopefully it will be as well to our peers.

One of the ideas that stuck out to us from the start was the idea of an apartment “inventory”, a place that everyone could add expendables that they’ve bought for others to share. Whether it be paper towels, bread flour, or of course laundry detergent, you’d put it in this list and adjust amounts over time.

When you ran out of something, you’d add it to a “want” list that was also shared to all of your roommates. Then when anyone in the apartment indicated that they were going shopping (whether through a manual button, or perhaps something cool like geolocation-based notifications), they’d know what the others wanted, and everyone else would know that someone was heading over to Ralph’s so that they could send over any last-minute requests.

Needless to say, we were pretty enamored with this particular idea. One of our team members even mocked up a logo that ran with this idea that we all really liked. We still planned on possibly branching out our application to fulfill the other roommate management ideas (we have pretty cool ideas when it comes to rotational chores and planning events around schedules) but the inventory idea seemed core enough to serve as, well, the core of our application.

We decided from the get-go that Phetch (we’re having it serve as our team name as well as the code-name for our project) would be mobile-first. This is the kind of application that you want to jump in and out of as quick as possible. You don’t need (or want) to spend fifteen minutes finding how many bananas you have left. Designing for mobiles means high availability (most people have their phones on them near 24/7 these days) as well as the short time constraint; most people don’t spend much time in any particular app, which forces us to make the interactions short and precise. Plus through sheer coincidence most of our group happens to use Apple’s iPhones, so the development platform fell into place pretty quickly as well.

We’re all pretty passionate about this idea, and we’re looking forward to seeing it through to completion (and that’s working completion, not “Wizard of Oz” completion). Hopefully my apartment’s used enough laundry detergent by then to warrant actually using it.

This post was written by Jason Lo.

Usability and Information Architecture @ UCSD

An adventure into cognitive web design taking place in real time (Fall 2015).


Written by


Usability and Information Architecture @ UCSD

An adventure into cognitive web design taking place in real time (Fall 2015).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade