City Lights On The Go Mobile App

Bringing the Best of a Beloved Bookstore to Your Pocket

Project Overview

City Lights On The Go is a mobile app that provides customers easy access to their community bookstore.

Project Details

  • 2 week duration
  • My Role: UX Designer / Researcher
  • Solo project

My Tools & Methods

  • Competitive & Comparative Analysis
  • Card sorting
  • Information Architecture
  • Sketching and paper prototyping
  • Digital wireframes using Figma
  • Digital prototyping
  • Usability testing

What’s the Challenge?

The current City Lights website is not conducive to a satisfactory online shopping experience. 

What’s the Solution?

In order to create a more engaging online experience the current website needed to be consolidated and brought up to date. The challenge was to bring together the main site, the blog and the podcast; currently all separate, under one roof and present it in an easily navigable and friendly way. 

How can we help?

I designed a mobile app so that users can:

  • Find books and events of interest
  • Save items to buy later
  • Bookmark events
  • Share items and events to their social community
  • Have targeted recommendations

Rethink. Redefine. Research.

Currently the main website, the podcast site and the blog exist as three separate entities.
By bringing them all together in one app, our target user has access to the full range of City Lights’ content without having to jump around to multiple websites that aren’t designed for mobile.

Consolidate three websites into one mobile app

Understanding User Needs

In order to gain an understanding of what a mobile app for City Lights would begin to look like, I took a look at the common overlap between the business needs of City Lights and the needs of their target users.

Goals / Needs:

  • Easy access to range of options
  • What’s new
  • Tailored Content
  • Ability to save & share books & events
Pain Points:

  • Difficult navigation
  • Lack of sufficient book descriptions
  • Not mobile friendly

User Insights

Research showed that our On the Go user cares about quick and easy access to what’s new at City Lights, the ability to customize content and share events as well as add books to their wishlist.

Heuristic Analysis

I started with a heuristic analysis of City Lights’ current website. It was clear that there were many common goals a redesign would achieve that would not only help the target users but benefit the business as well.

My analysis showed me that there were three areas we could focus on from a heuristic stand point: consistency, visual clarity and user freedom.

Current Homepage

Detail Page

Competitive / Comparative Data

MVP Focus For City Lights On The Go App

The MVP focus for the City Lights on the Go app lies in providing a straightforward process for:

  • Searching for books through the online bookstore 
  • The ability to bookmark events and save books 
  • Easily accessing the podcast and blog

Site Map / Information Architecture

In order to start laying out the structure of the app, I began to draw out a sitemap. My initial card sorting findings helped define the categories for a redesigned nav. I wanted to stripdown some of the content from the current website in order to create a clearer layout.

I also wanted to create a more straightforward process for a user to view, save and purchase books, as well as bookmark and share events, as the On the Go user has a specific interest keeping up to date with City Lights offerings.

Current Site Map

Current site map for City Lights Website has a lot of information that confuses the online shopper: 

Proposed Site Map

Stripped down site map for City Lights on the Go app maintains core expected features, a simplified navigation schema, and the inclusion of the blog and podcast in the app, not on separate sites or offerings:

Ideate and Iterate.

Initial Wireframes

Low fidelity wireframes helped me organize the flow of how a user would navigate through the app.

Selecting a Book

The Design Solution

How Does it All Look?

The insights gleaned from research on City Lights, competitive/comparative analysis and MVP focus where applied to create a design solution that would encourage and excite our target users to engage with a mobile app. 

FInd a Book

The user is able to peruse City Lights large collection of books without feeling overwhelmed. This is accomplished by an intuitive design that divides the online catalog in an easily digestible manner.

Bookmark an Event

The bookmark feature is a simple and straightforward way for our target user to quickly 
find an event from the main page, save it and then view their saved events.

Setting Book Preferences

The City Lights On The Go app allows for personalization through the ability to set your book preferences.

Results and Reflections

Next Steps...

The initial City Lights On the Go app was designed with iOS in mind. A future iteration would apply the lessons learned for an Android version. 

What I learned

I learned that there is a fine balance between providing necessary features and overwhelming the app user with too many options. Conducting usability testing was a very important reminder that a simple and easy to navigate app will always win the day over adding too many ‘bells and whistles’. 

About Me     Contact      Resume