Works

Portfolio

IDEA Website Redesign

Portfolio

Role: Project Lead, Scout Studio

Dates: Sept - Dec 2018

Tools: InDesign, Adobe XD, Zeplin, InVision


The Project

During the Fall of 2018, I worked on a team with two other Scout designers and one external developer, to completely rebrand and redesign the marketing site for IDEA, Northeastern University’s student-led venture accelerator. By working within an agile framework we were able to design + develop in weekly sprints, using Trello as a project management application to monitor and track our progress.


Research + Discovery

The first step in the website redesign process consisted of an extensive period of research and discovery. We began this process by auditing the current site, where we outlined content painpoints, design painpoints, things we wanted to keep, things we wanted to get rid of, and things we wanted to add. We also created a competitor analysis document to not only gain inspiration from similar organizations, but also to make sure our direction deviated from standard designs and instead, created a new and fresh perspective.

In addition to the site audit and competitor research, we created moodboards and user stories to present to the client. The moodboards were a way to determine the visual direction of the website and the user stories reminded us of user goals, so that we could prioritize the organization and user flow of each page.

moodboards example

We also wanted to get a better sense of the IDEA brand + mission during this stage in the process, so we conducted branding exercises with the client. One of the branding exercises included Personality Levers, the goal of which was to determine what the organization is versus what it is not. The exercise was done individually by each member of the design team and client team. I then compiled everyone's answers and created a data visualization to gain better insight.

personality levers

After this part of the process was completed, I compiled all of the information gained about IDEA’s mission, primary + secondary audiences, goals, key questions, and user stories into a detailed creative brief. You can view the entire PDF version of the creative brief here.



UX Design

After the research + discovery page, we transitioned into UX design. I was tasked with creating scripts in order to interview current users of the IDEA marketing site, including but not limited to, Northeastern student ventures, Northeastern alumni ventures, IDEA management team members, and venture coaches. Based on these user interviews and the insights gathered from the initial sprints, our team was able to develop the information architecture and site map of the new marketing website. This helped us determine the hierarchy and flow of information as we began designing pages.

Using the site map to guide us, we created multiple iterations of wireframes in desktop, tablet, and mobile for each page of the site. These started off as paper sketches and were later digitized using Adobe XD.



personality levers personality levers personality levers

UI Design

While keeping accessibility requirements and human-centered design at the core of our process, we transitioned into the first rounds of high-fidelity prototypes. After researching and experimenting with different typefaces, color palettes, patterns, and styles, we were able to create cohesive design elements that fit the brand personality. All of the final design elements and interaction styles were compiled into a Component Guidelines booklet for any future changes made to the site.

The new marketing site remains clean, professional and straightforward, while still maintaining the approachable and friendly qualities of the organization through fun patterns and microinteractions.

personality levers personality levers personality levers

© Copyright © All rights reserved | Made with by Colorlib
Customizations by Cam McKenzie