Introduction
Discovery
Ideation
Final Design

Overview

This project started off as a part of an Information Architecture class. The design process included research, content audit of the entire website, creating sitemaps and wireframes in Axure and finally working on the Visual Design following the Rivet Design System of Indiana University. I also pitched my redesign to the leadership staff of the Center.

Highlight

🎯 Pitched to the Center in their leadership staff meeting and received great feedback. The Center will be actively working towards incorporating my ideas into their website.

Duration

12 weeks
(Oct '20 - Dec '20)

Tools

Figma
Miro
Procreate

My role

User Research
Brand identity
Visual Design
Interaction Design
Prototyping

Team

Parumita Sachdeva
Fatima Rafiqui

PROBLEM

How might we improve the information architecture of the website to improve findability, discoverability, and navigation?

DESIGN PROCESS & DELIVERABLES

Focusing on the Information Architecture & Interface Design

A major chunk of the time was allotted towards auditing the website content and redesigning the architecture from the ground up.

User & Business Needs

Understanding the needs and goals of primary users and the business

Content Audit & Evaluation

Highlighting pain points and how they can be addressed

Sitemap & Wireframes

Going through several iterations of sitemaps and wireframes

Interface & Visual Design

Following the rivet design system to revamp the visual style of the website

Introduction
Discovery
Ideation
Final Design
RESEARCH & DISCOVERY

Identifying the primary and secondary users

Understanding the business needs & goals

01.

Empower & Educate

Help IU women leverage technology to attain academic & professional excellence.

02.

Outreach & Awareness

Making more people aware about our mission & vision. Improving attendance of events and initiatives offered.

03.

User & Business Needs

Get support through corporate sponsorships, donations, gifts and collaborations.

PAIN POINTS

Repetitive and verbose content

Auditing the website showed some prominent issues

Lack of Focus

There's a lot of diverse information without clear distinctions. There is a lack of visual hierarchy and focus.

Confusing Labels &  Jargons

Main navigation categories like get involved, programs and events seem similar and cannot anticipate what we’ll find in those pages.

Navigation

A lot of audience based navigation confused the users.

Introduction
Discovery
Ideation
Final Design
REQUIREMENTS

What needed focus?

Based on all the research and analysis, there were four main things that needed focus for this redesign.

Mission & Vision

To help with outreach & awareness

Events & Programs

For students, faculty & staff to learn new skills

Highlighting relevant information that sponsors may need

Getting Involved

Providing clear information about signing up, working at the center

SITEMAP ITERATION 1

Creating a sitemap to brainstorm the basic skeleton

BUT the feedback revealed some issues

“Make sure you're really thinking about the audience-based navigation and whether it's the right approach.” - UX Architect, IU Studios

Going back to the research & looking up some exemplars

EXEMPLAR COLLECTION

Exemplars helped discover common patterns

Introduction
Discovery
Ideation
Final Design
SITEMAP ITERATION 2

Incorporating more task based navigation

IA Decisions

Introduction
Discovery
Ideation
Final Design

Then we conducted primary research

1 classroom observation

We observed a virtual classroom session via Zoom video conferencing.

5 interviews

We talked to 5 middle school children who were doing remote school through tools like Zoom, Microsoft Teams & Canvas.

Introduction
Discovery
Ideation
Final Design
WIREFRAMING

Initial wireframes to flesh out the structure

Initial rounds of feedback revealed that there was a need to cross link crucial information like sponsors, mailing lists, programs & events.

Axure Prototype
VISUAL DESIGN

Working with a design system

I decided to follow the newest version of the Rivet Design system to give the website a much needed fresh and modern feel.

Final Redesign

Full Prototype
REVISITING

How might we cultivate engagement among middle schoolers to facilitate a better learning experience?

REVISITING

How might we encourage self-expression to provide a more personalized learning environment?

USER TESTING II

Measuring Success

24 %

"I like how simple and easy the onboarding is!” - senior

“Having both online discussions and getting event information is a great idea” - freshman

“I may not be able to think about more interests without the tags"- Sophomore

Introduction
Discovery
Ideation
Final Design
REFLECTIONS

Reflecting back

Getting Feedback at every stage

Since I was working on this website for so long, I almost stopped seeing problems with it. My initial ideas resembled the original sitemap. Getting feedback helped me break away from circling and improve the information architecture.

Spending time on sitemap and wireframing

Spending time on the structure and navigation of the website is most crucial to ensure good usability. It's also more convenient to revise sitemaps and wireframes rather than the final design iterations.

Working within a design system

Working within a design system meant that I had to make use of the current brand guidelines, layout, and components to make sure the website is consistent with the University's brand. I enjoyed working with the design system as it helped me bring more consistency to the design.

Check out more projects

ViLearn project card & link
Juniper Networks project card & link
MrGroc project card & Link

Want to say hi?

Shoot me an email at sparumita@gmail.com
LinkedIn URL
Dribbble URL