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
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.
Design Process
Discovery
Research
Ideate
Design
Test
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.
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.