techscene

TechScene is an online event site dedicated to providing event listings specific to technology and the tech industry of Austin, Texas.


DEMO
Final Demo

My Role

  • Team Co-leader
  • User Researcher
  • Interaction Designer

Our Team

  • Kristin Sullivan
  • Julieanne H King
  • Yang Zhang
  • Zhen Wang

Best Practice

  • Interaction Design
  • Wireframe
  • User Research
  • Usability Testing
  • Hi-fidelity Mockup

Overall Process

Process Flow Chart

Initial Concept Discussion

Define opportunity space: there are other event sites within the greater Austin community but they are more broadly focused. The creators of TechScene, after wading through multiple listservs and event sites, became fatigued trying to locate a centrally focused site proving the types of events, activities, meetups, classes/learning opportunities, social and networking get-togethers they wished to attend.

Thus, the idea was born to create a site dedicated to the TechScene in Austin, Texas to meet those needs by listing happenings and opportunities to connect, network, learn, collaborate, play and socialize. TechScene would provide like-minded users a manageable, central location to access key information on the local tech events, eliminating the extraneous listings that are not the intended objectives of students, enthusiasts and professionals.

User Research

Interview Phase 1

In this interview phase, 6 people were interviewed in ages ranging from 22 to 35. Interview questions were designed to gather information on the interviewee’s experience with tech events, current search process and what they would like to see on a tech event website.

Competitve Analysis

After the initial round of interviews, a competitive analysis was conducted on 6 websites identified by interviewees and team members in their current search process. These websites included Meetup, Eventbrite, Do512, SXSW and Technical.ly. Team members summarized the mission of each website and analyzed strengths and weaknesses in their overall design, search functionality, and overall categorization scheme for events.

Through the appraisal of these competitive sites, key features were selected for further analysis of strengths and weaknesses. This investigation allowed for the adoption and improvement of select elements within the TechScene platform.


Competitive Analysis

Interview Phase 2

In this second interview phase, 4 people were interviewed ranging in age from 22 - 60. In the first round of interviews, respondents were primarily female students. In order to balance the gender distribution of the interviewees, we recruited more male respondents in the second round of interviews. The occupations of these respondents included an educational instructor, a professor and 2 employees working in a tech-related field.

Interview Feedbacks

Survey

We launched a survey created in Qualtrics through the iSchool’s Insider listserv in order to accumulate more user information to assist in site development. Survey links were additionally sent to a selection of the tech industry community that was associated with team members. The survey was comprised of 13 questions, which assessed demographic information, experience with tech events and desired content for a tech event website.

Survey Results

Concept Ideation

In our group’s initial stage of site design, we used an affinity diagram method to identify necessary site areas and their location on the site. In this process, each team member read through the interview and survey results and then created a post-it note for each relevant site area. Each team member then placed these post-it notes in their own arrangement of related categories and topics. Following each team member going through this process, we consolidated elements of our individual mappings together.

After synthesizing our findings, we came up with personas and storyboards. Also, our group created a rough design for the site’s overarching categories, global navigation, homepage, event detail page, personal settings page and event creation page.

Affinity Diagram Personas Information Architecture Initial Ideation

Iterative Design

We discussed and determined the initial blueprint. Then we began with paper prototypes, drafting out the chosen design idea, which was supposed to show a flow of the main functions of our website. We gathered usability feedback from usability testing and iterated 5 rounds of the prototype from the early sketch to hi-fidelity mockups. Each iteration, we refined our ideas and design. Meanwhile along with the design, we also settled down the Content Mapping and Controlled Vocabulary.

Wireframes

Wireframes created in Balsamiq and Axure were used to design early versions of the TechScene homepage, search results page, event detail page, account page and create event process. Designs initially sketched on paper were mocked up in these design software programs, which allowed us to rapidly prototype the website. From testing the wireframes, we gathered valuable comments on the feedback towards the information architecture.

Usability Testing

For each prototype, we performed usability testing. From paper prototype to hi-fidelity prototype, we gained a lot of great feedbacks. Based off of feedback we received from each round of usability testing, we made modifications on the pages that may influence user’s experience. In total, 15 participants were used across 25 user testing sessions carried out for this project.

Usability Testing

Hi-fidelity Mockup

For the hi-fidelity prototype, we focused on the TechScene’s brand identity including color, typography, images, icon, grid system, as well as some of the interaction standards included on the site. Based on the guide, the designers and developers have a standard reference point for conducting site design.

Hi-fidelity Mockup
Homepage Design Iteration Search Result Page Design Iteration Search Result Page Design Iteration Search Result Page Design Iteration Search Result Page Design Iteration