UrbanSpire Final Report      

Adrienne Ivey Christina Kao Haley Kong 

Nikhita Obeegadoo          

CS 194H March 12, 2016 

     

 1 

Table of Contents  1. Problem Description      2 2. Problem Overview      3 3.  Task Overview      4 4.  Task Flow      5  

4.1 Simple Task……………………………………………………………………… 5 4.2 Moderate Task…………………………………………………………...…..….  9 4.3 Complex Task…………………………………………………………...…….... 11 

5. Design Evolution      13 5.1 Sketches from NeedFinding (CS 247)……...………………………….……. 13 5.2 Sketches (CS 247)……...……………………………………..………….……. 13 5.3 MediumFi Prototype (CS 247)……...………………………….……...…..…. 14  5.4 HiFi Prototype #1 (CS 194H)……...…………………………...……….……. 15 5.5 Sketches of Redesign (CS 194H)........……...………………………….……. 16 5.6 HiFi Prototype #2 (CS 194H)...……...………………………….………....…. 18 5.7 HiFi Prototype #3 (CS 194H)……...…………………………………....…….  20 5.8 HiFi Final Prototype (CS 194H)……...………………………………....…….  24 5.9 Evaluation Techniques……...………………………………………...….…….  26 

6.  Final Interface       28 6.1 Final UI Functionality……...…………………………………………..….…….  28 6.2 Final UI Design……...……………………………………………....…….…….  28 6.3 Unimplemented Features……...………………………….………………...….. 28 6.4 Wizard of Oz Techniques……...………………………….…………………..... 29 6.5 Tools Used……...……………………………………………………....….….…. 29 

7. Making it Real       31 7.1 Our Team……...…………………………………..……………………….…….  31 7.2 Business Model……...…………………………………………………….…….  31 

8. Summary        33     

 2 

1. Problem Description “All I could do was keep my distance, keep quiet, and hope that they would come to change their perceptions.”   As a result of global migration and diaspora, modern societies are increasingly populated by people coming from a variety of different cultures and backgrounds. Newcomers often have a hard time integrating into existing communities. The overwhelming nature of entering a foreign environment can result in feelings of alienation, confusion, and anxiety on a daily basis, and newcomers often lose confidence in their value as community members. Our application seeks to fulfill the need of newcomers to feel integrated within their new community, while at the same time nourishing and sharing their links to their home culture.       

 3 

2. Solution Overview  Value Proposition: UrbanSpire is a cultural bridge that offers newcomers the chance to flourish in their new community by teaching what they know and love from their home in a neighbortoneighbor context.   Our solution is giving newcomers the opportunity to teach something they know and love from their home culture (e.g. Chinese calligraphy, Malaysian cooking, Martiniquan creole) to members of their new community. This allows them to build confidence and form ties with their neighbors.   

       

 4 

3. Tasks   Simple Task  Learn: Find a class that interests you and sign up for one Description: This task tests that a user is able to perform the basic search functionality of our website, which includes choosing a class, reviewing a class description, selecting a time, and signing up.  Rationale: Since both locals and newcomers can learn (contrasting with how only locals can teach), we expect for there to be more learners than teachers. Furthermore, we believe that it is more intimidating to teach a class than to learn since newcomers tend to feel uncomfortable with the new culture and/or language, feelings that will be amplified by being put into the position of teacher that requires more initiative and authority than a learner. Since the learn functionality will be the most frequently used functionality, we thought that exploring classes and signing up for one should be the first and easiest task.  Moderate Task  Review: Check out a class you’ve taken and write a review for it. Description: This tasks allows the user to explore more functionality of the website, specifically their profile, which includes their past and upcoming classes. In addition, users must navigate the Review functionality where they will leave a review in stars and/or comments.  Rationale: This site consists primarily of the taking and teaching of classes, but with today’s society using sites like Yelp to have a prior assessment of a business’s services, we decided to also implement reviews as a way to: 

