The School of Design and Engineering offers a unique environment that encourages students to push the creative boundaries of design and engineering. SDE offers 16 Design programs to shape a student’s future. However, they are struggling to show their own identity and digital presence. The program pages provide information on the courses available, but really less information on the projects, faculty, students and upcoming workshops as well as events.
Goal
The goal is to design a ‘publication’ that would showcase some of the best student portfolios created at SDE, current happenings and also the community of students/faculty/alumni at SDE.The goal of our research was to get a deeper understanding on the problems faced by our target audience and to be aware of what could be added to make a successful portfolio publication.
My Role
As a part of my Fall project my team and I were responsible for building the publication site for the School of Design and Engineering, in which I my role was:
Heuristic evaluation of the current site
Conducting interviews of the faculties and the students
Keyword search
Site analysis of the current 16 programs
Data seeking behaviors of users
Building the Information Architecture
Wire framing
Research Phase
Based on what we were informed at our stakeholder Prof Todd Kramer’s interview , our target audience consists of Past, Present and Upcoming students and Faculty .We conducted 15 interviews with undergraduate and graduate students and interviewed 5 faculty members who spearhead the Textile Design, Graphic Design, Industrial Design, Fashion Design and UX Design programs respectively at The School of Design.The main questions that we asked were based on:
First impression of the website
Current experience on the SDE program pages
Things that are missing on the current program pages
Biggest frustration on the current SDE website
An important takeaway that every user should have -from the website
New Ideas
Key Insights
Students
75% of the existing students found issues. only 25% could navigate through the website.
Main components of the website are nested.
Portfolio work cannot be found
Students an faculty bios are missing
There is no information about events
Faculty
100% of the faculty found issues.
Too much text on the program pages leading to information anxiety
The websites are not regularly updated
Fails to showcase student and faculty work
Confusing navigation
The important informations are nested.
Persona
Journey Maps
Painpoints of Emily
Finding the right information on the website
Looking for student portfolios
Contacting current students at the university
Looking for classroom experience or a design school tour
Finding design scholarships and current events happening at the SDE.
Painpoints of Richard
Finding updated information of the programs.
Showcasing student works as an example for the potential applicants.
Not being able to promote the upcoming or at-least the regular big events of the university.
People being unaware of the entity of SDE.
Website being overloaded with information.
Ideation Phase
1st Iteration
We started the information architecture by thinking of introducing the users to ‘who we are’ - the idea was to make the users feel that School of design is not only a great school to be in for education but also a very comfortable community where people help one another and treat each other equally, like a family.
Instead of using the usual names such as ‘about us’, ‘Projects’ and so on, we decided to use words like:
Who we are (About us)
What do we offer (Program information)
What do we do (Portfolios and events)
What defines you ( Help new students discover their field of interest)
Our community (Students and faculty bios/contact information)
Join us (A page that would link people back to the main TJU website)
Information Architecture
WireFrame Phase 1:
Recommendations Phase 1
After a thorough conversation with our stakeholders, we were informed that our current IA design is trying to:
Promote SDE than create an awareness
Focus is being shifted from creating a digital presence and showcasing our best work to making people apply to the university, which contradicts our brief
Redundancy of information
Important information is still being nested.
2nd Iteration
Information Architecture
Users took about a minute and a half to complete 3 simple tasks in our previous user testing
However, on the current IA it was only an average of 53 seconds that users needed to complete 3 tasks. This was due to reduced nesting and easier navigation.
Only 20% of the participants completed the tasks in IA Phase 1, where as we progressed in the IA phase 2 with 52% of the participants successfully completing the tasks.
The direct success ratio increased from 67% to an 83%.
50% of the people failed the tasks in IA phase 1, whereas only 15% struggled with it in IA phase 2.
IA was too simple, information was not clearly conveyed
Lacked filters
Focus is to create an editorial and not to make people sign up for the courses.
Due to the narrow approach, an identity for SDE was still not being created.
Wireframe Phase 2
3rd Iteration
Card Sorting
In our card sorting exercise we did a massive brain storming of the types of filters we thought should be available to the users and also the keywords that would boost the user search behaviors after auditing and dissecting the current website contents.
Information Architecture
WireFrame Phase 3
After conducting a moderated testing with a few students on campus we understood that our wireframe needs:
Clear and crisp design
A more cleaner filter system
Showing lesser information and more graphics to reduce cognitive load
Making navigation a bit more concise and easy to understand
Since we would be building this editorial on Wordpress, the right way to go was to pick a Wordpress theme matching our concept and start building wireframes taking inspirations from the theme.
WireFrame Phase 4
Style Guide
Visual Design
We built a mockup with the style guide to provide a better understanding of how the website would work and look to our stakeholders.
