The School of Design and Engineering Website 

The Problem:

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:

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.

Research Goal:

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.

Based on what we were informed at our stakeholders interview, our target audience consists of:

  • Past, Present and Upcoming students

  • 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.

Interviews:

Prior to our interviews, we conducted a heuristic analysis of the 16 program pages to understand the existing problems and formulate questions accordingly.

Based on the heuristic analysis, here are some of the main questions that we asked:

  • 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

Problems on existing program page:

  • Nested information

  • Text heavy

  • Lack of information hierarchy

  • No classroom experience

  • Does not show projects or portfolios

  • Does not provide faculty and student bios

  • Less Filters

  • Poor navigation

Findings and Key Insights -  Students 

‘....SDE is going to prepare you for a career in design. The website needs to inform students about this..’

 

‘...know what’s possible with this degree. There are a lot of amazing things happening at SDE but nobody showcases it..’

 

‘... tell me how I can attend the design events. Don’t bombard me with emails, just showcase it on the website…’


‘..I would love to get in touch with students through the website before approaching the university. Why do I have to go to linkedin for this?....’

Findings and Key Insights -  Faculty 

‘....We need to create an awareness between prospective students… show them what we are and why we are good..’

 

‘...you need awareness in order for anybody to apply. Create this digital presence’

 

‘... the current website is too nested. If I have to spend more than 10 seconds on finding anything, I’m out..’

 

‘..we don’t do a good job of showcasing our student work. They’re awesome..let’s show people what we do ’

User Personas: 

Emily's Journey:

  • 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.

User persona:

Richard's journey:

  • Finding updated information of the programs.

  • Showcasing student works as an example for the potential applicants.

  • Not being able to promote the upcoming or atleast the regular big events of the university.

  • People being unaware of the entity of  SDE.

  • Website being overloaded with information.

The Solution: Card Sorting and I.A. 

Based on our interview findings, we understood that our new design would have to focus on:

  • Student and Faculty Work

  • Program information

  • Current Events

  • Student and Faculty Bios

  • Highlights and News

  • Applying to SDE

Recommendations phase 1:

 

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: Phase 1

Initial Wireframes 

To get a better understanding of what IA would look like visually, we drafted a few initial mid-fidelity wireframes. 

IA Phase 1 Testing:

2 (22%) people completed your study out of a total of 9 participants. 7 abandoned.

Your completed participants completed an average of 3 tasks.

Recommendations based on research and testing: Phase 1

Drawbacks:

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.

 

Recommendations phase 2:

 

Based on the feedback from our stakeholders, we made a revised IA that focused only on:

  • Showcasing the best of SDE portfolio work

  • Highlighting the current events and workshops happening at SDE

  • Helping students discover their interest

  • Sharing student, faculty and alumni bios and contact details

Information Architecture: Phase 2

Initial Wireframes 

Based on the new information architecture and previous testing results, we developed a second set of wireframes. 

IA Phase 1 Testing:

10 (52%) people completed your study out of a total of 19 participants. 9 abandoned.

Your completed participants completed an average of 3 tasks.

Recommendations based on testing Phase 2:

Based on the feedback from our stakeholders, we made a revised IA that focused on:

  • Showcasing only graduate student portfolios and a few featured undergrads

  • Heavy usage of filters to help users come down to the accurate information

  • Providing users with a mixture of information on the homepage thus conveying the versatility that SDE offers.

  • Providing information on events and campus life in general

  • Providing informational blogs/articles and news to keep students up to date

  • Showcasing who are faculty is and what contribution do they have in and outside SDE

Card sorting and IA Phase 3:

Based on the recommendations, we built are third phase of IA towards final design and added the following features:

Filters:

Search by: Topic, Keywords, Majors

Sort by:

Featured posts, most views, most discussed, all time, today, this month, this year

  • 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

Style tile:

We made a style tile that was a combination of Jefferson and The School of Design colors: Blue and Orange respectively. 

UI Screens:

We made two wireframes to show how they would look post UI design. Our goal is to create this website with Wordpress and to choose a theme that would match with what we were trying to design.

Next Steps:

Our future steps include:

  • Prototype and user test with the new wireframes

  • Iterate

  • Propose wordpress themes with custom UI kits

This site was designed with the
.com
website builder. Create your website today.
Start Now