This update is super late in coming, but here are some photos from the 2014 HCDE Capstone and Research Showcase!Ā It was a ton of fun and we were runner-up for Master's Best in Show.
We are also now officially graduated!
2025 on Tumblr: Trends That Defined the Year
I'd rather be in outer space šø

Kiana Khansmith
sheepfilms
cherry valley forever

oozey mess

izzy's playlists!
Aqua Utopiaļ½ęµ·ć®åŗć§čØę¶ćē“”ć
macklin celebrini has autism
Mike Driver
Xuebing Du

#extradirty
Sweet Seals For You, Always
h

titsay
Peter Solarz
hello vonnie
Not today Justin
Misplaced Lens Cap
will byers stan first human second
seen from United States
seen from Uruguay

seen from Italy

seen from Syria
seen from Romania

seen from Singapore

seen from United States
seen from United States
seen from United States

seen from United States

seen from United States

seen from United States
seen from United States
seen from United States
seen from United States
seen from United States

seen from United States

seen from United States

seen from United States
seen from United States
@hcdeevee
This update is super late in coming, but here are some photos from the 2014 HCDE Capstone and Research Showcase!Ā It was a ton of fun and we were runner-up for Master's Best in Show.
We are also now officially graduated!
The Making of Bubble ā Part 2
What you can see in this video:
An interface updated with our designs
Ability to have constant connections throughout the app
Ability to access Camera and Camera Roll!
We're almost at the end of the quarter!
We didn't do much new design this week; instead we've been finalizing work for our poster presentation and our class presentation. We also now have a simple websiteĀ live, and have been continuing on with app development.
This week:
Continued to iterate on our app design.
Continued app development
Started work on a poster for our project, and a website.
This week:
We made some iterations of our introductory page, based on feedback from our Critical Friends.Ā Our most recent version of the introductory pages is shown above.
Sketched out the flows of some of the remaining pieces of our app.
Started importing real assets into the code.
Began investigating what to put in our Terms of Service and Privacy Policy ā in particular, how to describe to users what sort of information is being stored by us, and whether we know about their location. This is particularly relevant given Snapchat's recent settling with the FTC over their methods of data collection.
Some flows/sketches of a possible "Settings" page, inspired by Snapchat and Instagram.
One possible problem we came upon was how a user can "disconnect from a bubble" as well as "log out" of the app entirely. "Log out" is an action whose out-of-the-way placement on deeper levels of the app (such as the settings page) seems to be more common and acceptable. However, where should we put the action for "disconnecting from a bubble," which will happen more often?
After some thought we've decided to go with this sort of flow:Ā On the main bubble screen, you can click the hamburger icon to see a drop-down menu. The menu will show "Settings" and "Disconnect." "Disconnect" will disconnect you from your current bubble; and "Log out" will remain buried further in the app.
We had another āCritical Friendsā review this week!
This time around we wanted to get feedback specifically regarding our introductory pages, which can be seen at the bottom ofĀ this post on our blog.Ā The introductory pages are the first three pages that users will see after downloading the app.
Because one of our problems with the usability tests were that people didnāt know our appās āvalue proposition,ā we wanted to phrase the problems in our intros as questions, ex. āDo you not have internet connection? Share photos anyway!ā
However, some people thought this question meant the app was telling them that it had no internet connection. Additionally, people thought that we should start first by saying what the app does (ex. āShare photos with your friendsā) and then provide the context afterward. They also thought that our way of phrasing the problems as questions was too negative, and preferred that we talk positively about how our app empowers users.
Some other things that we want to change based on their feedback is to try making the little characters look more āhappyā to use the app, and add more tangible context to the introductory screens, ex. āYou can use this app while hikingā rather than āDid you forget to upload pictures [after some event like a hike, in which you couldnāt upload pictures immediately]?ā
Some positive feedback we received (all from women) is that our illustrations and color schemes were very cute.
This past week:
We made some good progress with app development. See a video of our work-in-progress app here.
We continued iterating on what information is displayed in the bubble graphic, and how.
Shown above: some possible introduction screens. Some of our usability tests showed that we had a huge problem with people understanding our value proposition. So, to try and make it easier for users to understand, we state specificallyĀ the problems we are trying to solve.
Discussing the layout of people in the bubble graphic. Things we are considering:
How many people should be shown so that bubble will look aesthetically pleasing? Should the arrangement of faces in the bubble be symmetrical?
Where should the current user be placed in the bubble? Should they have their name, or be labeled with "me"?
If the bubble isn't saturated with people, should we show "empty" spots to show how many people can be in the bubble at one time? Or should the "bubble limit" be explained in a different way?
Evidence of a user need/desire?!
A video of our work in progress!
Here's what's currently up:Main interface
There's a button for Finding Friends (functioning!)
There's a button for Camera (not functioning yet)
There's a button for Chat (functioning!)
Discoverability/Connect-ability successfully implemented
App redirects to a āFind Friendsā screen that serves as the hub for finding friends
App allows for customizing the name of the device when connected with others
App shows who you can connect to and who youāve connected to
App also has a āHideā toggle so that it wonāt be discoverable to others
App allows users to disconnect via a disconnect button
Chat functionality successfully implemented
Clicking "chat" slides a page from the bottom of the screen
App allows for messages from one phone to be sent to all connected phones
Says Julius: "Also, I learned some pretty interesting things. If iPhone A connects with B and C, B and C automatically get connected with one another even if they didn't request to be connected with one another."
This past week:
Weāve progressed with adding some basic camera functionality to the app.
Created yet another a new iteration of our prototype using Flinto, and did guerrilla usability testing around UW, giving participants $5 Starbucks gift cards. Summary of our takeaways is here.Ā
Continued iterations of our visual design.
We think we're still on schedule!
Today we conducted usability tests on our newest iteration of our app. Armed with $5 Starbucks giftcards, we approached students hard at work studying for midterms and managed to recruit five participants. Above are screenshots of the iteration we tested, as well as photos of the notes we took.
Our largest take-aways were as follows:
The initial screens are not providing enough information on the value of the application.
All of our users didn't pick up on what we were planning would separate our app from photo-sharing apps: that you can use it to share photos and texts with people nearby, regardless of Internet connectivity or cell reception. Because of this lack of fundamental understanding about our app, users reported they found many parts of the interface confusing: for example, they assumed friends were invited from their phone or Facebook contacts (rather than propagated from people nearby). Once we explained that the app requires friends to be nearby, many users suddenly understood our "bubble" model and stated they found the concept pretty cool.
Possible Solution: Communicate the value and, in particular, the context of use using more pictures and less text (which it seems users did not fully "get," even if they had read it). Suggested contexts by the users were: concerts, hiking, parties, and others.
"Add person button" was unclear.
When the button could be found at all, there was hesitation in selecting and pressing it.
Possible Solution: Please the button more ergonomically (as one person suggested) near the center of the screen. We could also place the "waiting" bubbles inside the main bubble graphic, rather than outside of it.
Participants were unclear who they shared photos with.
In particular, participants wanted to confirm where the photos with going and who was receiving them. 4 out of 5 commented that sharing felt "abrupt;" only 1 out of 5 noticed the activity feed at the bottom confirming the action (though this participant did like the activity feed and thought it was cool).
Possible Solution: Incorporate user feedback with the bubbles: for example, when a photo is shared, show a photo icon above the others in the bubble or even just make the bubble "flash" somehow to show who received it. Also consider making the activity feed take up more space so people will notice it. The bottom bar in the "Share photo" flow should also have information on who the user is sending photos to; for example, "Send to 3 people."
Participants were confused when they saw non-chat activity on the "Chat" screen.
We tried a different visualization of non-chat activity (such as "Someone has been added to your bubble" or "Someone has shared a photo") mixed in with the Chat feed; however, this still confused people as before. Additionally, though we tried to show the current members of a user's bubble above the feed, people assumed that these were similar to Facebook "chat heads" and thought that you could speak to people in a bubble individually, instead of all at once.
Possible Solution: Use visuals to make it clear that chat is a group chat, not someplace where people can be chatted to individually. Additionally, separate out "chat" and non-chat related "activity."
Another thing we were testing this time around was whether anyone would have any objection to the bottom toolbar. (We had heavily debated this toolbar internally.)Ā Turns out, people either didn't comment on it, or commented positively on it. So, it's staying!
More logo and design explorations by Yu!
Debating the merits of two toolbar designs. :D
We had a meeting with our Critical Friends last Monday, and also met up to discuss some findings from usability tests, which Brian has been leading over the weekend.
We had our usability test participants go through a typical user flow where they added friends to their bubble, shared photos, and disconnected from their bubble. We then showed them our visual design mockups to receive their impressions. In total, we spoke with four "outside users," as well as 2 of our Critical Friends, and Andy.
Along with some overall visual feedback (which is listed here), the major takeaways are as follows.
The main screen was "wasteful."
People thought that the main screen ā which shows the bubble and connected friends Ā ā was "wasteful" in that it took up a lot of space and did not have any information other than who was connected to you (which can be shown much more conservatively). Some of the other feedback we received was:
Badges attached to friends' photos that show whether they are "waiting to accept invitation" or "out of range" are too small and not easily visible. Instead, participants suggested positioning the bubbles or coloring them differently. For example, someone's face could be desaturated if they are unconnected or inactive, or could be shrunken and moved out of the bubble image if they are out of range.
It would also be nice if you could interact right with the bubble image: for example, dragging someone's face out of the bubble if you no longer wanted to send or receive pictures from them. (We aren't sure yet if we have enough dev resources to figure this one out, but it would be great!)
Our current information architecture is confusing.
One thing that people noted in particular was how the camera icon allows people to share photos from the "main" screen, but is also available in the chat activity screen, as in the screenshot below.
This seemed redundant, and people were wondering why camera was "privileged" over chat in this way. Also, since all the activities are accessible in one click from the otherwise "wasteful" main page, we wondered whether it's necessary to navigate away from this page to complete our few tasks.Ā
Our onboarding process is too long.
The wording on buttons shown during onboarding made people expect to begin immediately, rather than go through more setup. For example, after a button labeled "I'm ready to Bubble!" we then made users fill in a username ā something that they were not expecting, and made them impatient. We decided to make our "tutorial" screens much shorter, and have them accessible through easy swipes rather than requiring button presses to advance in certain cases. We also decided to put a description of what a bubble is and why you'd want to create one at the beginning of the tutorial, rather than using the tutorial solely for describing the non-branded version of what we offer. For example, rather than "Share photos instantly with your friends" we could say "Create a bubble to share photos instantly with your friends."
After hearing feedback, we started sketching out solutions and new flows.
Thanks to everyone for their feedback!
This past week:
Weāve progressed with selecting files to send and deleting them.
Created a new iteration of our prototype using Flinto, and did some guerrilla usability testing.
Started our visual design (details and screenshots here)