A Mobile Application Optimized for Real-time Advertising

Yep, worked with a team on an app! Our class team was tasked with creating an application that focuses on location-based real-time advertising. The application would pick out hourly or daily specials of local restaurants, bars, ice cream parlors, etc. that would happen in the area, post them to the application and (based on user preference) would notify users of the specials. The trick was that these were restricted to a certain mile radius!

Role: User Research, Usability Analyst, Interaction Design, UX Design

Try Pinwheel

"How might we craft a solution for a real-time data that ties together consumers and merchants for providing promotional discounts according to geographic coordinates?"

Problem and Target Audience

The target audience our sponsor provided to us was anybody ages 18-60. Later while in conversation with our sponsor, we identified a secondary target audience: restaurant owners and/or managers. For the purpose of feasibility for this project we kept our primary target audience as our main focus and kept the primary location as Greater Lafayette area.

We went out and gathered information from various places in an effort to understand exactly how people thought about our problem topic. We asked questions like:

  • How do you find specials for restaurants or places alike?
  • What are some tools you use?
  • Why do you use them?
  • What don't you like about these tools

Research and Requirements

We gathered some great information. People gave us info on the exact items they look for in a deal, why they search for it, what their concerns were, shortcuts, and more. One of the key points gathered out of this research was our competitor, or competitors to be exact. People in our target audience mentioned Groupon, Yelp, and SmallTabs as tools that they used when asked questions pertaining to our problem. We thought this interesting and turned to the internet to investigate these more.

We looked at the main tools people used and information presented on each application. We found some valuable tidbits that we could turn around and/or apply to our project. For example, in Groupon's phone app each deal is designed to hold a brief description of the deal, followed by a price reduction and a related background image. Our app is not quite geared towards exact cash reduction, we did however understand their reasoning for this style. By displaying only what is necessary, users can quickly gather all the information needed to make the decision to check out this deal.

Once we reached saturation, the other UI/UX Designer Jessica Theuerl and I analyzed the information and came up with some Personas and requirements. Again, for the purpose of fulfilling the project requirements we focused on the primary target audience. Each persona designates a specific segment in our audience.

Iteration and Wireframing

At this point we went into the conceptual design stage. We sketched up countless thumbnails of each page to fully flush out different tools each page needed, what users would look for versus what they would not, where items would be placed. We evaluated each design carefully, and created storyboards to link each page to one another. We wanted to make sure where each page would go, what the main functions would be according to our personas and requirements.

Once we decided our basic route, we moved into low-fidelity wireframe creation. We formulated wireframes to both display each page users would use and match to each case scenarios we created. The wireframes spread across the entirety of the app, providing a basic structure for each screen a user would run into. We created a screen for the deals themselves, a more in-depth screen per single deal, a map screen, a favorites screen, a filter screen, a settings screen, and a search screen. These were our first round of wireframes.

Upon testing these wireframes, gathering feedback, and researching online we restructured some of our wireframes into the form we have today. We evaluated the main functions of the app and decided to remove a few of the main navigation items as main navigation items and place them as secondary functions in the top bar. We realized we were slightly breaking conventions (Consistency and Standards)by placing the settings and search in the main navigation. We also learned that not many people recognized the filter icon, so we decided to combine the functions of the search and filter screens into one search/filter screen to minimize user error as to which screen does what and simplify the interactions. We changed the main navigation's design into something that used less screen real estate and closer aligned with the application's structure. Once we decided our overall skeleton of the app, Jessica and I traded responsibilities on high-fidelity mock-up creation and icon research, Jess taking over most of the mock-up and I the icon research/asset creation.

Visual Design

For our high-fidelity mock-up, we chose to use orange as our main color of choice, as orange promotes excitement, action, and hunger. We wanted to entice our users to formulate thoughts around that. At this point I focused heavily into icon research and creation, letting Jessica handle the mock-up.

The icons needed to match the design of each other to promote an overall feel, and they needed to speak the user's language, so this task required me to gather feedback from our user group again in order to understand which icons would work versus what would not. Interesting results were found. For example, the icon for map/directions can be mistaken as navigation, which leads to confusing outcomes. Specifying that these are different were one of the items we ran into that we later needed to fix.

Once the high-fidelity mock-up was completed, we handed it over to our developers to let them finish a working prototype. For the interest of time on the project, we were restricted from doing in-depth user reviews on this mock-up.

The prototype was finished and we gathered some people to test out our app in the Greater Lafayette area. The participants were to use the app as they would in a regular setting with restaurants, ice cream parlors, etc. in the area. Upon usage of the app, we found that there was a 90% satisfaction rate of our application with our test participants. The feedback we recieved were very similar, with some differences. Many of our participants said our app was very intuitive and easy to understand. It functioned how they would use it, in most cases. There were in fact some things that we need to address, however, in future's time.

Adding a new list to favorites from deal description screen required users to enter the name of the list, select it, then close out the add list screen. This would cause error as users may not remember to select the list. We also found some errors with a couple of the food icons we used. These icons may look similar to other food genres in our app, which would cause some error.

This is as far as we could get with our app, as this was our semester senior design project. This project, however, is still evolving and changing. We are currently in the mix of modifying. Overall, this project taught me good amount of wisdom in regards to working in a UX team to create a product. I look at this project as one of the most valuable, as not only did it grant me exposure to application creation, it allowed me to flex my UX muscles and work in a UX team for the first time. I'm really grateful for being able to participate in this design and work with three others who are awesome people.

All done here? Head back to the Portfolio