Segue Website Redesign


Segue Technologies is a custom IT service and software development company in Arlington, VA. Segue designs and develops mission-critical applications and works with the Federal government and the Department of Defense, as well as Commercial and Non-profit organizations. Previously created in Drupal, our challenge was to redesign the Segue website from the ground up using WordPress as the new CMS system. Segue stakeholders and staff members wanted an easier way to manage website content, publish news and blogs, and update and add images themselves instead of relying on the development team to make updates.


Government, Commercial, Non-Profit Clients

what i did

Visual Design, Illustration, Wireframing (Axure and Pen/Paper), UI Layout in Sketch, Branding, CSS

brainstorming and wireframing

After a series of user testing/card sorting and usability research conducted by our UX team, I worked with my Creative Director on low-fidelity wireframes and screen flows in Axure and started off the redesign brainstorming new features and functionalities to add on the site. We also had to take into consideration the site being responsive and how the new features will work with our new structure. Our main goal was to approach the redesign in a more streamlined way and focus on simplicity, content, and performance.


Our solution began with Segue’s brand modifications. This part of the process was actually the most exciting and challenging because I was able to re-explore the Segue brand and propose a more unified visual style. I worked alongside my Creative Director/Usability Specialist to consolidate pages, create a style inventory in Sketch, 
and tidy up existing graphics throughout the entire site.

icon development

After our team agreed on the flow and low-fidelity wireframes, I started refining the previous illustrations we had on the old site. I noticed that overly detailed icons were tending to clutter up the site. To create a more pleasant visual experience, I created icons that were minimalist in style and yet bold.

icons1 revised icons
website components

The best part about the redesign was creating the small components that would eventually make up the whole interface, and constructing the site in a more methodical way. I worked alongside my Creative Director to break down each page into fundamental building blocks and we worked up from there. We learned this valuable process from Brad Frost’s talk about Atomic Design on An Event Apart.

component 1 page controls page callouts
design and development

From there, I began to mockup the screens in Sketch using our new, revised stylesheets. Building the style inventory ahead of time made it really easy for me to layout pages and share them with our stakeholders. I uploaded all of the Sketch artboards to Zeplin to share with my Creative Director and our development team. I started refining the visual designs and certain parts of the user experience. I created custom icons for the search bar and a back-to-top button that would start grayed out and fill in with color when the user scrolled the page. I created sample CSS for these features so that the dev team could see how they functioned in real-time.

body page

The blog section of our site is probably my favorite of all the pages. We wanted to stay true to the Segue brand and tie all the blog images into our current styling. Numerous visitors have found us through our blogs alone, and the images have been crucial and important to all of our blog content. I usually work with our Social Media manager for all of our blog images, and all illustrations are custom-made.

other custom illustrations
custom illustrations
responsive layout
responsive layout
design hand-offs and what i've learned

Using Sketch and Zeplin has been a great time saver for our creative team. Gone are the days when I had to spec every single page in Adobe Illustrator, where at times I found myself making mistakes in applying the styles as it was hard to keep up with the multitude of separate files. I have also learned that even if you have shipped a project, it doesn't mean that the project is done. Your work is always living and breathing and testing and iterating is a huge important part of the process. The design process can never be concrete and will always evolve with time. At the end of the day, it is always important to collaborate with your team, gather information and input early and often from peers, stakeholders, and users in the industry to create first-class designs and experiences.

view the site here