As a member of Scout Studio, Northeastern's on-campus design studio, I worked with two other designers on a team to redesign and revamp IDEA's marketing website.IDEA is Northeastern's student-led venture accelerator. Their current site was clunky, unintuitive, text-heavy, and outdated. We worked directly with their marketing team to research and develop their brand. From research to sitemapping to wireframing and finally executing, this was my first big project in UI/UX that incited a new passion for me.
For phase one, our team worked with IDEA to determine the branding direction they wanted to go in. From branding exercises to moodboards to researching competitor sites and writing user stories, we spent a lot of time focusing on who they are now, and who they want to be.
To the left are two mood boards I created for this activity. One was sort of cartoony, zany, and creative, which the IDEA team liked but felt didn't fit with their brand at all. Another was clean, professional and minimalist, which the team liked and chose as a direction to move forward with.
We also did some branding activities to understand where their brand was currently and the direction they wanted to go. We decided with their team that the brand was friendly but smart, professional but approachable. Maintaining that balance became one of our main challenges.
Our research & discovery involved evaluating the existing IDEA site. We conducted user experience interviews and determined that, in addition to being text heavy and overwhelming, the navigation was confusing. A lot of important infomation was hidden in the depths of the website. Lots of things, like clickable links or forms, were not differentiated with design, so it was easy to miss important links or understand what the call-to-action was. The headers had an awkward filter over them that made them seem a bit off, and the header text was off center and disorienting. In addition to making some big cuts and decisions on how to organize content, we also would need to establish a more purposeful design system.
For our sitemap, we did cardsorting activities with sticky notes to determine the best flow of information. We also conducted User Experience interviews to identify existing pain points on their website, and then used that research to make the experience more intuitive.
After that, we began the process of wireframing, or low-fidelity prototypes, to illustrate the order of information on each page. We had to make decisions about things like whether to have text appear on hover, or to use image carousels -- we decided against both of these for the sake of not having any hidden information.
We worked in Adobe XD and Invision to create responsive wireframes that function across mobile, tablet, and desktop platforms.
With wireframes outlining the site's content, our next step was to actually start to stylize the site. We began by making "style tiles," or small snapshots of a potential site's design to give the IDEA team a visual idea of what the site could actually look like.
While we knew their general brand direction, there were many design elements we could utilize to get that across.
We decided on the fonts Lora and Cera, because we felt they were both professional yet friendly, which was perfect for a professional brand run by students.
After testing a few design elements in full, high-fidelity mockups, we solidified our design elements and began making the site consistent across all pages in terms of design elements, type, and spacing with a detailed design system.
We decided on a dark blue slant across header images for added accessibility while adding a sleek but quirky aesthetic. We used orange accents in our illustration to utilize their orange brand color without being abrasive or overwhelming. We also added a soft grey plus pattern to promote positivity while adding a fun, approachable layer that still felt strong and authoritative.
This was time to sweat the details--every object had to be placed perfectly from pixel to pixel so everything would be consistent for the developer handoff.
Our final steps were to compile all of our design materials into a component guide so that future designers making edits and updates can understand the design system we used to make our beautiful website. From hex codes and color usage to patterns, photos, spacing, hover states, and typography, every nitty-gritty detail is laid out perfectly in a book for future reference.
The site will be live in early 2019! Stay tuned!