Yale School Of Art
Project Type: Information Architecture
Project Details:
Client: Yale School of Art
My Role: UX/UI Designer (Team of two)
Platform: Website/Desktop
Sector: Private (U.S.A University)
Methodologies: 3 Steps: Research-> Initial Designs-> Figma.
Tools Used: Pencil & Paper. Figma. Google Docs.
Skills Developed: Figma. Hand sketching. Wire-framing. Teamwork. Problem-Solving.
Pre-Project Notes:
Upon first glance of the website, not kidding- I got a major headache!
Immediately I started mentally imagining a list of problems that needed to change. to name a few: the distracting looped video graphics on each page, the lack of readability, and the disorganization of the content spread out in 18 tab options within the navigation bar. These were all obvious changes to anyone who had a pair of eyes- BUT our research proved these assumptions as this is the protocol that effective designers must follow. FACTS.
Step 1: Research
The three tasks we chose to tackle for this project were: locating program information for students, locating networking and events for alumni, and locating grade books for faculty. We also chose three groups of people to base our project research off of was since this is an educational site. They were: students, alumni & faculty. We conducted primary research through one-on-one interviews to learn what our audiences did not like about the site. We also held a card sort to see how they would like to see the site better organized.
Research Findings/Problems Found:
The main issues were: difficulty finding wanted information, the distracting dancing gifs, and its disorganization with content in tabs where it did not belong.
Step 2: Design
For the second part of the process, we started developing potential personas. During this part, we really got a sense of who our users were, as we based them upon students, alumni, and faculty. Their biggest need was: quick retrieval of information, so in this step we created our initial design layout and preliminary sketches. I took the lead on the personas and initial hand-drawings, while Peter designed our sitemap. Below is a slideshow of our personas, sitemap, and initial sketches for "locating program information:"
Step 3: Testing & Final Design
Upon completing the necessary research and our initial designs, we were able to take all of the feedback we had received from our professor and interviewees, and finalize our website’s design. From here we were able to create our functioning prototype. Peter completed most of this aspect in Figma, while I offered feedback and changes to make. Below you can view the flow of "locating program information" from our prototype, or visit the link to experience the newly redesign Yale School of Art’s website yourself!
https://www.figma.com/file/WUlKrIsPQnnbNgtJBrsL2zQZ/Website?node-id=0%3A1
Project Self-Reflection
As the first website/desktop development project I have ever completed as a UXD student at the iSchool, this will definitely be a memorable one. This project was challenging as I worked as a pair with one other student. I feel if this group was larger, it would have had more perspectives and minds to bounce different stylistic ideas off of. I am happy however with what was done in 10 weeks by myself and Peter. Not bad for a first website design!
Additional Project Components: