Go Back
Since the launch of our new Robosite in 2019, we’ve been making changes here and there in between client projects to optimize the site experience. After almost three years of small improvements and edits, we identified a few different needs we could address with one larger addition to our website.
First, we know that visitors are excited about seeing our work when they come to the Roboboogie website, and we want to show off more of our work! Our case studies are great, but not every project translates well to a narrative-based entry. Our solution was to create a design portfolio side of the Robosite, and we wanted to approach the project the same way we would approach addressing the needs of our clients: creating a custom-fit solution that can be easily integrated into our process and roadmap.
Once we started thinking about a design portfolio for the Roboboogie site, we needed to brainstorm and find creative ways to problem-solve. In the UX process, we started asking questions to guide our design thinking:
How do you show a webpage within a webpage?
The eternal dilemma when designing a website portfolio is that it’s not easy to convey the digital experience of one site on the page of another site. Just slapping a PNG of the whole page isn’t ideal; it’s unusual to see a long screenshot of an entire page and detail is lost in such a large image. It’s not the way we want to be showcasing our work.
Instead, our vision was for each screenshot to be viewed as a snapshot of a larger page, or have the real experience of scrolling through the page, but we couldn’t link to the website itself as our client’s pages will change over time.
As a solution, our design and development teams worked together to create a scrolling window that users can interact with as if it were a smaller screen within our portfolio page. This also allowed us to pair desktop and mobile page designs together in a collage format for easy comparison of how designs translate across different sizes.
How do we customize each page to each client project without going through a new design and development process for each one?
Our solution was to define a general page outline for all pages, with areas to swap different modules out based on what type of work each project involved. The resulting library of design modules utilized different combinations of desktop, mobile, and email asset options, in slider, collage, and scrollable formats. We also created optional modules like testing statistics, video clips, and icon gardens.
Designing all modules at desktop, tablet, and mobile sizes meant that our development team was able to see how each module flexed for different screen sizes, ensuring that our work is shown in its best light no matter what device our visitors are using.
How can we add new design elements to our brand while staying true to it?
The scope of the design portfolio necessitated that we introduce a secondary menu to navigate between clients. We also created chips to tag & sort different projects by type of service in addition to creating 40+ design modules.
Having a thorough understanding of our existing brand and accessible brand documentation to draw from allows us to define new components in a streamlined and straightforward way. And having a team of quick-thinking designers allows us to fill in any gaps and create new elements easily as our portfolio expands.
How can we design for the future, beyond the MVP, even though we want to publish sooner than later?
Ensuring that our design won’t need any major revisions as we add projects and clients was paramount to launch. We opted to design new components like the overlay menu and portfolio landing page with a larger amount of content, then refined based on what we actually wanted to launch with. This guarantees that the new pages and components can scale as more projects are added.
We had so much fun working on a project of this scale for our own website—and it’s what Roboboogie does best. We thrive consulting to identify project and client needs, creating a roadmap to a better solution, and getting there while creatively solving problems along the way. If you want to team up with the best in the business to tackle UX and UI needs as they arise, send us an email and let’s boogie!
