top of page
Institute

Yale School of Arts

Project Overview

Yale school of arts is a website aimed at prospective, current and alumni students as well as caters to faculty. It showcases their courses, student work, alumni events, news happening on campus and various admission processes and details.

My Contribution

UX Research, UX Design, Information Architecture, UI Design

 

 

Note to add: I did independently work on this after the semester to enhance some features, deliverables and add more design elements to the project.

Team Members

Individual Project - Pooja Gurudatt

Timeline

3 months 

smartmockups_lnbw44od.jpg

The Problem Statement

Yale School of Arts seeks to enhance its website to facilitate users in efficiently accessing information, navigating web pages, evaluating available courses, and enrolling in their diverse range of arts programs. The website exhibits poor usability with a confusing navigation structure, disorganized information that is not readily accessible, numerous dead-end links, an outdated design, and a lack of both search and navigation systems. User-friendliness is rated at zero

Antique website

Lack of information

Not user centric

Dead links and data

The Objective

To revamp the Yale School of Arts website through an in-depth exploration of its framework, comprehensive research about the university, usability analysis, and information architecture enhancements, resulting in a redesigned layout and navigation system. This project aims to provide the website with a refreshed and modern interface, ultimately increasing web traffic and enrollment to college programs. Our goal is to prioritize user-centric designs, ensuring that the website becomes highly user-friendly and responsive to the needs of its visitors.

smartmockups_lnbw7u4m.jpg

Design Process

Discovery

Research

Ideate

Design

Test

Parasailing

1. Discovery - Desk Research

  • I scoured through  multiple college website 

Revamp website

Mobile UX

Collect Data

Retain Users

2. Research

  • Did face to face interviews with peers who also lived in NJ (other classmates)

  • Scoured online forums like Reddit, Facebook, Instagram to gather more voices for users.

  • Searched for local business voices and their thoughts about tourists and revenue.

User Interview

Internet Research

Mobile UX

1. Research - User Interviews

  • NJ locals hate paying for entry to their local beaches. And paying cash on top of that was a huge friction point.

  • Great need to move transactions online for the younger crowd.

  • There is a lack of concise information about various facilities, amenities, food options available, permissions for each beach etc.

Persona.png

2. Research - Internet Research Insights

  • Some  beaches don't allow pets, alcohol, food etc. Difficult to know what rules apply where.

  • The concept of season passes are not known to all travelers or visitors.

  • Staying up to date with local business deals, summer events, winter markets and other happenings on the shore are rather unknown to NJ beach-goers. This leads to less visitors and reduced revenue for organizers too. 

  • Visitors are often caught off guard by beach closures due to weather and other events.

3. Ideate

Lots of data, research points and information gathering was done to go to Ideation stage of the journey.  On a tight schedule of 3 months and zero spend budget, we had to think of how to ideate and execute this project successfully.

  • Conducted brainstorming session with team

  • Defined design ideas and categorized them on priority

  • Ideated user flow from the above data points, research and inputs. 

Brainstorming

Priority Map

User flow

3. Ideate - Brainstorming

I did the whiteboard design challenge method to generate as many design ideas as possible. I came up with quite a few ideas that were implemented as well. We will see more on that as we explore.

3. Ideate - Priority Mapping

Taking into consideration the time restraints, resources restraint and business needs and user priorities, I mapped out the design ideas into what we can and cant do. I used the priority map to help focus on what is the need of the hour.

Top takeaways from this exercise

  • Prioritizing most important deliverable for MVP

  • Include direct access to search skipping login/signup and allow to do that later too. 

  • Advanced search with filters, sort. 

  • QR code for one touch access.

3. Ideate - User Flow

The user flow was defined based on user journey and based on research and data collected previously. Since this was a complete mobile only app, I made sure to have all items visible to users and make a menu easily accessible.

4. Design

My favorite part of the journey has to be the design phase. We were on a tight schedule of 3 months to present our design ideas and I thought having a prototype will be best to communicate these features to stakeholders. 

I gave more importance to quick signups, onboarding, direct search on homepage, quick links for faster results and the ability to sort and filter beaches efficiently.

1. I started with an 8 box sketch - first box to show starting scenario for user and last box to show the desired outcome. 

2. I then did sketch low-fi wireframes on paper to better communicate my designs to team members. I did lots of changes and variations before creating prototype.

3. Lastly, I prototyped using Marvel apps initially. When I got the time to refine my designs after the course, I prototyped using my favorite app - Figma. 

Sketching

Wireframing

Prototyping

4. Design - Sketches

I quickly dove right into sketching to put my thoughts onto paper. I considered the 8 grid box method to sketch out my designs.

 

Box1 : Starting situation.

Box 8: Ending results.

I then filled in the rest of the boxes with different actions for different stages of user journey.

4. Design - Wireframes

I initially used marvel app online to wireframe but decided to use miro and figma later on to create more cohesive and quicker wireframes. 

4. Design - Prototype

I decided to use iOS design system as it was easily available at that time for free and chose a beach themed color scheme to better communicate how these designs will benefit not only users but also the business eventually. 

Initially used marvel apps to design but later switched to Figma as it was quicker and easier. Figma had more features and made prototyping a breeze (not an ad :) )

5.Testing

Once the wireframes were produced and we could make it into a clickable prototype, usability testing was done to get real time feedback and observe how users interact with the system.

10 users - 16-18 years old

face to face moderated testing method

medium used - iPad

Time per participant - 20 minutes

 

Moderated 

iPad

5.Testing - Takeaways

  • Users wanted no onboarding and to directly search - I implemented a skip onboarding button after this. 

  • Included a social media login as per user requests.

  • 100% users loved QR code idea and want this app to happen so they can use it. 

  • It's exciting to see business discounts and offers they can use.

  • Users would also like to see an options for searching beaches that are accessible to wheelchairs and other disabilities easily.

Outcomes

Successfully translated our designs into a working prototype and handed off to the developers. Here is what happened next!

  • We were encouraged to pitch this idea to venture capitalists in NYC. I would love to see this come to fruition.

  • Mobile app is being built by developers.

bottom of page