Team PuppySquad
Vilan Le, Patrick Nguyen, Erik Chau, Berkeley Vogelheim, Jason Pon, Ying Pan
Week 1: Finding Our Own Identity (Logo Design)
Author: Vilan Le
“It’s through mistakes that you actually can grow. You have to get bad in order to get good.”
When we all first met each other, all we knew was that we were all from a strong computer science background. Four out of six of us had never taken a design class before, but we were all ready to give 100% of our creative talents into our group project. That is what teamwork and connecting to your team is all about: being ready to listen and learn from your peers. So, with no time to lose, we began our journey of creating a web application in five weeks by thinking of our own team identity. So, we began by designing a logo for our team that represented ourselves and eventually, our application.
We began with a broad range of ideas for our team identity. Did we want to cater to a younger audience? Did we want to make ourselves seem modern and new with a more trendy design or go with a cuter logo? The choices were endless. We decided to split up and each design three of our own and see if we can find a common idea amongst all of our designs.
The First Iteration
When we met up again after designing the first iterations of our logos, we found out that many of us had similar ideas for what we wanted.
After looking at each other’s designs, we decided to combine some of our ideas together. We realized that we wanted to brand ourselves as modern and adventurous. We picked the three logos below to combine for our second iteration of our design.
Because our application was going to be a dog meet-up app, we wanted our logo to express adventure. We liked how in the first logo, the dog is holding a leash. This shows the story, without words, that the dog wants to go out and explore. This is what we wanted our logo to do: to tell a story without having to explicitly tell it with a long elevator pitch. We wanted our logo to be short, sweet, and too the point.
This shows the story, without words, that the dog wants to go out and explore.
We also liked the second logo above because it represented the main aspect of our app, which was meeting others in new areas. We thought that a flag would be a good symbol of that because it represents a common place for people to meet up and go to. The third we chose because we liked that it was simple and clean. It had a modern feel to it and looked like it could appeal to people of all ages. We wanted to combine all three. This is where our second iterations come in.
The Second Iteration
For our second iterations, we each designed one logo each with the new mindset of what the team wanted overall. We still had wiggle room for creativity, but also had a better understanding of what kind of identity the group wanted to strive for.
With the second iteration, using color and digital tools we designed our second logo. You can see that we all now had a common idea to base our next design off of. We wanted the flag to show adventure as well as the puppy silhouette on the flag to be clear that we are centered around dogs. We played with different color schemes but it seemed that we all had similar ideas of using blue and yellow. We wanted to use softer and more inviting colors. We also played around with red, because reds usually catch people’s attention, but decided that it might seem too intimidating and harsh.
We also played around with red, because reds usually catch people’s attention, but decided that it might seem too intimidating and harsh.
Design is about testing. If we didn’t attempt the red design, we would have never known that it would not have worked with our team identity. We also played around with a different idea of two dog noses sniffing each other, because that is what dogs do when they first meet someone new. It is good to stay with the collective design idea from the team, but I also wanted to introduce a different design that I thought of while drawing the flag logo.
Iterations of our identity will never end. We may pick a logo now, but can also change it as we continue to find ourselves as a group. This is what is beautiful about design: as we grow, our brand grows with us. Our audience can see our team growth through each design change.
This is what is beautiful about design: as we grow, our brand grows with us.
Week 2: Needfinding
Author: Patrick Nguyen
“Sometimes you need to get lost to find yourself”
Discovering Our Idea
When we first formed our group, we all asked ourselves what kind of problem do we want to solve and how can we solve it using a website or web application. As a team, we wanted to find a similar passion and help solve a problem about something we all love. After discussing with each other, we came to the agreement that we all love dogs and we want to make our website about dogs. Though, we were unsure about what kind of website or problem we wanted to solve. Our initial ideas ranged from Dog Go ( a parody of Pokemon Go),a Dog Social Media(where people can like pictures or videos of dogs), and Puppy Training ( where dog owners can find people to help train their dogs). However, we wanted to make something that all dog lovers would find useful and something practical that can be used from day to day. Thus, we decided on creating a dog meetup application, which will allow users to create dog meetup events, to meet other local dogs and dog owners, to acquire help from dog stores or businesses, and to view local dog events.
Our Users
Before making our idea a reality, we wanted to question a plethora of potential users for this application so that we can gather valuable data about how to design our website. After discussing together, we believe the majority of our user base will consist of dog owners, dog store/business owners, and potential dog owners. For each different user category, we created a series of questions that we believe are vital in understanding our users. As a team, we then asked people in different categories about their opinions on dog meetups and events.
We found that dog owners would be interested in going to meetups, however many of them were never able to attend them due to a plethora of reasons. One reason was that many owners have busy schedules so they do not necessarily have the time to go. Nowadays, people are very busy and taking care of a dog already takes a toll on peoples’ time. Also many of them could not go, since the events are too far, notable meetups in major cities. They know about events through social media like Facebook from liking event photos and responding to event messages, however many dog owners would not attend an event without going with a friend.
Potential dog owners usually go to events close to where they are and to events targeted for people without dogs, like fluffy therapies (where people are able to cuddle and play with other dogs). This is because they said that they would “feel awkward” at meetups if they did not have a dog or bring at least a friend with them. However, these users are more likely to attend dog meetup events if they had the chance of knowing the potential adoptees.
Different dog businesses have varying opinions on the purpose of dog events. Adoption centers, like Humane Society, focus on fundraising events and spreading awareness about their dogs. While, store businesses, like PetCo, use social media, like Twitter, Facebook, and Instagram, to promote events to promote new products. Their dog meetups are focused on locations, where they have the most chance to be successful. PetCo uses lots of advertisement, from search engines and banners, to promote their products or events.
The Competition
Meetup.com and Facebook are the world’s go to websites when you want to host an event. These two websites host millions of users from across the world and it is easy to get any event or group started. However, these websites host millions of different events of different categories, so they are not designed specifically for dog events. Our website would be better because there would be tools, such as knowing the location of other dog owners or local dog events, that cater to dog owners, dog enthusiasts, and dog stores/businesses. Also, since our website is specialized for dogs, we are able to support our users more whenever they need help. This dog meetup website would also foster a stronger and closer community through these dog events.
BarkHappy, Sniffr, and Playdate are all mobile applications that can be downloaded from the Google Play Store and Apple Store. They are all applications that allow dog owners to create a social media for their dogs, meet other dog owners and dogs, write status messages, and view other local dogs. These all incorporate Facebook integration and Google Maps in their application. However, our website will be better and different. To use these applications, users must signup with their dog and themselves and create profiles for each of these. Our application will not force users to signup and allow unregistered users to still be able to see local dog events around them. Also, these applications REQUIRE users to have own a dog, however our website will allow potential dog owners and dog enthusiasts to be able to attend these events. These applications have little to no business incorporation in their design. However, we plan on sponsoring events from famous pet stores and businesses like Humane Society and PetCo, in order to help increase dog event meetups.
Week 3, Personas and Story-boarding
Author: Berkeley Vogelheim
“Creativity requires the courage to let go of certainties.” Fromm
As we continue to grow and explore both ourselves and our product, we knew that we needed to find ways to unlock and tap into our full creativity to find and explore every corner of what our product could offer. Up to this point we had begun to really come together as a team, finding our roles and growing together. Likewise, we had done our research on our product, going out and interviewing potential users as well as analyzing potential competitors.
As we strive to accomplish a well-designed, user friendly experience and product, we always have to be ready to read, react, and change both our product and ourselves.
After concluding our need finding from both our interviews and competitive analysis, our team set about creating personas that would accurately give us an idea of who would be using our website and how. We broadly categorized our users into 3 groups: Adoption Center, Businesses, and Individuals. We decided that in order to generate the widest variety of situations and possible experiences, we further split these groups up into six more specific groups. These groups were Adoption Centers, Big Businesses, Small (local) Businesses, Potential Dog Owners, Single People who own dogs, and families who own dogs.
Persona Developing
We went out as individuals to explore our personas in order to better understand how and why these groups would interact with our product. We began first to explore our personas, their demographics, age, and really develop our users as people as individuals rather that cookie cutter models. Developing personas goes beyond a simple age and gender, instead we seeked to create a person, with personality traits, hobbies, interests, and of course for our purposes, dog ownership.
Story-Boarding
After creating our personas, we all individually got to work sketching out storyboards. Storyboards are essentially sketches containing story lines of how and why that specific persona would interact with our product. This process what incredibly insightful for many of us. Although not well versed or familiar with taking the pencil to the paper, we all learned about the importance and significance of both coming up with three unique situations for each of our personas, and also drawing them out. We all realized that while sketching was something not all of us were not familiar with, we learned that sketching out our ideas really allowed our creativity and our ideas to really flow and expand.
“The expediency and impromptu nature of picking up a pencil and letting ideas flow onto paper can be both powerful and compelling” -Baskinger
Additionally, this process allowed us to explore and expand our original simple idea of hosting dog meetups. We finessed our minds in coming up with more varied and unique experiences our users might have. We reflected on our user interface and plan for design, as well as our product as a whole and realize its strength and weaknesses among potential users. We found uses and features that we didn’t even know we wanted or needed such as a volunteer event hosted by an Adoption Agency, or a busy family needing desperately to find a friend for their socially active beagle. These storyboards highlight some of our findings through the lens of our personas.
After coming together and discussing our individual discoveries, we again talked about our product, its features, and its potential uses. We found through our story boarding multiple possible uses and additional functionality, such as priced events and and user profiles, that we previously had not even considered. We continued to learn about each other and grow creatively as a group as we expanded upon our ideas once again.
“Sharing, and Reflecting As designers, we enjoy the journey of discovery, in making relationships between intangible ideas/data and the formal elements that make an idea accessible” -Baskinger
Analysis and Development
We understood the need to translate these somewhat abstract ideas into our product, so we began discussing specifics on features on our website. We realized we needed user profiles, as well as separate profiles for businesses and adoption agencies. We also learned from both our interviews and our story-boarding process that many users want a quick and fast way to gain access to event listings. Therefore we decided upon having an optional login process for users who wanted to access some additional features, such as event tracking and RSVP, as well as the option to use the website without logging in, for people who simply wanted to quickly view events. Either way, we continued to grow and develop the specifics of our product based on our story-board analysis.
As we continue to grow as a group we will continue to seek new paths to unlocking our individual and collective creative potential. We understand that we need to continue exploring alternative user experiences and possible story-boards as we refine the user experience on our website. As we strive to accomplish a well-designed, user friendly experience and product, we always have to be ready to read, react, and change both our product and ourselves.
Week 4: Prototyping Process & Design Iterations
Author: Ying (Adam) Pan
“To truly see the fruit of our visions, we need to experience the design…”
Initial Design
After working with the team through the early design phase of our product, we came together to come up with a rough iteration of our platform that will satisfy the personas we created as well as meet the needs of our target audiences. Until now, we have mostly been gathering information regarding our products in order to gain better insights into what the users might like to see and better understand what we are trying to achieve with our web platform. With the information gathered, we created a rough prototype of what the web application will look like and what it will achieve.
We used parallel prototyping, one with a clickable PowerPoint mock-up and another, a paper mock-up of our web platform. For the paper prototype, we focus on making sure potential testers will be able to see the events listings in the home page, and go through the process of creating events, and users profiles manually to better see structural design problems.
The PowerPoint mock-up, allow users to follow the functionalities processes including signing up and logging in to the accounts as well as creating customized events to better visualize common usage scenarios and potential user experience issues.
Users Feedback & Heuristic Evaluations
The initial prototype was useful in displaying our ideas, but were lacking actual product feedbacks. Thus, we decided to recruit some early testers from another project team and people we know to gain a better understanding of what we can do to improve our product. From the feedbacks, we realized that while many users enjoy the clean layouts and intuitive interfaces which provide helpful information that were easy to find and locate, there were some issues that they encountered from using the application. For example, some users found the home button to be functionally ambiguous as it could also mean events searches. Others found the organization of the menu to be confusing as well as events listings to not provide clear, concise feedback regarding the events.
“some users found the home button to be functionally confusing”
Many suggested having map location change in relation to events to provide better feedback for users. There were also suggestions for UI/UX change regarding the navigations, real-time events feedback, and different views depending on use cases.
Another way we assess our early prototype was through heuristic evaluations through Nielson’s ten principles for interactive designs. From the heuristic evaluation, we realized that the visibility of our application status as well as matching system versus real world scenarios could be improve on by making feedbacks and notifications less ambiguous. For a product like a web application to be well designed, consistency and user control need to be taken into accounts, which we noted did not quite meet user expectations as our application contain redundancies like home tabs and users profiles and some faulty functional use cases like retrieving passwords. There are also improvements that can be made on making the events more customizable and user friendly. However, we noted that many of the early evaluations are unreasonable as it is only our first prototype, but it gave valuable insights to what improvements to incorporate to our prototype revisions.
Design Decisions & Changes Introduced
By combining heuristic analysis and users feedback, we realize that there are five major components we needed to address. First, one common issue was the navigation bars. We realized we did not take into account that users would simply click on the logo rather than the home page icon. Originally, we had four tabs: Home, About Create Events, FAQ. We realize that the home button can serve better in allowing users to view their own events that they are interested in. We also decided to combine the About and FAQs since they contain duplicate information.
“…five major components we needed to address.”
Another problem we found was event filter design, which we decided that rather than having a drop down menu, allowing users to select low to high for specific filters will be more intuitive and easier to use. We also learned the value of informative website name as it can either attract or repel potential users. The fourth problem we saw and wanted to address is account creation which was missing dog information. The last major problem we saw was event page. We wanted to incorporate event page listings of dog events as home page with event thumbnail rather than have the event photo taking up space in the search list as it make the page look more clean and fluid.
Final Low-Fidelity Iteration
Our revised final low fidelity iteration demonstrated design changes based on the feedback and evaluations we gathered. The home page shows a listing of puppy events that that are taking place with intuitive filters base on distance, price and other useful features. The home page contains a clean interface with the logo serving as the homepage button, the event creation bar and a combined FAQ/About navigation bar. We added changes to events creations allowing for customization options for dogs added. After the events is created, it displays useful information regarding location, time, people who are attending events as well as basic help for people interested. The logo of the website now also contain useful information that briefly provide visitors information about what the website is about.
Overall, we are optimistic on our design progress and we hope to start the implementation of the web application soon. While we face many challenges in coming up with a website that correctly address user needs, we also understand that it is through experiencing the different stages of prototyping that we can truly see the product for what it will become.
Week 5: Implementing the Final Prototype and Design Changes
Authors: Erik Chau and Jason Pon
Implementing the Final Prototype
As we began moving to the implementation stage for our application, we referenced the design and layout of our low fidelity prototype that we made using Balsamiq. Most of our team hadn’t had a vast amount of experience developing websites, so we were initially concerned about how to implement the advanced features that our site was going to support, such as logging in/creating an account, Google Maps integration, and filtering events. We wanted to start off small, so instead of worry about the advanced features of the site, we would focus on creating static versions of the main pages. This involved learning Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) for some of us and it was definitely a challenge trying to display elements in the manner and layout that they were represented in the lo-fi prototype.
As a team, we experimented with and collaborated on the final color scheme and name of our website since we didn’t have a chance to represent that in our prototype. We eventually settled on green, orange, and white. Green was a good selection because of the association of being earthly, which fits in with the friendly message our website wants to convey about the events that are hosted. Orange was a complementary color to green, along with practicing good decision decisions, it served to help emphasize the accessibility of the navigation bar to users. It was difficult to come up an original website name, but we settled on our team name “Puppy Squad” as it pushed out a feeling of camaraderie. With the color scheme and website name decided, we have a refined look of our static website.
After a greater learning of and experience with HTML and CSS by members of our team, we were able to refine our static designs of our pages and begin to look toward implementing the advanced features of our site using Javascript. Now, instead of being static and picture-like, our team had magical moments when we could now create accounts with the website, create new meetup events, and even filter for specific events. Like any other programming project, we did encounter bugs and unexpected behavior such as with our Javascript implementation where an error message would popup when it shouldn’t when trying to login with correct login information, or when the page refreshes multiple times for no reason. But through refinement, we were able to eliminate or mitigate those issues for a more stable website.
We’re proud of how much we’ve implemented thus far, and how the site begins to deliver on the feature needs of our user base. There’s much more implementation that Puppy Squad can evolve into over time, but for now, here’s the look of the current Puppy Squad.
Design Changes
Many of our initial design decisions made it through implementation and user testing. However, there were several aspects we neglected when designing the prototype. When users were initially shown the website they were not sure of its purpose, so we decided to add the catchphrase “San Diego’s Premiere Meetup App” beside the logo for clarity. The initial design for the navigation bar needed to be altered to improve the aesthetic appeal of the website and its usability for the consumer. A common comment we received from the user feedback was that the order of the tabs did not make sense. To fix this issue we rearranged the order of the tabs, so that they followed a more logical progression. So for our final layout we decided on to have: Events, Create an Event, and About/FAQs; Then we removed the Home tab in favor of using the logo to redirect home. Also while the solid colored navigation bar appeared fine for the prototype, we found that when it was implemented the navigation bar appeared bland and uninviting. So we decided that using a picture in the navigation bar might liven the page up and convey the purpose of our website better.
User testing also revealed that people preferred to have a related image beside the events when being displayed so that change was made to the Events list to reflect that finding. While testing the Event search feature we found people were more inclined to use the filters if they were implemented in various drop down buttons as opposed to having to type in each value separately.
During user testing we had a login feature that allowed people to signup with Facebook, but we had forgotten to have a prompt informing users of the “add a dog” feature for accounts. However, we did not have the time to fully implement the Facebook connectivity with the website so that feature will have to be implemented later.
Overall we were quite pleased with the final outcome for the website. Our presentation can be found here. After delivering our website we developed this tagline to describe the site:
Puppy Squad is San Diego’s Premiere Dog Meetup Website. This site enables individuals, businesses, families with or without dogs to easily find and attend events.
