top of page

Designing  Information Architecture
(for a Student Social Hub)

The aim of this project was to develop a detailed Information architecture for a new idea: a social hub for the students of School of Design at RVU(run by students). We tried to keep in mind to design such  that the model could be scaled and replicated for other schools as well.

This project was conducted under the guidance of Rajavel Manoharan (Associate Dean, School of Design and Innovation, RVU)

 

Goal 1:  Arrive at an organization model

Goal 2:  Arrive at a navigation model

Content inventory | Card sorting | Sitemaps

Project : Academic

Role : Student at RVU M.Des Program

Skills : Research,Prototyping, Content curation and presentation design

Duration : 3 weeks

Creating the first draft of the content inventory

Me and my teammate, quickly conceptualized what kind of content we needed for the website with a quick brainstorming session 

image.png
image.png

We now used this content, to create cards to conduct card sorting

loader,gif
We created around 60 cards

In our first round, we conducted card sorting with 6 target users

image.png
We realized the cards were confusing the users...
cards 2.png
So, we re-wrote our cards, we made them simple to understand
cards 3.png
We now had around 43 cards

In the next round, we conducted card sorting with 8 target users.

image.png
We added a few new cards, and discarded a few, based on user inputs.

We started noticing patterns...
To get a better understanding we created Venn diagrams for each user:

image.png
  • Most users had Alumni as one section

  • Almost everyone had an “events” section

  • Most users grouped student work together

Based on the card sorting, we created organizational models :

Organization Model 1:
Mind map.png
Organization Model 2 :
shar.png
Organization Model 3 :
12.png
After creating the organization model...

We started brainstorming on how users would find the organized information. We wanted to bring in some “delight” for the users.

Our initial ideas:
Frame 254.png
We picked relevant ideas that felt natural to the content and tried to figure out how they would work:
Frame 255.png

We created low fidelity wireframes of key screens to represent the navigation model

image.png
Results
Here are the key wireframes showing how the user will navigate from one part of the app to the other.
Frame 256.png

We created a sitemap :

Under construction:

  • The ​next phase involves user testing to gain insights regarding the userflow to perform specific tasks

  • Design iterations based on the insights gained and creating design systems to develop final screens.

bottom of page