Trendr

An app to help keep college students and businesses up to date with trends — UX Design case study

The problem:

Colleges are ever changing. The trends people are following, the places people are going, and the kinds of events people are attending are and will always be different. This makes it hard for new students to keep up with what is going on, but more importantly it makes it hard for businesses to stay up to date with how to market towards younger generations.

Businesses cannot afford to miss out on trends and events these younger generations are participating in. According to Statista, “[…]millennials expenditure is expected to grow from 600 billion in 2013 to 1.4 trillion in 2020.” Statista goes on to state that “[…]female millennials purchase eight hundred dollars worth of apparel annually.” This shows just how important it is for not only college students to stay up to date with trends, but businesses also.

The Team:

Design Team:

  • Seth Wright
  • Cooper Kelly
  • Anita English

Development Team:

  • Trevor Adcock
  • Matt Schweppe
  • Benjamin Adams

My Role:

  • Research
  • User story map
  • Persona
  • Wireframes
  • Information Architecture
  • Visual Design
  • Prototyping

Process to find solution:

To start this project we decided to use the IDEO design thinking process. This was a process that I have used on a prior project and it was also familiar to our whole team. We found that it worked best and allowed us to keep the user in mind whether that be an everyday user or a business. With the process established we were ready to move to our research phase.

Research:

To start our research as a team we came up with a few assumptions:

  • People actually want to stay up to date with trends and what others are doing in their area.
  • People don’t want to avoid crowds.
  • People have a fear of missing out.
  • People keep up to date with trends and events through social media.
  • Most people want to be able to create or setup events themselves.

After assumptions were complete we drafted a survey that was distributed on multiple social media platforms including email and by text. This allowed us to receive upwards of forty plus responses. I conducted multiple in-person interviews with a questionnaire we created. We asked questions regarding how people got their info on events, topics, and places. We also asked what kinds of events and places people like to go to such as restaurants, bars and venues.

Survey responses for staying up to date with trends

Some things we learned through the research:

  • The majority of people surveyed either find out about events or trends by word of mouth or through social media.
  • When people see a crowded area they are more inclined to see what is going on.
  • Most people do not usually organize public or private events and would rather just attend already organized events.

Planning:

Persona

Once we felt we had gathered enough research from our interviews and survey we created our persona Randy Marsh. This persona helped keep the user in mind and also helped keep the developers up to date with the goals we were aiming to accomplish.

User Story Map

While creating the user story map we posted the different goals Randy had and what kind of flow he would take in order to complete set out tasks. As we went along we would sketch out what we had in mind for different screens on the app. This helped everyone stay on the same page. It was especially useful while working with developers since they were able to see what they would be coding, and if they would be able to actually code it.

Ideating:

The ideation process is the point where our team came together and gathered all the research data we had. After completing the user story map we were able to start on the user flow, wireframes, and mid fidelity designs. By completing these steps inside of the Ideation process we are able to sift through viable solutions/non-viable solutions and create the minimum viable product.

Minimum viable product

We proposed to do an app that does the following:

  • Search a college or area.
  • See what is being talked about in that area.
  • See what events are popular.
  • See what venues are popular.
  • Purchase tickets to events the user is interested in.

UI Changes

With the user story map completed we moved onto the wire framing of the app. We had already drawn up wireframes and created some mid-fidelity designs in sketch. In some of the previous designs we had a tab bar that would take you between the pages containing the map, favorites, profile, and settings. We felt all theses different pages created too many tap points and we wanted to create something that felt like you were never going to a totally different page. As a team we decided to create a drawer system that would allow you to choose how you could view content. This gave the user a feeling of control, gave them the search function any time they needed it and creates a fluid user experience.

Left: Design with tab bar. Right: Design with drawer function.

Information Architecture

Once we were settled on the details of the drawer function we moved on create the look of each view: Topics, Events, and Places. With events we were torn on how we should display the hierarchy of information on each post. After a card sort survey I discovered that most people like to see in the following order:

  1. Date and time
  2. Venue
  3. Price

After establishing the visual hierarchy for events we added the affordance of buying tickets. We designed the event card with the ability of expanding once tapped to show the “buy ticket” button. However, after receiving some feedback we determined the expansion ability to be an unnecessary step in the user flow. As a result I re-designed the event card with the expanded view which kept in line with our goal of creating a fluid user experience.

Left: View with the expansion ability. Right: View with a “Buy Ticket” button already displayed.

Design and Prototype:

Visual Design

Originally we started with the following color pallet:

Original Color Pallet

After some discussion we decided to go a different direction. Since we were using various social media APIs for each category (Topics, Events and Places) we selected the main colors each social site used. For Topics we used the Twitter blue, for Events we used the Eventbrite orange, and for Places we used the FourSquare Pink.

Final Color Pallet

After finishing the high-fidelity designs we combined all of our screens and handed the designs off to our development team.

Prototype

I created a workable prototype using InVision and displayed it for a design review. We received mainly positive feedback on the design and functionality. We did get feedback regarding the radius that was displayed around a campus when it was selected. Users were confused on what its purpose was. Due to time constraints we were unable to do extensive testing. Once a more functional version is built in TestFlight we will continue to do usability testing.

Link to prototype

Pivots and Changes:

During the course of this project there were multiple pivots:

  • The original idea was an app to allow a musician to play a song or series of chords and have it transcribed into music real time. After speaking the developers on the team they determined they wouldn’t be able to accomplish this.
  • We then moved toward an app that would act as a heat map of where people were gathering. This would allow people to see where events were happening and what people would be doing. We determined this wasn’t a viable business solution and we were unable to track where people were in live time.
  • The next idea was to create an app that would allow a business to see the top topics, posts and trends from multiple social media sites. The purpose would be to help with marketing in a specific market without owning accounts on multiple platforms. After completing user research, creating a user story map and some high fidelity designs we were told this app would not be possible because we could not get the data we needed from some of the social media platforms.
  • We were then made aware that we could pull the data from Eventbrite and Foursquare. Though we had another pivot we were still able to use a lot of the research and designs we had previously done.

Conclusion:

During this project I learned couple of important lessons:

  1. There will always be changes, bumps in the road and conflicts. We experienced several pivots due to APIs not being available and not having a real business solution. As a team we still pushed forward and did everything we could to create a product that was useable and useful.
  2. After pivots you will have to cut some of your favorite screens you’ve designed and that’s okay. After our final pivot we had to cut a number of screens we spent a good amount of time designing. I found that even though I couldn’t use a screen in it’s entirety I was still able use portions of each screen to create something that looked and functioned better.

Though at times we felt as a time we could not finish this project we pushed through, stayed motivated, and created a useful and useable project. Please feel free to connect on LinkedIn or comment below if you have any questions.

Tools:

Sketch, Pen and Paper, Whiteboard, Sticky Notes, InVision and Framer