Patrick Brennan's User Experience

Reading Challenge Module

Baker & Taylors manager asked me to come up with ideas for a new module he would like to add to their app called the Reading Challenge.

• Add a new module so parents can register their children to reading programs.
• Allow parents the ability to set challenges and goals of their readers.
• Allow parents the ability to monitor the progress of the challenges/goals of their readers.

• Axis 360 - Reading Challenge
  Run Demo

  Use Cases:

  • User can place a hold on a book.
  • User can checkout a book and read it.
  • Allow users to challenge other users in their library to read any book.
  • Allow users to set goals when challenging another user to read a book.
  • Have a section in the app to show my challenges and the users I challenged.
  • Enhance the experience to browse the library and show me the amount of each category available in the library.
  • Rework the searching flow to be more user friendly.

• Story: Splash and Homepage Menu Workflows
  View Diagram

  Use Cases:

  • User opens the app and the Splash screen appears.
  • If user previously logged out, they will need to log back into the app.
  • After logging in, the user goes to the homepage of the app.
  • User views the categories their library provides.
  • Show "Book of the Month" on the homepage.
  • User can also see a site map of the app by clicking the menu icon in the footer.
  • User can either click on a book jacket to view the details or click the "View All" of each category to view all the books.
• Story: Book Details
  View Diagram

  Use Cases:

  • User clicks on a book jacket to go to the details page.
  • User has the option to checkout the book, place it on hold, challenge another user or download it.
  • Once the a book is checked out, the user can start reading the book.
• Story: Browse By
  View Diagram

  Use Cases:

  • The user should be able to browse their library by book type, category or by audience.
  • The book type will show the number of books for each type.
  • Once the user selects what they want to view, the next page will have the ability to filter through the books.
• Story: Set Challenges and Goals
  View Diagram

  Use Cases:

  • On the Challenges page, user can view the progress of their own challenges or the readers they challenged.
  • For the users challenges, they will show the book jacket, who challenged them, when the user accepted the challenge and how much of the book has been read.
  • User can also view their challenges to other readers. Each challenge will show the same information as the users challenges.
  • When user clicks the 3 dots, a dropdown will show with options to read the book, remove their challenged books, cancel any of their challenges to other readers, user can also review each of the challenges and update them.
• Story: My Stuff
  View Diagram

  Use Cases:

  • User should be able to see their personal information and edit it.
  • The page will also show their checked out books, books on hold and notifications.
  • Dropdowns should allow the user to return books, remove holds and read books.
• Story: Add Searching
  View Diagram

  Use Cases:

  • User should be able to search the entire library.
  • The results page should show the books and how many the library has.
  • User should be able to filter through the results to refine search.

Collections

Follett had me work with them to come up with this teaching aid app. The purpose of the app was to help students learn from the different resources puts together by the teacher and the students as well.

• Collections App
  Run Demo

  Use Cases:

  • Create an app to hold resources.
  • There will be three views. A Featured view, Public view and a Private view.
  • Allow users to add/edit and delete resources.
  • Users can view the details in a Grid, List or Swaggered view.

Figma Prototype Examples

I created these examples to show the high level of skills I have using Figma.

• Hiding Columns in Tables
  Run Demo

  Use Cases:

  • Allow users to hide/show columns.
  • Design the table to auto adjust when hiding a column using Auto-Layout.
  • Allow the user to drag the table horizontally when the content goes beyond the page.
• Animated Splash Screen
  Run Demo

  This is an animated splash screen using various techniques.

• Working with Variables
  Run Demo

  Use Cases:

  • Use variables to show an item counter.
  • Use variables to show how many items.
  • Use variables to the show the amount of counted items.
• Mini Shopping Cart
  Run Demo

  This is a very small shopping cart example showing many ways I'm using variables.

• Parrallax Carousel
  Run Demo

  This example showcases a drag carousel with a cool bouncy animation effect.

• Swipe Banners
  Run Demo

  Another example showcasing a drag carousel with a cool bouncy animation effect.

• Enlarge Images
  Run Demo

  This example shows simple click to enlarge an image.

• Interactive Expansion Panel
  Run Demo

  Here is an example showing an interactive expansion panel.

• Simple Splash Screen
  Run Demo

  This example shows a simple splash screen for phones.

• Splash Screen
  Run Demo

  This example shows a simple splash screen for phones.

• Responsive Tables
  Run Demo

  Here is an example of a responsive table with different views.

• Card Carousel
  Run Demo

  Here is an example of a drag a card carousel.