CS Seniors
Week 1 — Logo Design
Author: Wilson Leung
Team Members: Sunbrye Ly, Alvin Tan, Ryan Miyamoto, Vania Chandra, Hansen Dharmawan, Wilson Leung
Since our team consists of all computer science majors, we wanted our team name to be related to our majors, so we came up with the name Computer Science Seniors; CSS for short. At the time of creating our logos, we did not have an idea for our website or app, so some members used google for inspiration while some designed the logos based on our team name. There were also many original and creative designs and these are some of the designs we came up with:
Next we had to choose which logo to be official so we had everyone vote. This was tough because there were a lot of creative and beautiful designs, so each person was allowed three votes to give. We tallied the votes and these were the results:
And the winner…
The team will be finalizing the logo individually to make it more professional. We also decided on the idea for our project which was related to finding housing, so creating our final logo with the project idea would be one way to design it.
Week 2 — Idea Processing
Author: Alvin Tan
Team Members: Sunbrye Ly, Alvin Tan, Ryan Miyamoto, Vania Chandra, Hansen Dharmawan, Wilson Leung
In coming up with our website purpose, each member came up with a few ideas they were interested in working with which then would be voted on. We then delegated each member 3 votes to help us move forward quickly and fairly. Some ideas included were online fitting cameras, gym counters, nearby event finders, and even redesigning Reddit.
After some brief pitches behind each idea, we took some pros and cons regarding each idea to better assess what we had. We prioritized ideas that are more meaningful to us so we will be fully invested our website. We took our votes and a housing search emerged as our most popular idea! We all agreed that it would be best for us to work with something that we are more familiar with. Most of us have had and are even having issues with housing search and so we’re proposing a way to make it more elegant and efficient at the same time.
Our housing website will focus on a matchmaking system rather than having to search one by one on wildly large listings. This will allow users to focus on what they are looking for/can offer and hopefully find other users who are looking for similar things.
Needfinding
Author: Alvin Tan
After being presented with the requirements for this assignment, our group immediately came together proposing a Google survey. This would allow us to reach the appropriate audience in the shortest amount of time while also providing convenience for our interviewees. We would also try to reach some available friends and family for one on one interviews. This would allow us to truly connect with potential users and better our understanding on providing the best product. Throughout the needfinding process, we all agreed that we would look to send our survey to varying users so that we could better gather data that wasn’t skewed towards a certain direction. We would send it to users of different genders, educational backgrounds, as well as established households. In the end, both methods seemed to attract a wide variety of answers.
We looked into details such as whether users would be willing to put in their personal information to help us get an idea of how we would structure our matchmaking system. Surprisingly, we got an overwhelming amount of positive response to this and as long as we’re careful with information gathering, we can continue to move forward. We also looked into what outlooks people are using to currently look for housing which can help us better assess needs and styles.
Not only were we using our survey to get a background idea on potential users, we also included a question that would better help develop our product. As we just currently passed our brainstorming phase, we gathered some information on what factors we should focus on or even include to better or product. From the above graph, we can see that we will need to focus making the availability, price range, and a graphic map clear and balanced for users. This will also allow us to consider what may be discarded or be on hold based off user feedback. From our short answer survey, we could also come to some conclusions about users not liking the long processes, cold calling, and even not receiving responses when looking for housing. From here, we will look into all our data received and adjust our website accordingly.
Competitive Analysis
Author: Ryan Miyamoto
The housing search engine market is a very competitive, yet highly successful niche in real estate due to the constant demand for living space. Thus, to differentiate ourselves and ensure that we don’t create a solution that already exists, we had to consider the following: affordability, ease of use, appearance and customer base. After much deliberation, we determined that our direct competitors are Zillow, Hotpads, Craigslist, the Facebook Housing group and Padmapper. Many of us have used these types of housing search engines before so we are already well aware of how they work as well as their shortcomings.
Zillow, Hotpads, Padmapper
At first glance at the images below, the similarities between the three are undeniable. All feature the same location-based search function as well as various filters that are used to limit the results to the ones that satisfy your criteria. While Padmapper lacks an eye-catching user interface, both Zillow and Hotpads have very modern, attractive designs that makes them credible or trustworthy in the eyes of the user. All things considered, these three sites do a great job of accomplishing what they were designed to do, but they lack a key feature that we agree very important to a large market segment: The ability to help renters find shared residencies. If you plan on living alone or sharing with people you already know, then this may not concern you, but for many people, such as students (like us) and employees/executives who travel, this can be a very time consuming and frustrating issue. With a few tweaks, like the addition of a roommate finder and sharing system we believe any of the three could be exactly what we are envisioning, but the lack of these features prevents a large number of potential users from being able to utilize the site.
Craigslist
Craigslist has nearly the same features as the three above except it has a much less attractive UI. All the filters and location-based search functions are there, but the one thing that positively separates Craigslist from the others is its ability to find places that are being shared. For example, it is not uncommon to see listings for a private master bedroom in a two bedroom apartment. This is great for the aforementioned students because it keeps costs down and helps discover new acquaintances. However, we all came to agree that Craigslist is too notorious for scams and poor communication to be considered a legitimate source of real estate. Just last week Sunbrye and I set up a meeting that took two weeks to organize in order to visit a place for rent for Fall Quarter 2016 that we found on Craigslist. When we got there, the exterior looked nothing like the pictures and the leaser was 45 minutes late. We think that with some modification, Craigslist could be great, but for the time spent addressing these issues, we would much rather create our own site.
Facebook Housing
The UCSD Housing group on Facebook is the exact opposite of Zillow, Padmaper and Hotpads — it’s great for finding roommates, but has no function for finding places to live. Almost every individual in our group is a member of this page and it is unanimous between us that it is extremely unorganized. For those that are uninformed, the way the group works is that you either post a “for lease” or a “searching for” post. Then other members in the group can message you if they are interested or want to submit an offer. Hoever, the second you post an ad, it becomes lost in a mass of other posts and irrelevant junk. Professor Boyle had the idea of simply redoing the page to fit our requirements, but honestly, it would probably be less work and more efficient to just make our own site from scratch rather than figure out how to untangle that mess. Judging by the picture of the group below, you probably think I’m over exaggerating, but just below the third picture begins a long list of various “for sale” and “looking for” posts.
We chose this idea because it fills a segment of real estate that is previously untouched. It is a problem that some of us super seniors are currently facing and we believe that the functionality of our site will prove to be immeasurably helpful for those in a similar situation as us.
Week 3 — Personas & Storyboards
Author: Vania Christie Chandra
As we have discussed on the previous posts, we have gathered data from different group of people regarding their past experience with different house-searching website and ask for their input so we can design our website based on people’s needs and wants.
Now, it is time to make personas and storyboards! Each one of our team members are making their personal character based on the people that they have interviewed. Each character will represent different type of user and each user will have a problem that can be tackled through the use of our house-searching website. Since we have got 6 group members and there were 3 different types of student user that we are focusing on (transfer, freshman, and graduate student), everyone of us partnered up with a member to focus on one type of student.
And meet our six main stars!
Each character has its own background and story.
Alvin is a graduate student that needs a cheap apartment as soon as possible. Ryan is a freshman that wants to find a housemate with similar interest as he does. Sunbrye wants a housemate that can understand his schedule and habit
Wilson is a graduate student that needs a quiet off-campus housing and also quiet housemate. Hansen wants a housing that has many nearby facilities such as gym and grocery store. Lastly, Vania just wants an apartment that is close to the bus stop so she can have easy access to campus.
We are trying to make diverse characters and backgrounds since we would like to be able to satisfy everyone’s needs. The problem that each character has are combination of problems that were derived from our needfinding interview. We the creation of personas, our team hope to be able to empathize with the users.
Here are some storyboards by our team member. Each storyboards expand the character’s problem and how our website will be able to help them overcoming it.
Some of the conclusions that we can draw (literally) from our need finding and personas making:
- Students are not only looking for the perfect housing, but also for the perfect housemates
- We need to develop a website that has as much feature as possible, but still easy to navigate and user-intuitive
- User might or might not want admin interference in finding a house. Details need to be discussed further.
Prototyping & User Testing
Author: Hansen Tamara Dharmawan
As we previously posted, we have come up with different personas and made likely scenarios by storyboarding. We concluded that our house-searching website needs to have a filter search not only for houses but also for roommates. Now, it’s time for some prototyping!
After 2 and a half weeks of Needfinding and Storyboarding, we can finally get our hands dirty with the actual design of our website. We started doing prototyping based on the storyboards we created and results from our needfinding research. Since we only have little time for team meeting, we decided that each member should make one prototype individually and then combine everything after they are tested. We agree on some filters and pages that should be on the prototype.
And here’s the prototypes that we came up with:
Sunbrye’s prototype:
Alvin’s prototype:
Wilson’s prototype:
Hansen & Vania’s prototype:
Ryan’s prototype:
User Testing:
Finally, after we made the prototypes, we proceed to test them in class. We pair up with other group and we in turn show them some of our prototypes and they give their review on the designs as well as the features.
Because we are doing low-fi prototypes, we need to do a lot of explanations to the user. However, the general feedback is quite positive. In this user testing, we used Wilson’s prototype.
Here’s some feedback that we have compiled from the user testing:
- The use of profile in our website should be maximized by putting the preferences in the profile as filter by default.
- Adding map or mapping feature will help the user a lot in filtering potential houses.
- Our website should have a messaging feature to simplify communication.
- User preference should be saved in the profile.
Our Design Journey!
Author: Vania Christie Chandra & Hansen Tamara Dharmawan
Here we are coming to our fourth week of summer class! By the time we are writing this, we have done with our initial prototype, user-testing, and a revised prototype design based on user feedbacks and comments. We have shared some behind-the-scene pictures on the previous post but we would love to share more on the reasons behind some of our decision and why we choose to do the things that we do.
Here we go!
Initial Design
As we previously posted, we initially came up with several designs on our website where each member contributes a prototype.
To avoid having inconsistent designs among ourselves, we decided on several ‘must-have’, ‘should-have’ and ‘could-have’ features that all of our prototype must possess. Our must-have list includes:
- Homepage: The main page that will appear when user first type our website address
- Sign-in / Sign up page: The option for user to sign-up or sign in to their account (if they already have an account)
- Housemate/Housing listing page: The list of listings that are available when user search for certain criteria
- Profile page: User’s profile page where they can edit/add information about themselves.
- Message feature : Used when user would like to contact other user on a listing that he/she is interested in
There are several features that we put on ‘should-have’ that we feel should have been in the ‘must-have’ section, but we are waiting for the user-testing phase to see if we should add those features.
We drew a flowchart to visualize how user would navigate around the website. The flowchart is designed to accompany our must-have list so we know the essential features/pages that we need to have. This is how we imagine user will go around around website
- Beginning on Homepage, user can choose to sign-in (if they have an account already), sign up (make an account), or search for listing without having an account
- If user chooses to sign up, user has to fill up certain information (profile making) to complete your account making
- When user searches for listing, list of search result will appear on the listing page. User can also adjust the filters to create new search
- If there is any listing they are interested in, they can message user to ask for more information
- When a housing is off market, user can take down the listing from our website
Off we go to create our own design prototype!
User Testing
Before our user testing session, our group meet up to decide whose design will be most suitable for our user testing. We discussed the strengths and weaknesses of each of our design and which one satisfies most of our needs and wants.
Sure enough, the winner is…
Wilson’s design!
Some of our own personal reasons why we chose his design was because all the extra information that he includes in his design enables the user to navigate through the website easily. He keeps the design clean and intuitive, but full of extra bits of info that user might find helpful.
When the class began, we teamed up with another team in order to cross-test our team design. We paired up with FireMelon who are doing mobile app for job searching.
On the test itself, we present the user with our low-fi prototype and let the user intuitively use it. User began by being presented by the sign in page. From there, we tried to give them as little information as possible on how to navigate around the website.
We prompted the user to tell us what they think they are doing and the function of each features on the page. We were taking notes on the features that the evaluators think are ambiguous or not sure about. We only response to their questions when they want to navigate to other page or if they are extremely clueless of where they are or what they are doing.
Some of the things that the evaluators try to do includes
- Use the filters for housing/housemate searching
- Update the search result
- View listing profile and contact housing owner
- Check and edit their profile page
- Create their own listing
User Feedback and Design Decisions
In the feedback we got from user testing, we gain a lot of insightful feedbacks on what our design lacks as well as what we have done well. Each comments were written on a post it and we spend some times to organize the feedback based on the page they are found (see image below).
Certain critiques/comments that came up more than once from different users were noted so we can make it a top priority of things that need to be revised. Some of the main concerns are
- Lack of mandatory information needed to create a profile — evaluator expects more information to be included when user create a profile
- Lack of map feature when searching for a house
- No option to edit profile in case we made mistake during account creation
- We want to be able to save listing! (It was in our should-have columns)
However, we also noted the features that users like so we can keep them in our revised prototype. Our users love the simplicity of our design which, despite all the extra filters, allows the user to use the website comfortably. They love the filters that we create to find the ideal housemates since many similar housing websites do not offer the same feature. The map on each listing page (not on the main homepage) would allow the owner to not disclose the exact address of the housing listing while provides approximation to other users where the housing location is going to be.
Some users suggest that our website to be open to non-UCSD students but we are still considering that option.
Major Design Decisions
Based on the user feedback, we have came up with our final low-mid-fi design prototype that we hope have improved from our initial design. We decided that although we used Wilson’s design on the user-testing, we also incorporated some new ideas from other version of initial designs. We tried to take the best features that each design possess while keeping the features that most users like during the user-testing phase.
Some of the major changes include:
- Sign up page — we decided to require more basic information from the user when they sign up to increase user’s credibility. This change will also ease the process of filtering house search by taking information from the user housing preference.
- Creating listing page — We decide to add option to create a listing on the homepage.
- Help page — We decide to add a help page to help the user use our website. The user will be able to contact the website admin (us) or read the Frequently Asked Questions (FAQs)
- Saved Listing — A feature that we include in our ‘should-have’ that are requested by many users! Users would be able to save a listing of their choice for future use.
- Map on homepage — There is now a map on the website homepage! Listing that appear on the search result will pop up as a red dot on the map.
Here are some other pages on our revised prototype
Week 5— Final Wrap Up
Author: Sunbrye Ly
This is it. We’ve arrived at the beginning of the end. The final stretch. Anxiety filled the air as all our hard work has culminated into this final prototype. Will this please the audience? Were the constant feedback and innumerable design changes good enough for our final presentation? Stayed tuned to find out!
The Final Prototype:
We had two choices while deciding how to implement our final prototype. We were given the option to mock up our web app with software that could create a hi-fidelity prototype, or code the entire application. Being that we were a team of purely computer science majors, our team decided that the best way to approach this problem was to fully code the application. We divided the tasks into the different pages and assigned each individual whichever page they wanted to code up the most. Within the next few hours, we had created the skeleton to one of the pages and reaffirmed that coding the product was feasible before the due date. We set up a git repository in order to more easily manage the code.
As we continued coding out our application it slowly dawned on us that at the pace we we’re working at, we may not be able to complete a few of the core features necessary in order for our application to run. We back tracked to our original discussion of coding vs. mockup and decided that with the remaining time left, we needed to use Axure to create a hi-fidelity prototype.
The Final Designs:
Based on feedback from the professor and TA’s we modified the map logos so they are less unambiguous and are more explicit in what they represent. Additionally, we added a list option as an alternative to the map in case users would prefer to scroll through the listings.
The professor commented on the lack of sign in options so Facebook and Gmail options were added to make the process quicker and more simplified for the user.
The professor commented on the lack of sign in options so Facebook and Gmail options were added to make the process quicker and more simplified for the .
The information page has remained consistent throughout our design process. We used to have “Major” as a required option, but we realized that it may exclude non-students. We have also revised the sign out button to be more visible and added our team’s logo as a direct link to the main housing search page for navigation purposes.
To better assist people in finding housing that suits their needs, people can now fill out filters when they post a listing. This way, when users are searching for a place to live, they can have exact matches to places that are perfect for their requirements.
As with the previous pictures, we added a background image with decreased opacity. We believe it gives the site more character as opposed to a plain white background.
Since communication is crucial for our website to function, the messaging system had to be efficient and easy to use. We implemented a timing system as well so users can keep track of when each message was sent and received.
Team Takeaways:
On the very first day of class, our professor had the entire class speed date each other. This was done in order for everyone to get to know each other. It allowed us to quickly transition into teams without the need to go out of our own way in order to search for a group. As it turns out, our team meshed extremely well together. Through speed dating we were able to gain a slightly more in-depth understanding of each other. Looking back on this, we’ve realized how effective speed dating was towards the success of our application. Most groups see a huge spike in conflicts during the final few weeks of the quarter as people begin stressing out over finals. As a direct result from speed dating, all of our priorities aligned and we went through the entire course with absolutely no conflicts.
Each and every single one of us gained an invaluable amount of knowledge through this course. Because of Professor Boyle, we can all say that we’ve learned so many things over the past few weeks.
I learned a lot about the steps taken towards the completion of a project. It helps me to have a better project planning system that I can apply for the future. She also taught me so much about how to better market yourself through the use of portfolio. — Vania
I learned the steps necessary for a good design project. I also got to apply my knowledge of HTML and CSS as well as acquire new skill in using prototyping tools such as Balsamiq. — Hansen
I learned a little more about bootstrap and the uses of wireframe applications such as Balsamiq and Axure. Those helped me create a portfolio I never would have made without this class. — Wilson
I’ve always seen myself as someone who doesn’t know how to design and passes that task to another. Throughout this course, I learned to challenge myself despite what my final outcome would be. — Alvin
I learned that design is just as important as development. Coming from a mainly programming background, I was used to focusing on the function and content of an application but this class taught me that appearance and visual aesthetic plays an equally large role in the construction of a successful website or application. — Ryan
This class was structured to reflect the real world as much as possible. Assignments were given out but without any sort of direction. Grades were not assigned base off of a rubric, but on how well you satisfied the customers implicit and explicit needs. I learned that in the real world, no one will be holding my hand. It’ll be solely up to me to take the initiative to complete my tasks in the best manners possible. — Sunbrye
Team CSSeniors End Result: Homii
Take the stress off yourself with our web app and never be homeless again! With Homii, you can search for homes, match yourself with a new roommate, post a listing and so much more. Using the most innovative algorithms, our goal is to supply you with all the information you need in order to find yourself the perfect home with the least amount of effort possible.
Checkout our website in this video:
Our final presentation:
