Client: Illu Designs is a user experience focused design service, founded by Per Kvanbeck. Their goal at Illu is to help clients' identify opportunities that can elevate a user’s experience from good to great. They work within current products to improve efficiencies and systemically identify new concepts to add to their entire service offering. They solution for the entire experience.
Overview
Problem: Design a portfolio for Illu designs that matches the client’s vision and highlights the company’s past work, services, and values.
Results: A desktop portfolio was designed using Figma that was ready for development. One case study was created to be used as a template for the clients future case studies.
Approach: Client Discovery Workshop | Competitive Analysis| Sitemap I Low Fidelity Sketch I Figma Wireframing and Prototype I
Team Members: Per Kvanbeck (client and collaborator), Morgan Rogers (content strategist)
My Roles: Researcher, Designer
The Challenge.
Create a design portfolio that matches the client’s creative vision of how they want to express the company’s branding while also highlighting their mission of being a company that anyone would feel comfortable working with.
Original Concept & Research
Client Discovery Workshop and Mood Boards
I was hired by Per as part of Illu Designs to help create his company’s portfolio. In its current state Illu had a logo and a way to contact Per, but he was struggling to figure out how he wanted to represent himself and Illu in a website. To help me understand his current vision I conducted a discovery workshop with him where I got to dig deeper into what he wanted to include, what he didn’t want to include, and what mood he wanted the website to dive off.
Mood Boards
After the workshop I wanted a way to visualize what the client was expressing in the interview and help represent different design direction we could go with.
I created three mood boards that helped show similar palates that could fit what they wanted, but with 3 very different tones.
They felt that the one on the right was the one that best fit what he wanted and would easily fit his current logo and implantation of impossible shapes that he wanted included.
Competitive Analysis
I also like to see what else is out there before I start designing. Based on the client’s favorite agency portfolios and ones that I found that seemed to match his vision, I began a deep dive into what the general layout these portfolio’s used, what was working well for those websites and what wouldn’t work for Illu. I went through my findings with the client and we were able to more clearly define the direction of Illu’s website.
Sitemap
Based on the competitive deep dive and discover workshop with the client, I was able to create a site map that helped organize the flow of the website. From here Morgan Rogers helped create the copy content for the main pages that I would be able to use within the design of each page.
Initial Sketches
With the map complete, I then created some low fidelity sketches that would serve as the frames for the higher fidelity designs. For the homepage in particular I wanted to show the client a few different homepage layout options before moving forward with high fidelity. I love doing this because it allows for quick feedback without getting too deep into a time consuming design.
Original Black and White Design
Going off of the original mood board and design concept selected by the client, I began creating the higher fidelity wireframes. The color palette (selected by the client) was black and white with pops of color. Usage of impossible shapes was also important to Per and I created a library of shapes that could be used throughout the website.
Main Page
One of the biggest things I learned through this design process was how to create different animations in Figma. The client really enjoyed different animations from other agency website’s. The scrolling banner was a favorite and something they wanted to see incorporated in the design. We both felt that the scrolling banner was a clean animation that added without being too overwhelming for the users.
The structure of the low fidelity homepage and case study were used as the skeleton. I began placing content used from the clients previous design to start getting a feel for what it could look like with this theme. I wanted to get feedback before going any further, to ensure I was on the right track.
New Direction
While meeting for the design review, the client was struck with a new spark of inspiration for Illu’s website. They presented the idea of making it a two color palate and giving it a more organic paper like feel. We spent the next few hours working together to brainstorm different ideas and gathering new photos for inspiration.
As a designer I am passionate about the projects that I create, but I am also just as passionate about throwing it away and creating something new whenever needed. This project made me really fall in love with this ability as I got to start (almost) from scratch when the client was inspired by a new design concept. Black and white was out, a simple red and blue color palate with a collage feel was in.
First Draft
I was able to use the same skeleton and structure of the previous design which saved time in the process. I was excited by this new direction and opportunity to create something completely different from the original concept. I had never designed anything with this palette or style before and I was inspired by the challenge.
Kins Case Study
The case next iteration of the case study design was not too much different. I was mainly able to pull in the red and blue color scheme. The case study allowed me to play around with the bold red accents and banner animations that the client was looking for. The challenge here was to make it interesting while still keeping it clean so that the user could easily find the information they needed.
At this point in the process we were still workshopping where we wanted to final design to end up. I used a lot of fillers and lower fidelity components while we were ideating to keep things moving at a faster pace and make it easier to toss things out that were not working.
Final Design
Adding the astronaut
We felt close to the final design concept, but the client felt something was missing. Per really wanted an element of creativity and fun. He wanted the website to not take itself too seriously or look stiff.
Going with the collage concept, which also gives off a vintage vibe, I got the idea of using old technology in the design. It was a tech design company after all. Once I made the first Illu astronaut for the home page, the rest was history.
Pop-up CTA’s
The client was loving the astronauts and the way the logo was being used in subtle way throughout the website. To take the design a step further and help make the CTA’s stand out for the user, I created pop-ups inspired by the old computer operating systems.
Background Images
The client emphasized creating a design the pulled the users’ eye downwards. I used the collage concept to incorporate background color changes throughout the pages.
Again, the challenge here was to add the element of fun but keep it clean and simply. I wanted to add without subtracting from the content.
Final Case Study Design
Once we settled on the design system elements of the main site pages, I carried those over to the case study. The color scheme and layouts stayed the same, but pop-up boxes were added to help highlight images and call outs. They also helped tighten up the design and provide more structure to the content.
Final Prototype
The client and I worked collaboratively in the Figma file throughout the process and had weekly design reviews. Below is a prototype of the final design that the client had me begin to develop on Webflow.
Next Steps
Finish case studies- My contact ended before we were able to create more case studies. I was tasked with creating the one for Kins while also making a template for all of the other case studies. The next step would be to use that skeleton to showcase the rest of Illu Designs work.
Development- The client had me develop most of the website using Webflow because there was extra time. However, my contract ended before we were able to finish it. The next step would be to get the website fully up and running.
Usability testing- I would love to see how this design resonates with users and see what insights can be gained to make it even better.
Conclusion
This was one of the most fun and challenging projects I have worked on. There was a lot of ambiguity in what direction the design was going to take, and I gained valuable experience in what tools to use to help dig through the unknown when working on a project. Per was an incredible client to work with and with him being a veteran UX designer I was able to collaborate, ideate, and learn from him.
This project was incredibly design heavy which really helped me grow my skills in UX/UI design. However, I truly missed not being able to put things in front of users and design more for people vs an agency. I am excited to take what I have learned about design and apply it into my future projects.
