Select Page

OPC Design Challenge

by | Mar 2, 2021 | UX

<Back

Using Elastic UI Framework as a Coffee Shop Application.

The Coffee Search App:

The design, user flow, wireframe, design and prototype for this application was created in 48 hours.

Objective:

Vision: A web application that allows the user to locate, get directions to, favor and interact with a community of artisan coffee shops and coffee shop lovers.

Goals:

An application that allows coffee lovers to find new and unique coffee experiences while building community in the process.

  1. Account specific application
  2. Solely based on data provided by google maps api for the MVP
  3. Allow user to control distance/ radius of search
  4. Allow user to see list of locations within the search radius
  5. Allow user to search for a specific coffee shop location
  6. Allow the user to collect shop reward

Initiatives:

  1. Create coffee lover community
  2. Allow artisan coffee shops the ability to provide a reward system for return customers through the community
  3. Allow coffee lovers the ability to locate local coffee shops within a predetermined radius

Challenge of the Design

  1. Data organization
  2. Google map user bias. Users already have experience using similar search tools and will have heightened expectations for the user experience.
  3. Designing to scale.

Persona:

Dolton, a 30 year old remote Cloud Engineer with a passion for coffee shop vibes. He is single with lots of free time on his hands. He is very particular about his coffee, having beer with friends, loves music and art. He travels at least 4 times a year on national and international trips – he practically loves places like Denver, Amsterdam, Austin and New York. He’s very active on social media. He’s an animal lover.

Product Design Features

The design comprised of seven main display types not including the load screen.

  1. Login/ signup display
  2. Main map display
  3. Individual coffee shop display
  4. Account display
  5. Account setup display
  6. Settings display
  7. Forget password display
Initial MVP Application Flow. Flow chart that highlights the direction of the user flow while also considering feature access.
Base Application Design – Flow v2. Hand sketched wireframes (not displayed) informed me on what elements were needed for the high-fidelity design.
Main application screens

The main application is comprised of a:

  1. Search feature: This allows the user to search for coffee shop locations using the
    1. Name of the shop
    2. Zipcode
    3. City
  2. Map feature:
    1. The default map display will be based on distance from the current location. The default settings will be established during setup.
    2. The map will adjust to display coffee shop locations based on new search parameters.
    3. The map is interactive and will display a pop out of a shop if clicked.
    4. A clicked pop-out will transition users to an individual coffee shop page.
  3. List feature
    1. The list will be organized by distance to the current location.
    2. List will reorganize based on map click’s bringing clicked shop locations to the top of the list.
    3. List will be continual scroll
  4. Rewards feature
    1. Active within the individual shop page
    2. displayed inactive on main search page (may want to A/B test if this will encourage/ remind users of rewards)
    3. Rewards will be tracked on the user account page
  5. Individual coffee shop page
    1. Provides coffee shop details
    2. Displays individual coffee shop rewards.
    3. One-click direction linked to google maps.
    4. Search bar
Detailed View of Elastic as a Coffee Shop

Finally – if Elastic were my coffee shop app this is what it would look like.

The Elastic UI guidelines and the Elastic UI Framework guided my design decisions.

The high-fidelity wireframe and prototype were used to test the user experience of the application. This allows me to make an informed decision on what edits need to be made in the next iteration. For example, in the original design, the settings page which controls the distance is separate from the account information. In the elastic version, I combined the two pages.

I’ve also developed a list for the 2.0 and 3.0 versions which will allow me to manage my project priorities as I scale the design. For example, adding notifications or creating an administrator account for coffee shop owners.

Future Features

  1. Account specific application
  2. Solely based on data provided by google maps API for the MVP
  3. Allow user to control distance/ radius of the search
  4. Allow user to see list of locations within the search radius
  5. Allow user to search for a specific coffee shop location
  6. Allow the user to collect shop reward
  7. up-voting
  8. image share
  9. plan your trip

Download Case Study