UX/UI
Hackathon: CalHacks 5.0
Location: University of California - Berkeley, Berkeley, CA
Timeline: November 2-4, 2018
Awards: Best Use of Authorize.net
News: USF Honors College, USF College of Engineering, MLH's Twitter (1, 2)
Overview
📱 About the App
You see "Get $50 Off" on your favorite store online, but you have to spend $250 to even get the discount...why must all of the deals we're offered require so much spending?!
Well, that conversation is for another story. In the meantime, let's try to circumvent these sales tactics with Yakpack!
Yakpack allows you to join up with others to spend enough money to get big discounts and shipping deals that were once reserved for the high-spenders of the world. You get what you want, you save money, others in the cart get the same benefits, and companies make their sweet money! Everybody wins!
All because you wanted that pair of jeans with a hole on the back of the pant leg. How kind, yet avant garde of you.
🌁 Background
My teammates, all CS majors, approached me with the idea for this app and asked for me to take care of the design side. In 36 hours, I quickly iterated on the UX of the app, rapidly designed the UI, drank 4 fruit teas, and demoed the product to judges with my team!
With over 1000 hackers attending CalHacks, there was a lot of great competition, prizes, and food for us representing our school's Society of Competitive Programmers (oh, and I had the best fruit tea ever there). Being at one of the USA's top universities was definitely inspiring, as well.
🛒 Problem + Solution
Problem: Online shoppers don't want to spend/are unable to spend the amount of money required to get discounts, free shipping, etc. at their favorite stores, but still want to buy the items they want and get a good deal.
Solution: Share the bill with others in an app. When everyone wants items from the same store and will collectively spend enough to get the desired deal, the transaction goes through. Using IBM's blockchain technology, the app ensures that everyone pays and ensures that your items arrive to you as safely and conveniently as possible.
🧙♂️ What I Worked On
- Considered & designed flow of app and content
- Created logo design, color & font choice
- Designed a basic interactive prototype in Sketch (try it yourself!)
- A short demo reel presentation for judging
🤥 Constraints
Time and resources!
Hackathon projects cut a lot of corners, but the speed of it is what makes them fun. The goal is to have a budget of $0 and to have a working minimum viable prototype completed within 36 hours for demos.
Because of this, I had little room for variance and had to provide less depth in user journeys. I choose 3 major actions to prototype: joining a cart, creating a cart, and entering the app.
In terms of "market" research, we would just walk around and chat with other teams about each others' projects. Everyone seemed to like our idea, and eventually, I developed a one-sentence pitch that somehow made everyone say "Whoa, that is such a great idea!" right after I said it (which helped us to win a prize and put us on MLH's Twitter)!
👩🏫 Research
In my designs, I considered two primary types of users: users who want to save money, and users who want to make money in unique ways.
Things I Considered...
Privacy & Safety: If users must pick up their items from another user's home or some other central location, how can we best provide a safe experience for everyone? When along the user journey is best to reveal sensitive address information: after transactions are successful? What sort of agreements, fees, and warnings should be implemented? Should sensitive information become unavailable after users have picked up their items?
Convenience: If users must drive to pick up their items, how best can we improve this experience to make it the most convenient? Do we provide compensation for cart owners so that items can be delivered to the users, or do we partner with Uber or Lyft to provide delivery services? Do we provide scheduling features that show when each user is available to pick up and hand over items?
Building Faith in Group Transactions: If users must pitch in their own money to a group purchase, how can we reassure them that everyone will follow through with their own purchases to achieve the discount, or else everyone gets their money back? Can we display other's payments within the cart in a secure way through blockchain to increase faith in group transactions through the app?
Making the App Addicting: How can we shorten the time it takes to get from sign-up to first purchase? How can we automate parts of the user journey to speed up the process and make the app easier to use, such as including a Chrome extension that automatically posts a deal & item you want to start a cart for? Could we implement "background matching" of shopper's wishlists to available carts, which sends push notifications to users when a match has been found? Could we incentivize starting & managing carts so users can make money using the app, while increasing the amount of carts in the app?
🎒 Design
Journey 1: Logging in & accessing dashboard
Journey 2: Find and request to join a cart you found
Journey 3: Starting your own cart for others to join
🖖 Conclusion
With more time, I would:
- replaced grey placeholders with actual content to improve understanding
- changed font sizing & dashboard row text layout to improve at-a-glance scannability
- created a more high-fidelity interactive prototype with microinteractions
- considered more user journeys with more granularity
- conducted user research to identify use cases & usability improvements
I had so much fun with this project and learned a lot! As always with hackathons, I got to work with others on a tight deadline, practice communicating my designs and ideas to a multi-disciplinary team, and bond over mutual loves for free t-shirts. I also improved my pitch skills, and learned how to communicate our ideas in a more concise, interesting way.
Oh, and I bought my first pair of Doc Martens to celebrate winning with my team. 😄🎉💃🏻
Thank you so much for looking!
