Vision behind Team ByteU
~Written by Manavbir Sahani and Swarnakshi Kapil~
With culture evolving at every scale, data-driven design can be a platform for harnessing our diversity and creativity in tackling both social and technical challenges. Through good design, our team wants to build systems that let us achieve our goals, support us where we need it, and help us focus on the things that actually matter : music, friends, family and unicorns!
We’re storytellers, astronauts, artists, magicians, and much more and we’re here to make magic real for you.
Team Members :
ByteU is a team of four zealous software engineers (Yinji, Noel, David, Joseph) and 2 aspring User-Interface Designers (Manav & Swarnakshi) in the project class Cogs 187A taught at UC San Diego, the school that founded the field of User-Interface Research and Design.
Defining ByteU (Name, logo, and Colors) :
Name : We picked “byte” as a part of our logo and team name, keeping in mind its importance in programming. The “U” stands for university, displaying that our team wanted to do something involving university kids. Therefore, we created a logo that plays with words and mimics the commonly used phrase “Bite Me.” The name ByteU represents our teams light-hearted nature as well as its technical background.
Logo: While envisioning on how to brand ourselves, we tried to incorporate our personality as well as our vision into our team logo. All of us created approximately 10 logos, going with professor Boyle’s advice on having as many logos as possible so that we have more options to choose from. This piece of advice was really helpful as we amalgamated all ideas, thereby creating our final logo.
We then, voted on the logos through secret ballot so that our egos don’t let us favor our own contributions. This helped us make the best possible selection.
Color: After designing the logo, we decided on the four colors, red, yellow, blue green, which are evenly spaced across the color wheel, which is a basic approach to creating complementary colors that attracts the human eye and makes it stand out among other logos. This is called a tetradic color palette approach. Google, Ebay, Microsoft, NBC logo’s are some of the most popular logos because these 4 colors show diverse and bold color palette that helps a brand to communicate an open approach to global cultures, race (skin color), preferences, and ideas.
Therefore, we ended up with the final logo shown above. We’re so excited to show you what we’re building. So while we work to get it exactly right for you, please keep in touch and know that magic is right around the corner.
Brainstorming
~written by Manavbir Sahani and Swarnakshi Kapil~
We’re living in the Tech Revolution. You already own the most amazing computer that has ever been created in history. You’re using it right now, to think with and blink with and maybe even smile with. It’s your one-of-a-kind mind. With the goal to fulfill your new needs and your new wants,
our team started off it’s brainstorming session. Feeling the compelling urge to do incredible things, we sat together for what were probably the most productive hours we’ve spent in a long time.
We came up with multiple ideas, some were about dividing chores, some solved problems for parking on campus and some were about cataloging campus food. However, we didn’t want to limit ourselves to college students in just one university in one country. We wanted to create something that will address a larger audience.
After having spent 2–5 years each in college, we all were aware about the amount of alcohol that students consume. Keeping in mind the financial situation and other characteristics of college students such as time constraint and party culture, we came up with the idea of Fusion.
Fusion is an app that would give you all the possible combinations of making drinks (cocktails or mocktails) using the ingredients you already have at your disposal. To be realistic, most college students don’t like the taste of alcohol and usually follow the “drink to get drunk” philosophy. This gave us the idea of improving the drinking experience for our user that is an average college student.
Our Needfinding Process
Searching for the need of ByteU’s Fusion :
After brainstorming and deciding on Fusion, we hit the streets to check if the customers that actually need our product even exist.
We tried to create an interview such that the questions that we ask didn’t reflect or invoke any biases in thier comfortable environment. For this, we tried to keep the questions open ended, as precise as possible and free of any emotion invoking phrases. We even told some of our friends to take interviews from people, so that we can avoid the Hawthorne effect. We didn’t choose a group with a particular demographic to interview in order to keep the sample of people as random as possible but made sure both extremes are included as their feedback is of crucial importance (Regular drinkers and people who don’t drink in this case). All of us split up and interviewed random people that we found on the UCSD campus, and made a trip to Pacific beach as well! (As advised by our TA). The students there acted as our lead users.
After conducting our interviews with 3 interviewees per team member, we all compared our answers and realized that not only had we received a great response to our idea of Fusion, but we had also received tons of suggestions from our interviewees to make the app better. Therefore, we found the need for our idea and started to solidify it.
Competitive Analysis:
There are other apps which help you prepare cocktails, with some basic features like adding notes to your cocktails, but none of these address the need of the people. What we saw through needfinding was that, people aren’t really interested in making fancy cocktails, but any form of drink mixed with alcohol that actually tastes good. We come with a unique rating for sweet, sour and salty levels for each cocktail. We uniquely offer our basic interactive feature: shaking the phone to make your drink that would grab great attention. Our aim is to keep it simple and offer only the limited features that people actually want. Another feature that would grab public attention is, making an easy way of posting a picture of your nice looking cocktail on instagram through Fusion. We also tell the user how many steps each drink will take, thereby easing the user’s experience. This is because we found through our interviews that people find the process of making mixed beverages too time consuming.
The needfinding process armed us with the knowledge of what people want as well as need. So, we molded our application in a way that would appropriately help our users and well as provide them with a fun experience.
Personas and Storyboarding Process + Wonderful New Name (Week 3)
~Written by Noel Lin~
Now in our third week, we make use of the knowledge gleamed from our needfinding process so that we can figure out our software’s features and usage. To this end, we create personas of individuals or groups of people who would use the app. From these personas, we create storyboards of how the user(s) would make use of the software.
We each created one persona, and a few storyboards each from this persona. We imagined the possible ways this app could help people have a better experience with alcohol.
Persona-building
For instance, one persona is of a physician named Nick, who works at the UCSD Medical Center. He likes drinks, but does not have a lot of free time. Therefore, his needs include software that allows him to make delicious drinks based on available ingredients.
Now, based on information like this, we come up with different scenarios under which the personas would make use of our app. Enter the storyboards.
Storyboarding
We seek to find out ways in which individuals would make use of the app through storyboards. We come up with a scenario, and let our imaginations run free. This way, we find out new ways that individual users would like to use the app, and what features and functionalities we should offer. In the storyboard shown above, we imagined a scenario where a friend doesn’t consume alcohol for various reasons i.e. s/he doesn’t drink or is the designated driver. From this storyboard, we thought to add an additional feature to accommodate this guest — the app’s ability to make delicious but non-alcoholic drinks for non-drinkers.
The persona-building and storyboarding built upon previous information from needfinding. This allowed us a solid grasp of our app’s target demographics. We then thought about how each demographic would want to use the app, and how each scenario would play out.
Fizz it Up!
And last but not least, we figured out a new name for our app. Throughout the persona building and storyboarding process, we thought that the previous name Fusion might be deemed a bit too formal, and also that it could be a tad more descriptive. We brainstormed a few names such as Fission, Alcohology, and so on.
Finally, we settled on the name Fizzle. We settled on this name because 1) we thought it sounded cool and 2) it conveys the casual playfulness we wanted our app to have. And entirely as a bonus, we can shorten the word into Fizz! and turn it into a energetic verb, similar to Twitter and “tweeting”.
World of Prototyping
~Written by David Jang and Joseph Widjaja
Ideas
We come up with more and more ideas as we do more assignments for the class. The enjoyable assignments help us make the extra effort, which contributes in taking our group to the next level. Our initial goal to create a basic website has been completely thrown out, and now we are totally motivated to create this beautiful yet practical app for the rest of the world. At first we were focused on a simple drinking app, but at this point we were convinced that we can do better. We are now looking for this app to be more than just that. We also want to attract users who are looking for drinking buddies around them. We are on our first step to creating the design that could end up looking like our product!
Parallel Prototyping
Learning from the reading, “Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficacy” — Stanford University, we learned the importance of separate prototypes to get user feedback rather than collaborating to create a single prototype. This ensured more variety and lesser bias. In addition to working and going through multiple design ideas, we created two different initial low-fidelity prototypes unlike many other groups (one prototype). We were able to obtain two differing opinions and feedback thanks to our hard work.
Initial Designs
Our first low-fi prototype, corresponds to what we drew on the left side of the board in our brainstorming section! We will be able to navigate very easily and intuitively with the simple icons on the bottom. We weren’t able to create a functional iOS prototype yet, but we were able to get started! Instead of the iOS prototype, we created the Balsamiq prototype for our classmates to test on.
Our second low-fi prototype features a navigation bar on the left side, which closes into an hamburger menu, unlike the permanent buttons on the bottom as in prototype 1. This will result in a cleaner look because there is not much space on a phone screen. In addition, this prototype used popup screens to ease user experience navigating through the application. We received valuable feedback, which will affect how our final product will look like!
Insights from feedback
User feedback: Both users like the interactive shaking feature and popup for inventory and information about a specific drink rather than being brought to a new page. The screen did not have much clutter while navigating through the prototype. Some icons are able to communicate with the user like the plus sign to add.
Both users were able to identify that the hamburger button at the top left corner opens the navigation sidebar, which then appears on the left of the screen. Moreover, they experienced difficulty understanding his page status in the application. There is no real way to know what page he is really on. Both users were able to identify that the hamburger button at the top left corner opens the navigation sidebar, which then appears on the left of the screen. We were informed that it is not obvious that some icons are clickable.
Insights from user feedback: Some ways we can solve the confusing navigation issues is to have consistent icon and naming at the top of each page that correlates with that ones on the sidebar. We might not need a sidebar, icons at the bottom or top of the screen may be able to suffice for navigation. Add a dedicated button for shaking instead of making the shake a mandatory thing to use features. Add a feature where users are able to put and see listings of parties. In the drinking buddies page, popup drink recipe on click on their favorite drink. Make the drink of the day sort of article the landing page for returning users. Make the user input ingredients when it is the first time using the app.
Design decisions
In our final design, we need to consider clear instructions on how to use the application through consistent naming and instruction captions. Also, there should be uncluttered design with minimal clicks for screen navigation. We are leaning toward navigation buttons displayed on the bottom instead of a hamburger button and sidebar for flexibility and efficiency of use, reducing the number of clicks. There should be feedback for screen status indicated by different shaded navigation button for visibility of system status. Minimalist icons are going to be included so users can easily distinguish each icon while navigating through the application. New users must manage their inventory before using the application, so it can actually be used. Returning user lands on the page where he or she can get drink recommendations upon opening the application. Lastly, there should be popups confirming actions were successful or unsuccessful.
Final prototype
Our final prototype includes 5 navigation buttons at the bottom of the screen, each with a distinguishable minimalistic icon to help to user remember where certain features are located. When the user is on one of the screens, that navigation button becomes gray in order to provide a system status update for reassuring feedback.The first button with the flask icon leads to the Fizzle page where users are able to generate drink recipes from ingredients that they have. This screen is to be the core of the application and has the additional idea of being able to shake the phone to generate recommendations.
The second button with the glass icon is the browse drinks page where users are able to discover new drink recipes and filter results by their saved favorites. Favoriting a drink will darken the heart icon to notify the user that the drink has been added to their favorites.The button with the crate icon is where the user manages his or her inventory, easily adding items with an auto complete drop down search bar for ease of use. New users land on this page to setup their inventory that is essential for the application. This helps the user experience so that he or she does not have to wander around the app the figure out how to use it.
The fourth button with people as the icon represents the find buddies page and the last one features the edit profile and logout options. The user is able to toggle if he or she wants to be visible to other people in the find buddies and the send message feature has a popup confirmation box to reassure user experience.Overall, our thoughts behind designing this prototype involved thinking deeply about simplistic design and a comforting user experience.
The Final Milestone
~ written by Manavbir Sahani, Jace Lu, Swarnakshi Kapil~
Armed with the our final prototype, we were all geared up to begin implementing our design. As they say, “go big or go home,” we decided to go the extra mile so that we can put our ideas out in the real world. Rather than creating a high-fidelity prototype just for the purpose of the class, we made the bold decision of making a working android application to leave our mark.
We split ourselves into two teams, one started to work on the final design changes in our application, and the other started to set up android studio.
Final User Testing and Design Decisions
After we incorporated the feedback from users on our initial two low-fidelity prototypes, we performed another round of user testing of our final low-fidelity prototype.
One of the main design decisions that we had to take was changing the interface of our Buddies page. This page initially gave a list of users who signed up on Fizzle so that the user can select one of the other Fizzlers to drink with. However, our user feedback suggested that most users would like to see a description of the person they are drinking with, for example, a status in order to get to know them more. Users came up with many suggestions to help us finally come up with an interface that has been motivated by tinder’s concept of swiping. The Buddies page now displays a block with the Fizzler’s picture and description. If the user swipes right, he or she can send a message to the other Fizzler and decide to meet up.
In order for the design above to work, we needed to create an “about me” section in the Profile tab of the app which would give the user the option to have not only information like name, age and picture, but also a personal description. In addition to this, the user can also see the invitations and messages that other users have sent him or her on this page.
While Testing our final low-fi prototype, one of the users claimed, “I wish I could see some drinks similar to the one I just made with similar ingredients.” This gave us the idea to make our own algorithm that would do the above mentioned and give additional suggestions when a fizzle search is performed. More specifically, the user inputs up to three ingredients from drop-down menus, and an algorithm coded by Joseph generates a focused randomized drink suggestion that pops up on the application screen. We found that users were overwhelmed with inputting many ingredients, so this addresses that issue while still giving dynamic drink suggestions.
We also added an autocomplete feature in the ‘search’ input box to ensure easy use. If the user types in an ingredient that does not exist, the app prompts the user to enter one from the autocomplete drop-down menu. In addition, we realized from some user testing that the keyboard on the phone takes most of the bottom part of the screen, so we omitted a text entry field on the bottom on the application.
There is also a feature on the Browse page that enables users to favorite a drink. We learnt from user testing that users would be interested in knowing what cocktails the liked making, even what cocktails other users are interested in. Our team then thought of the idea of putting the favorites feature. In addition, instead of directing the user to a new page when showing the drink information, a popup dialog box appears with its information instead. We learned from testing that users did not enjoy clicking the back button to go back to the previous page.
Fizzle at the end
Fizzle, an app designed to make the drinking experience enjoyable from the start. Drinks now come down easy, while making new friends.
It’s not the destination; It’s the journey
Looking back at insights we gained in these past five weeks, we now stand here evaluating ourselves.
The most important lesson we learned is that we, as designers and programmers may find an idea appealing and so may focus on producing a particular product. However, what matters most is this question- “Does the demand we’re trying to address even exist?” In saying this, we mean that we learned to let consumers guide the flow of our research. In a situation where there is no audience for the problem we are trying to solve, we learned to pivot to a problem people actually have. Good design is not about what looks good to the designer, its about what is needed by the user. Therefore, we learned to collect data in various forms and to integrate it to our idea and design.
This approach of focusing on the needs helped us improving the solution we had, but at the same time making sure that we don’t rule out creating completely new offerings that satisfy needs in a different way.
We also learned the importance of the process of design. Instead of starting to code straight away, one needs to find a need, think of ways to address it, create potential designs, get the designs tested by various users and create a final prototype. It is then and only then that the project will truly be a well designed solution to the problem of users.
Finally, we all learned new skills. Programmers learned to design and designers learned to program. Working together on Fizzle taught us how to be a true team player.
Finishing up!
~written by David Jang~
Shark Tank
The Shark Tank went great! Although all of us didn’t get much sleep either preparing for the presentation or working on the app, our productivity was off the charts. We came together at 8 AM on August 31, 2016 to watch, support, and rate the other groups. We grabbed some of the bagels that was kindly provided for us and sat down. We were set to go 5th out of the 12 teams in our classroom at 10:15 AM, so we had plenty of time to look at the other groups and see what they were doing wrong to avoid those mistakes. Many of the groups had really great ideas and some of them also implemented their website/apps just like us, which was great to see.
During the presentation we attempted to begin with some humor, then introduced ourselves. We showed that we realize the presence and importance of alcohol in any social setting. Whatever mood we are in, many of us use alcohol to relieve the situation: when depressed we drink to feel better, or when happy we drink to celebrate. We also displayed the problems that many of us have when choosing alcohol, and the solution that our app Fizzle presents.
We happily showed off our commercial, and then Joseph and Jace went through a demo of our working Android application, using the email address of Max, a volunteer from Team Rising Edge. We were able to show that it was working properly, including a swipe feature, messaging feature, and lastly the mixing-inventory feature.
Finally, we answered questions (I’ll get to one in just a bit!). We were pleasantly surprised to see that we’ve met the time requirements perfectly, and just like that it was over. We definitely learned a lot from this project and feel that our hard work and time had paid off. Working in a group of 6 people definitely felt different from being with smaller groups, which is what many of us were used to.
A Small Reflection
One of the questions we received while presenting was:
Have you considered partnering with Uber or Lyft?
We appreciated this question because if we were able to partner with Uber or Lyft to help alcohol drinkers get back home safely, then we can definitely say that our app is a social good: helping connect people who want to drink together and letting them get back home safely without a DUI or a car accident. The goal initially was just to create an app that people can use to create great tasting drinks, but the thought that we can possibly partner with Lyft or Uber with more work gave us a great feeling. From a simple recipe mixing app to becoming a social app, our ideas have definitely come a long way.
Here is a link to our presentation: http://tinyurl.com/BYTEUPRESENTATION
And our commercial:
Let’s make alcohol again with this app that helps drinks come down easily.
Thanks for reading!
