IDEA

UX/UI design.

idea_firstimage_1280x650

The Project

BACKGROUND

As a designer for Scout, Northeastern's student-led design studio, I worked to redesign IDEA's marketing website with two other team members. IDEA is Northeastern's venture accelerator, and its aim is to provide entrepreneurial development and help ventures succeed in launching their businesses. Our team completed tasks in weekly sprints and met with members from IDEA's management team each week to discuss progress and receive feedback.

SETTING

Scout, Northeastern's student-led design studio. Sept 2018 - Dec 2018.

MY ROLE + TEAM

UX/UI designer. Worked with a team consisting of a project lead and one other designer.

Deliverables

WEBSITE REDESIGN

Our primary aim for this project was to rebrand and reorganize IDEA's website. We focused on reflecting the visual identity of the organization onto the site as well as simplifying the user flow of the website.

Research + Discovery

MOODBOARDS

In the first phase, research and discovery, we looked at IDEA's previous website to see what could be improved. The website was unintuitive in its organization and lacked overall visual appeal. To begin brainstorming the new visual design for the website, we created moodboards. IDEA management team members were able to explain what they liked and disliked about each moodboard so that our team had a sense of direction to go in for the design.

idea_moodboards_v4_Page_1
idea_moodboards_v4_Page_4

Wireframes

A major task for the website redesign was to arrange the content in a more efficient and user-friendly manner. Our team used site mapping to plan out different possibilities for web pages before selecting the best options. We then created wireframes that displayed the general layout of content on each page. Wireframes were designed for desktop, tablet, and mobile to ensure that the website was responsive between devices.

Home-Desktop
Get-Involved-Desktop
FAQ-Desktop

Interface Design

Once the wireframes were set, we designed the new user interface for IDEA's website. We began by making style tiles, small samples of interface design, to gather elements and ideas. We then created the user interface for each web page, as well as for desktop, tablet, and mobile. We utilized IDEA's main colors, blue and orange, for the design. Brighter orange hues were used to make icons stand out, and navy headers and type were chosen to keep the website looking professional. For the typefaces, we selected Cera and Lora, which provided a contrast of sans-serif and serif fonts and allowed a blend of welcoming and business-oriented tones.

iMac_idea_01
iMac_idea_02
iMac_idea_03

Brand Book

Our team created a component guide containing the website's design system for the use of future designers and IDEA members. It discusses fonts, colors, and design elements used on the new IDEA website.

IDEA_Component-Guide-2018_Page_04
IDEA_Component-Guide-2018_Page_06
IDEA_Component-Guide-2018_Page_10