1. Allow learners to share their experience and thus guide new learners towards specific classes 

2. Provide valuable feedback and encouragement to teachers Though technically an optional functionality, we thought that with this UI flow resulting in the user exploring the Profile page required more effort and understanding of our website from the user than our simple task. On the other hand, we saw this task as being more straightforward and needing less initiative than that of our complex task.  Complex Task  Teach: Create a class to teach about a topic from your home culture.  Description: This task ensures that the user has explored the third and final functionality of our website: teaching. They must fill out the text boxes on the Teach page, which includes both logistical and descriptive information.  Rationale: Besides learning, teaching is another crucial part of our application. We chose it as our most difficult task because it is the lengthiest task (especially because of the text input) and because it requires taking the initiative with all the different logistical aspects of teaching a class. We hope that by completing the first two tasks that our users will have a general idea of what kind of topics, descriptions, and information should go into a class.   

 5 

4. Task Flows  *** In order to complete these tasks, a user must be logged in. For the second task specifically, the user must have taken a class that has already occurred or they can go to the class page, and click the review link at the bottom of the page (this allows the user to bypass the restriction of having participated in the class. If this app were to move forward, the user would have to have met this requirement to write a review).  You can login using a user we have created. The email is “adrienne.ivey@gmail.com”, and the password is “adrienne”. This user has past classes and will allow you to follow the task flow to write a review rather than using the shortcut on the class page***  

4.1 Simple Task  Learn Task: Find a class that interests you and sign up for one. 

 1) Navigate to the Learn page 

  

mailto:adrienne.ivey@gmail.com

 6 

2) Use the search bar at the top the page to find a category of classes (optional)

  

 7 

3) Browse the classes available

  

4) Select a class that interests them (Click on one of the cards like this one) 

  

5) Review the class description, location, and teacher information 

 8 

  

6) Select a time for the class 

  

7) Sign up for the class 

  

 

 9 

4.2 Moderate Task  Review Task: Check out a class you’ve taken and write a review for it. 

1) Ensure they are already logged in (If you are not logged in, there will be an option to Login on navigation bar. If you are logged in, then your profile picture will appear instead of the Login button.) 

  

2) Go to their profile  

  

3) Navigate to “My Classes” 4) Navigate to “Past Classes” 5) Click on “+ Review” 

 10 

  

6) Select a star rating and write a review for the class 

       

 11 

4.3 Complex Task  Teach Task: Create a class to teach about a topic from your home culture.  

1) Navigate to the Teach page 2) Use the “Need Inspiration?” box for ideas (optional) 

  3) Fill in the different description text fields 

  4) Add a location in the location box 5) Add a class fee per participant 6) Add dates/times 7) Add a photo to the class 8) Confirm the class   

 12 

      

 13 

5. Design Evolution Our UI changed significantly over the past two quarters.  Please find attached a detailed description of each of these steps:   

5.1 Sketches of NeedFinding (CS247)  As we were needfinding in CS 247, we spoke to a number of people from urban communities to figure out what their pain points were. The majority of people we spoke with were cultural newcomers, coming either from international contexts, the east coast, a different part of california. The two main observations we came up with are as follows:  

1) Newcomers feel nervous about their cultural heritage when they move to a distant place. 

2) Newcomers seek out community as a way to build confidence in their new setting. 

We decided to pursue this pain point as our team consisted of a couple of international students, so we had a firsthand experience of entering a foreign environment when coming to Stanford.  

                       

5.2 Sketches (CS247) With these two aforementioned observations, we then brainstormed solutions that would help newcomers to feel comfortable, valued, and integrated into their new settings. Our solution was aimed at answering two questions: How might we transform newcomers’ 

 14 

feelings of nervosity into feelings of pride? How might we make cultural difference something to be shared and valued instead of hidden and ignored?  Unlike CS 147, we did not have a paper prototype, but we did have sketches that were later translated into a mediumfi prototype. 

                         

5.3 MediumFi Prototype (CS247) Our mediumfi prototype consisted of a landing page, a learn page, and a teach page. During user testing, we received feedback that there was too much clutter, our mission was unclear, and our website felt impersonal. As shown below, we were able to organize our design, settle on a theme color of blue, and make it more personal. 

       

 15 

Mocks 1  Mocks 2  Final Mocks 

 5.4 HiFi Prototype #1 (CS 194H) In CS 194H, 3 out of 4 of our team members were new to the project. We spent time familiarizing ourselves with the site while conducting the lab usability study, and we made some minor changes to the CS 247 prototype. 

 Some striking examples:  

● Increased usability for class pages: added an x button and changed the button to “I want to learn!” 

 16 

  

● Decreased clutter: got rid of side pictures on the Teach page    

   

  

● Added scheduling for classes (UI for both teachers and learners)          

5.5 Sketches of Redesign (CS194H) After receiving feedback during class and during office hours, we decided to start over completely. We made sketches of each of our previous pages (i.e. home page, learn page, and teach page) in addition to our added functionality (i.e profiles, reviews, branding).          

  

 17 

 ● Initial sketches of our classes and home pages.  

  

● Initial sketches of our review and profile pages.  

  

● We brainstormed number of different logo designs.  

  

 18 

5.6 HiFi Prototype #2 We received some very useful pieces of feedback during our Lab Usability Study: 

1) Users did not know how to switch between the learn and teach pages. 2) Users were confused by the page of the suggested classes and its hierarchy of 

results. 3) Users did not understand the rating system for each class. 

As mentioned previously, we decided to start from scratch when going from HiFi Prototype #1 to HiFi Prototype #2.  Our colors were much darker than before, and there were a lot of grays and blues. We were also able to connect a backend of a Node.js server and a MongoDB database.  

● Home page featuring more evident learn and teach buttons

 

  

● Learn page featuring suggested classes along with a basic search 

  

 19 

● Class page featuring a more organized class profile, teacher information, basic tagging, location, and time slots.

  

● Teach page featuring more condensed and comprehensive text entry fields and user assistance (the “?” buttons). 

  

● Profile page featuring a profile description, number of friends, and upcoming/past classes/teachings. 

 20 

  

● Review page featuring class title, class description, and star and text entries. 

  

5.7 HiFi Prototype #3 Between HiFi Prototype #2 and HiFi Prototype #3, we received feedback from our field usability study, fellow classmates, and office hours. We again made significant changes to enhance our site’s balance of professionalism and warmth, functionality, and usability. 

 ● Branding (logo/color) 

After brainstorming logo designs in the previous prototype, we finalized on the following logo. We were particularly drawn to how the UrbanSpire initials formed the word “us” and how the two top lines made the logo look like a roof, giving the overall appearance of a house. Moreover, we changed the color of the sight from cool blue to warm orange, to give a much friendlier and “warm” feel. Many of our design decisions were inspired by other sites with a professional yet communitybased feeling such as Cozymeal and Airbnb. 

 21 

  

● Professionalism We reinvented the use of colour and white space on our app to achieve a much more professional feel. This can be seen in all the screenshots shown below. We changed many of our pictures from the impersonal objects (i.e. flags and globe) to pictures more representative of our cultural theme. On our Home page, we even added a banner that would cycle pictures every couple of seconds.  

● Navigation We added a navigation bar on the top righthand corner so users would have a better sense of where they were in our application. We noticed during our field usability study that many people were using the back button on their browser instead of through our application, so we thought that a navigation bar would lend well to the UI flow. Furthermore, we added page titles, which were orange banners with white text. 

  

● Vision Statement Many users were confused as to exactly why they should be using our application. We hoped to help with any confusion by displaying a vision statement on the Home page. 

  

● How it Works During user testing, the tasks were pretty much self explanatory, so we wanted for firsttime users to have the ability to have just as much knowledge about the functionality of our application without us having to tell them. Since the use cases for locals versus newcomers is different, we included a How it Works page that toggled between locals and newcomers. 

 22 

  

● Profile We added a user profile which includes a profile, basic contact information, the past and present classes a user will learn, and all the classes that they have signed up to teach.  

   

● Meet the Team We added a “Meet the Team” page to make our story, journeys and product feel more personal and to add to the professionalism of our site. 

 

 23 

   

● FAQ page We added a FAQ page to answer any questions our users may have, from why they would want to be using this app to how to deal with a complaint they have regarding the UrbanSpire experience. We hope that this page will be helpful to the user and that it helps our site be more complete.  

  

● Class Description On our Class Description pages, users had a difficult time finding the signup button because it was at the bottom of the page, so we redesigned the page such that the signup button was at the top and difficult to be missed. 

       

● Need Inspiration? During field usability studies, many participants were stuck on the Teach page as they asked us “What should I put here?” In response to this observation, we added a Need Inspiration? Box on the righthand side so that users would have a better sense about what they should put for the class title, description, etc. 

 24 

  

● Confirmation Screens It was unclear to users whether their actions were being processed, so we brought back confirmation screens from our initial prototype (CS 247).  

  

5.8 HiFi Final Prototype This was the prototype that we displayed at the project fair. The creation and saving of classes worked at this point. We wanted to add features that would make this a more official looking website, one that could be rolled out at any given moment. 

 ● Contact Us 

We added a “Contact Us” page with all our contact information, so that users could contact us directly with any user experience feedback or ideas. 

  

● Footer We have a footer with a number of links to different useful pages  How it Works, Meet the Team, Contact Us, FAQ, Learn and Teach. Though currently not linked, the icons at the bottom offers the possibility of us connecting via different social media channels. 

 25 

  

● How it Works We wanted to be able to elaborate more about our website and how it worked, so we moved some information from the Home page to a separate page dedicated to describing How it Works. 

  

● Login/Signup We implemented a login/signup functionality to our site, as well as signup/login modals for people who tried to take or teach a class without having signed in beforehand.  

 

 26 

 

  

5.9 Evaluation Techniques Over the past two quarters, user testing was the most valuable evaluation technique to determine the effectiveness of our prototype. Users gave us valuable feedback regarding UI (e.g. when pages felt too cluttered), functionality (e.g what they wanted to be able to choose between, input or view), or communication (e.g when they felt confused about what the site was supposed to convey) 

 Some examples of pivotal moments:  

1. At a time when no user profiles existed yet, a user told us that she felt she was a “stereotype” as a result of signing up to teach a class about her home culture; we therefore made it a priority to create user profiles so that people felt like they were connecting to real members of their community.  

2. During usertesting for the HiFi Prototypes #1 and 2 in this class, a user said he still could not understand what the mission of this site was, or why he should be using it. This feedback led us to rethink our mission statement, and prompted the later creation of a FAQ page.  

 Some pictures from user testing, over the course of two quarters: 

 27 

 

     

 28 

6. Final Interface 6.1 Final UI Functionality  With this app, you can: 

1. Sign up for an account on UrbanSpire, and log in  2. View a text tutorial on how to use the site  3. Browse for classes of interest taught by your neighbors  4. Sign up for a class that interests you  5. Create and Teach a class that interests you  6. Write a review for a class that you have previously taken  7. View the classes you have signed up to take and teach 8. View Contact, FAQ, and Meet the Team pages 

 6.2 Describe the user interface design (i.e., how you use the functionality)  The features of our website were covered in entirety in our tasks. Please reference Sections 4.1, 4.2, and 4.3 for a detailed description of the flow and relevant screenshots.  6.3 Unimplemented Features  

A mobile version of the site We wanted to have our website be mobilereactive, especially since we expect many of our users will be using our website from a mobile device. We were unable to implement this at this point because of time constraints, but if we were to take this project further, this is definitely something we could prioritize.  

  More elaborate Teacher UI 

Another priority, if we were to take this project further, would be a more elaborate teacher UI that allows teachers to view important statistics regarding their classes (e.g. how many students are signed up for which session), interact with these students, and manage class settings (e.g. change location). This was left unimplemented because of time constraints. 

  Error handling and logic to handle user misuse 

This would include displaying an error message if a user tried to sign up for a class that he/she is teaching or if the class was full. This was not a priority in completing the main functionality of our site and we believed it should have taken a back seat to finishing the final touches of our site. 

  Logic for classes that have passed 

We currently don’t have any scripts running through our database to check whether a class has already occurred or not. So, even when the date of a class has passed, the class still appears in the recommendations and the search and doesn’t move into the taken classes for participants or the past teachings for the teachers. We didn’t implement this because, for the extent that our application is being used and tested, the time and effort taken to implement the scripts would have been wasted since this functionality 

 29 

wouldn’t be used. If were to go forward with this application, this would be one of the first features implemented. 

  Simulation of the locationbased nature of the app 

Right now, our dropdowns on the Learn page include Cultural Origin, Activity, and Distance. Unfortunately, we ran out of time to implement searching by the final category because we found it difficult to get a person’s location and then base a distance search off of that information.   6.4 Wizard of Oz Techniques 

Hardcoding classes and their data Right now all the classes were created by us as well as the data. For instance, the number of spots taken in the class on the class card is randomized upon loading the page. We did this because we don’t have any users on the site currently and wanted to replicate the feel as if the site were in use. We also gave every class four stars, since the majority of the classes don’t actually have reviews.  

Hardcoding user profiles  Similarly to the classes, all the profiles were made from scratch. 

 6.5 Tools Used  

Git, collaboration and code management We were all able to work on the project collaboratively and merge are work relatively seamlessly. 

  Heroku, to host the application 

This proved an easy, reliable way of hosting our team website. We were able to push directly from git to get a live version up on heroku. Heroku also had a free feature for MongoDB, the database we used. So we were able to get a database running on MongoDB through Heroku and did not have to do much setup for that. 

  Node.js, for the server 

Node was a quick way to get the server up and running and had many addons to make login and signup very quick and easy. This helped with getting a live application up quickly since the project carried over from 247 was static. We just had to set up our Heroku application as one that was using Node.js and set up the node files in our git repository. When we pushed from git to our “heroku branch”, this took care of installing on the Node dependencies on our Heroku instance. 

  Mongodb, for the database 

MongoDB was an effective way of storing our data and managing the backend of the application. MongoDB was easy to use with Heroku (as described previously). We could create the schemas quickly and quickly change them on the fly. One way MongoDB did 

 30 

not help was that it wasn’t a relational database. The data we were storing would ideally have been stored in a relational database, and because of this, it made it more difficult to fetch data without the ability to join tables (the heroku version of MongoDB was not recent enough to have the $lookup aggregation query). This forced us to need to restructure our schemas to be able to get the information needed with the minimum number of queries. 

  Front End 

HTML  CSS  Javascript/JQuery  Semantic UI, formatting and visual elements  Handlebars, templating for replicated elements (i.e. class cards) 

HTML/CSS/JS/JQuery were straightforward and intuitive to use, especially since all of our team members had experience doing frontend development before. Semantic UI had many features and elements that were very useful in creating our site. Despite the learning curve and the effort spent restructuring our html to fit its requirements, Semantic UI allowed us to create something visually pleasing in a relatively short amount of time. Handlebars helped us to have repeated elements without replicating our code which also saved a lot of time in the long run.  

     

 31 

7. Making it Real  7.1 Our Team Our team consists of Adrienne Ivey, Christina Kao, Haley Kong and Nikhita Obeegadoo. We are all CS undergraduate (Adrienne, Nikhita) or graduate (Christina, Haley) students with a focus in HumanComputer Interaction. As a result, we all had the coding, design and testing skills to make a significant contribution to this project.   Our specific roles were:  

