top of page
Brand refresh and responsive web redesign

Project Length: 11 months

Tools: Figma, Zoom, Webflow

Team: 1 Visual Designer, 1 Developer, 2 Junior UX Designers

My Role: Lead CX Designer

Goals: Brand refresh after ten years. Simplify the ecosystem from five to one platforms.

CIID_Homepage-2023-03-10-14_44_03.png
ciid-dk-2024-02-12-homepage_sm_tophalf.jpeg

Before

After

Project Background

The Copenhagen Institute of Interaction Design's (CIID) website had not been updated since 2014. It was on an old version of WordPress with custom code. No one at the company knew how to manage it, so they made microsites to update information and allow for online bookings of programs.

Project Challenge

The stakeholders were very nervous about making any changes as the website had pages of content built over 14 years. It was a spidery mess with organisms floating outside of WordPress as hacks.

In the Beginning
I started out as a team of one. I thought I could work fast and get the project done in six months. Just me and the stakeholders. 

After creating a project proposal, timeline, and plan, I realized I needed some help. I brought on two junior UX Designers to help them build their skills as this project started the entire website process from scratch.

As far as a new web platform, after researching, such as interviewing the stakeholders and doing a competitive analysis of web platforms, I decided to go with Webflow. 

Challenge Two
What content needed to be kept? How had the business changed in ten years? What was the Content Strategy moving forward?

Time for a site audit. The site audit took two months, with three UX people working on it (including myself).

So Many Pages...
CIID_siteaudit_template.png
CIID_siteaudit_03-23.png
7,119 Pages

The current website was:

• not mobile responsive,

• could not do registrations,

• did not offer checkout capabilities,

• could do text updates only,

• only allowed for static pages. 

Final Page Count: 12

Webflow is a platform that allows for dynamic pages. Over 2000 of the pages were community members (alums and faculty). With dynamic pages, there was no need for static pages for each person. Everything is kept in a Webflow CMS using a page template to render a page as needed when a user visits.

CIID_community_desktop.png
CIID_community_mobile_edited.jpg
How do we define our customers?

While the navigation seems simple, there was a big discussion about using the term Business. We did a brainstorm meeting with the stakeholders and came up with a few terms.

Students

Our primary audience are students. People who sign up for either the year-long program or week-long workshops.

Faculty

Our secondary audience are the instructors who teach the courses. 

Businesses

Finally, our tierary audince are partners who offer project work to students or companies that we partner with for training or companies that we do consulting with. 

Is Business the right term? Do we split it out into multiple options such as training and partners?

I decided to do a card sort to see what the target audience thought—doing an Open Card Sort with potential students, not a single person thought of the term Business. 

When I conducted an Open Card Sort with alumni and faculty, the term most frequently used was "Company Partnerships," not " Business." I then decided to use Tree Testing to validate that term. Overall, it had a 95% success rate.

CIID_treejack_testing_company_partnerships.png

Tree Testing results for the term Company Partnerships

However, looking at the current navigation, you'll see the term Business. The Visual Designer felt the term "Company Partnerships" was too long to fit and went with the term Business instead. After speaking with the stakeholders, they couldn't make a decision so we decided to stay with Business for the time being.

We have the people, now what?

Normally, at this stage I would do task analyses and User Flows. However, after Tree testing the navigation, I felt that the flows and tasks were simple and clear enough that doing these were not necessary. Instead, we moved into wireframes.

Screens
Lessons
Learned

01) Don't try and do it all yourself.

02) Be patient.

bottom of page