Challenge 2: Wireframing

Elyse Z.
Elyse Z.
Nov 7 · 2 min read

For this challenge I chose to work with the app Luminary. Luminary is a premium podcast app that offers access to shows which don’t play elsewhere. I use this app often, especially when I’m looking for new and interesting podcasts to listen to. I chose to wireframe the following user flow which takes the user from the home page to playing the podcast of their choice through the search feature.

  1. Luminary Homepage — the screen the user sees upon opening the app
  2. Search Page — where users are taken after pressing on the search icon at the bottom of the screen
  3. Search Results — users can type in the title of the podcast they are looking for
  4. Results — results from the user search
  5. Podcast Details — information about the selected podcast
  6. Play Podcast — user has the option to play the selected episode from the previous screen
Wireframe of the user flow

The user begins on the homepage and clicks on the search icon at the bottom of the screen which then takes them to the search page. Once a title is typed in, the search results appear and the user is able to pick the podcast of choice from the results. The user is taken to the podcast information page and can select to play the episode available.

During wireframing process, I identified the following UI elements:

Input controls: text fields and buttons labeled with both icons and text

Navigational components: search fields and icons

Identifying the UI elements helped me look for consistencies in the user flow and the importance of where they are placed for a “happy path”.


Completing this challenge helped me understand the process of creating a wireframe as well as seeing the skeletal structure of other apps I use every day. I learned how to create a interactive prototype in Invision and saw the importance of a wireframe kit in the design process — it allowed me to create a wireframe much quicker! Instead of trying to perfect the wireframes, I tried to remind myself that wireframes are meant to be a simple representation of the interface. This helped speed the process along and see the skeleton of the app I was working with.

I hope to return to this project and complete the task analysis for practice.

    Elyse Z.

    Written by

    Elyse Z.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade