Artboard Copy 4.png

YorkU Bookstore App

Mobile App, UX/UI
 

YorkU Bookstore App

A mobile app designed to create a personalized experience for students in purchasing and reselling course supplies through the York University bookstore. Currently undergoing a third ideation.

 
 
App-Mockup.jpg
 
 

ROLE

UX/UI, User Centered Research, Prototyping, Visual Design

TIMELINE

October — November 2017

 
 

TEAM

Olivia Marcello (Me), Olivia Librandi & Gurleen Hansi

TOOLS

Adobe Photoshop, Adobe Illustrator & InVision

 
 
 

Understanding the Problem

THE PROBLEM

The current York University bookstore website provides a poor user experience as the features and information are disorganized, counterintuitive, and inefficient.

The problems we experienced were:

  • Main features were hard to locate and too deep within the system
  • Does not cater to specific user needs
  • Information is presented in a long, boring, and static manner
  • Typography lacks consistency
  • Key information is not prioritized
  • Ineffective use of visual space

APPROACHING THE PROBLEM

  • Evaluated bookstore environment to devise new framework for interactive experience (AEIOU analysis)
  • Developed initial requirements for the system
  • Created use cases to demonstrate main features of system
  • Defined goals for user experience and interface

THE GOAL

We wanted to expedite the process of locating course materials by synchronizing students’ existing account information (enrolled courses & required supplies). In doing so, products relevant to individual students would be prioritized as recommendations on the home screen.

Additionally, our goal was to provide an interactive platform for students to exchange course materials and to receive peer-to-peer academic help.



Design Process

 
 

ORIGINAL DESIGNS

The original website is a complex and deep system. In several instances, books were displayed in list format which lacked hierarchy, causing the user to search inefficiently.

 
 
 

USE CASES

We focused on six scenarios that the user would encounter in the application. Through establishing these use cases, we were able to visualize how deep into the app the user needed to go to fulfill their task and the organization of information.

 
 
 
 
 

USER TESTING

  • Completed an Ethics review
  • Created consent forms for participants
  • Formed a pre-interview questionnaire
  • Wrote a script leading the user through our eight use cases
  • Coded findings using descriptive code, analytic code, and processed code.
  • Gathered coded findings to construct a final overall list of solutions

INSIGHTS & FINDINGS

Through the analysis of our user testings, we discovered several problems with our prototype design, stemming heavily around the language chosen resulting in a misleading navigation.

Textbook Exchange section
Users expected the posting for the Textbook Exchange to be under said section, however we first placed it under the Sell heading. The lack of placement of an addition button in the Textbook exchange category confused the users on how to add new books. To solve this, we gave the Textbook Exchange more hierarchy in the navigation.

Account Messages
When getting to the Account page, the system did not allow the user to click on their icon to link them to their account. This made the users scroll down farther to access the account which was unnecessary. As well, we switched the icons of purchase history (originally on the top of the page) with Messages (originally on the bottom of the page), to give the messages higher priority.

Vernacular
Most confusion that occured from our users centered around the vernacular of our navigation. For example, the Textbook exchange was previously referred to as classifieds. Students did not understand the naming convention which led to hesitation in navigating.

 
 

Final Design

ONBOARDING

The onboarding was designed to give the user a brief description of what important features are available to them.

 
 
mockup-onboarding.png
 
 

LOGIN & HOME SCREEN

By logging in, the user's courses are synchronized to their homepage. Through this personalization, it eliminates their need to search deeper into the app.

mainscreen.png
 
 
accountpage.png

ACCOUNT & MESSAGES

Unlike the current website. The app gives the students the ability to message each other when buying and selling textbooks.

 
 

BUYING MERCH

The user can easily see what styles and sizes are avaliable in store or purchase it to send to their house.

clothingmock.png
 
 

BUYBACKS

By creating a community for students to buy and sell their used books, we eliminated their desire to go elsewhere. (i.e the Facebook groups for buying and selling).

 
 

PROMOTIONAL VIDEO

 
 
 
Screen Shot 2018-02-13 at 4.56.18 PM.png