let's talk.
Get in touch with me
connect.
Find me on LinkedIn
SCRC is the parent company behind Dedoose, a web-based application created by researchers for researchers. From Educators, Medical Professionals, UX Researchers and Government Officials, the application enables users to evaluate and optimize both qualitative and mixed methods data for greater insights.
The focus of my engagement was on brand enhancement. Partnering with the Business Development and Digital Communications teams, I was commissioned to provide the following deliverables, that would evolve and elevate the presentation of the brand across all communications channels.
Refining the guidelines was the first step I took to reshaping the brand identity. In addition to redesigning the document itself, I also reassessed and revamped the brand colors to create a more harmonious and accessible palette; authored written expressions of how the brand name should appear in written form; established co-brand guidelines; defined the photography style; and established specifications for branded graphics to make the document more comprehensive.
With the brand guidelines complete, my biggest undertaking was to redesign Dedoose.com, the marketing website that promotes the application. This multi step project was more than just modernizing the visual design, I wanted to overhaul the entire user experience with a targeted focus on customer acquisition and improving brand perception.
The end result was a bright and modern website that provides a first class user experience at parity with leading competitors, while enabling the team to collect more quantifiable measures of site performance.
As of November 25, the new site is currently in staging and has not yet been launched.
With the brand guidelines complete, my biggest undertaking was to redesign Dedoose.com, the marketing website that promotes the application. This multi step project was more than just modernizing the visual design, I wanted to overhaul the entire user experience with a targeted focus on customer acquisition and improving brand perception.
The end result was a bright and modern website that provides a first class user experience at parity with leading competitors, while enabling the team to collect more quantifiable measures of site performance.
As of November 20, the new site is currently in staging and has not yet been launched.
I began the project by reviewing comparative websites. Taking a look at the competitive landscape helps to identify shared conventions, discover opportunities for innovation, and note strengths and weaknesses that could enhance the new site.
I focused on websites that were well designed, with engaging user experiences and targeted messaging within the related fields of user research, software development and qualitative data analysis and mixed methods research.
After completing the competitive review, I compiled my recommendations and presented them to the team for buy-in. Ranging in level of effort, these (10) insights, would collectively improve the overall usability of the new site.
I then conducted an audit of the existing site content, compiling the information into a Google spreadsheet, where I categorized the content by type, purpose, format, behavior and SEO/meta data. This exercise helps to identify content gaps, duplicates, and areas of improvement that are essential to the creation of the sitemap and wireframes.
The next step was to create the sitemap, a tangible, high-level manifestation of the audit effort that organizes content (and the pages in which the content appears) to make the site more accessible and help boost SEO.
The next step was to create the sitemap, a tangible, high-level manifestation of the audit effort that organizes content (and the pages in which the content appears) to make the site more accessible and help boost SEO.
After sitemap approval, I began working on the wireframes in Figma. However, due to Figma's limited interactivity options, I brought the wireframe elements into Axure, where I built a clickable prototype. The Axure prototype gave the team a more realistic look at how visitors may interact with the site, while affording us a central place to collaborate and align on site goals and content placement.
A hybrid between a mood board and a mockup, these design concepts (also known as style tiles) help to define the visual language of the user interface without expending valuable design hours. I created and presented two different options, outlining color palette, typography, button styles, iconography, graphic styles and photo treatments.
This concept leverages the full spectrum of the secondary color palette, in combination with bright photography, bold gradients, two-toned icons, rounded edges and distinct drop shadows to create a bold and modern aesthetic. The composition visually conveys dimension and movement, while imparting a level of approachability and friendliness.
This concept largely leverages the more neutral values of the brand color palette, in combination with a richer, more naturally lit photographic treatment, single color icons, solid/flat color fills and straight edges to create a more conventional look and feel. The composition, overall, is symmetrical, ordered and pragmatic.
Having agreed on a design direction, the next step was to start building a style library in Figma. Comprised of UI elements (color variants, icons, and text styles) and reusable components (buttons, navigation modules, content cards, accordions, etc.) this cohesive design system would be leveraged to create the page mockups.
Having agreed on a design direction, the next step was to start building a style library in Figma. Comprised of UI elements (color variants, icons, and text styles) and reusable components (buttons, navigation modules, content cards, accordions, etc.) this cohesive design system would be leveraged to create the page mockups.
With the wireframes as a base, I used Figma to design the main pages of the site, optimizing the UI elements and components for easy export and efficient build in Webflow. As a part of this exercise, I also created custom branded graphics that would support the platform features content, while complimenting the site's new modern and approachable creative direction.
A password is required to view, click here to request access
Once the page mockups were approved, I then started building the website in Webflow. My intention was to make it easy for the team to populate/maintain content with as little friction as possible. As such, I did the following:
Being favorable to team members who are not Webflow proficient, the majority of content updates were setup to be made via collection items.
Automatically importing color variables, padding/spacing values and font styles from Figma helped impart fundamental uniformity into the design system.
By identifying consistencies among Figma sections and modules, I was able to quickly create class styles and reusable components to expedite the page build.
Once the site was built and handed off to the team for content population, I setup a wiki in Notion, authoring comprehensive documentation that the team could reference. I also created video tutorials, ensuring the team was well equipped to maintain the site thereafter.
In support of the brand enhancement strategy and on the heels of the new creative direction of the website, it was imperative that all brand collateral be in alignment. As such, I refreshed the look and feel of these assets, which include: stationery, business cards, PowerPoint templates, digital ads and email templates.
In support of the brand enhancement strategy and on the heels of the new creative direction of the website, it was imperative that all brand collateral be in alignment. As such, I refreshed the look and feel of these assets, which include: stationery, business cards, PowerPoint templates, digital ads and email templates.
Finally, in support of the Digital Communications team, I created a new YouTube intro and outro to be used instructional videos. While I'm no video producer, I was able to dust off my old Flash (now Adobe Animate) skills to pull the short clips together. Starting with Figma, I created storyboards to layout the animation sequences and optimized the vector assets. Next, I used Adobe Animate to apply motion to the vector assets and built the animations. I then sourced stock music samples I felt would compliment the new lively brand aesthetic and used iMovie to combine the audio and animations to create the YouTube videos