1. Adrienne: Development Lead 2. Christina: Development Lead 3. Haley: Design Lead / Developer 4. Nikhita: User Testing Lead  

 7.2 Business Model  Our ideas for the business model were developed during the class exercise on Canvanizer. In order for this project to be viable, it needs to be selfsustainable and generate the revenue it requires to keep going.  

  Market Size: The primary customers would be all the members of a community 

(newcomers and locals) who are interested in, and have the time to invest in, learning or teaching some form of cultural knowledge or skill. Assuming that we were to pilot this app in San Francisco, which as of 2013 had a population of 837,442 people, one could assume that our market would be some 400,000 people.   

Pricing For the time being, we allow teachers to specify the fees they want to charge for each class. We imagine that while some teachers would want to offer their classes for free, others would want to charge for supplies (i.e. ingredients for a cooking class, special ink for a calligraphy class) or the time they invest in preparing for the class and teaching. We, as an app, do not take any money from either teachers or learners; payment for classes takes place simply between teachers and customers.   Since we serve mainly as a platform to connect learners and teachers, our main costs are in building and maintaining the site. We expect to obtain this revenue from: 

1. Community centers offering us compensation for directing people to them, since they make profit on memberships. To incentivize community members to allow us to use their space, we would advertise community memberships at discounted prices on our websites to encourage those who wouldn't have known about the community centers or bought passes to make the purchase. Because our site is was brought users to this purchase, we would negotiate receipt of a percentage of the profit. This would only be the case in the long term, when our app has already gained a certain degree of popularity and usage among members of a community.  

 32 

○ A related interesting idea is that of splitting revenue on community center passes: Many community centers require residents to get some sort of yearly pass for a small fee. As partners with the community center, when people sign up on our website for a class, they would get a slightly discounted membership card. We would split this revenue with the community center at some percentage. 

2. Lastly, our website could also earn money through advertisements. Much like how Google is able to use data analytics to generate userspecific advertisements, our website could also use a similar model where people who have a history of searching a certain topic can then have advertisements of local businesses. This would benefit both parties as local businesses would gain profits and more traffic while the website user would be able to delve deeper into the culture as they experience a cultural food/service firsthand. 

○ To maintain a local flavor, we would approach local businesses and establishments and offer them reasonable prices to advertise on our site to their community. For example, we would guarantee advertisements for local turkish restaurants to users who have taken or searched for turkish classes. 

 We also consider the following possibilities to increase our customer base: 

1. Have advocates in the community to increase visibility, and fuel wordofmouth recommendations.  

2. Periodically invite cultural experts to offer classes on the site in order to increase user engagement  

3. Approach middle and high schools and colleges to count a number of UrbanSpire classes as part of a Citizenship Education/Global Education requirement, such as the one that Stanford currently has as a General Education Requirement.  

 We would also consider developing a premium version with certain additional features, to create an additional revenue stream.  

  Impact  

In the long term, our product will weave in newcomers and local community members, students, community centers and businesses into a more cohesive and culturally diverse community.  

     

 33 

8. Summary Our key innovation lies in the creation of a platform that allows the exchange of culturallyspecific skills within modern communities. This is innovative in that:  

1. It not only creates awareness of the immense cultural knowledge existing in communities around us, but harnesses this cultural wealth to form meaningful bonds within communities.  

2. It connects culture learners to culture teachers directly, without the need for an intermediary.  

 We hope that our app will have a key impact on the world by: 

1. Fostering stronger intercultural links within communities  2. Creating more culturallyaware and therefore culturallyappreciative individuals  3. Contributing to a more openminded and intercultural world, where prejudice and 

stereotypes regarding other cultures is replaced by a feeling of awe and excitement as each different culture brings new teachings and learnings.