Dark mode toggle
Creative Iterations
Students must present the successive iterations of their creative process, and the connections between them, of their methodically substantiated, iterative design and development process.
Studio Logo:
When I was working on the logo for our design studio, we already had our design style and the name "Prism." We aimed to create a visual that screamed "unity in diversity" and attracted a wide range of people, from startups and entrepreneurs to content creators and marketing agencies. The name "Prism" got us thinking about triangles and rainbow colors, kind of like the Pink Floyd album cover. But we quickly realized that wasn't very original.

Discover
In the Discover phase, using some design thinking and CMD methods like brainstorming and visual research, we looked at all sorts of inspirations and existing designs. We started with iconic prism designs like the Pink Floyd one, but it didn't quite hit the mark for us. This phase was all about exploring different ideas and gathering a bunch of visual references and themes.

Define
Next, in the Define phase, we took what we learned and nailed down our design goal: create a logo that shows "unity in diversity" and appeals to a broad audience. This helped us focus on what elements we wanted—like the prism, rainbow gradient, and the name "Prism."

Develop
Then we hit the Develop phase, where we started creating and tweaking our logo designs:
1. Mosaic Style (Logo 1): We tried a mosaic style first, but it just didn't look right.
2. Rainbow Gradient with Name (Logo 2): We put the name under a rainbow gradient. It looked okay, but nothing special.
3. Half-Triangle with Sideways Name (Logo 3): Wesley suggested doing a half-triangle with the name sideways in the other half. I sketched it out digitally, and it started looking promising.
We also used rapid prototyping, a CMD method, to quickly test different fonts (like in Icon 4) and refine the design to fit nicely within the triangle, adding a vibrant backdrop (Icon 5).

Deliver
In the Deliver phase, we showed our design around for feedback. We found out some letters were hard to read and the colors were too muted. So, we:
1. Fixed the Letters and Boosted Colors: Made the letters clearer and the colors more vibrant.
2. Final Tweaks: Took feedback from teachers and fellow students, changing the backdrop, leading to the final design (Logo 6).

The final version balanced aesthetic appeal with readability and vibrancy, and it really clicked with our diverse audience.
Showing all the logo iterations
Portfolio Style:
For my portfolio I wanted to keep the layout I used for my previous portfolio. However, the style looked kind of "hospital like". Desaturated colors, hard corners, and not a lot of playfulness. I think we can call it "iteration 1".

I wanted to change this, but didn't really know what kind of style I wanted to go for at the beginning. That's also why my previous portfolio had this style. But one day when we were brainstorming the style for the project group, I had the inspiration of trying a glassmorphism style. When I saw how I could accomplish this with the very first portfolio I made, I directly copy-pasted this into the CSS of my current portfolio. For a quick light and dark mode wallpaper, I used a macOS wallpaper. Slightly modified the width of some elements, and I had my second iteration done.
showing the different iterations of my portfolio style
When I went to get feedback for this style, I got some points to work on. One point was that the elements didn't feel aligned. Some other feedback points were on the style itself, where I applied a too heavy shadow under the so called glass elements. The light glass doesn't have a heavy shadow, as it lets through a lot of light. So I fixed that by reducing the darkness of the shadow in light mode. I also made sure the corner radius matched website-wide. So that was my third iteration.

So after all that, I felt like I had the style itself almost completely done. The main thing I still wanted to change, was the background image. Until now, I have been using the wallpaper from macOS. As for the new image, I had something in mind. I wanted to have a solid color with colorful rounded geometric shapes on it. I ended up finding this image by Freepik which looked really nice with the frosted elements on top of it. However, this was only a dark mode image. So I edited it to also get a light mode version. Another small change I made was to have heavier shadows in the dark mode, as dark frosted glass would also have a stronger shadow than light frosted glass. I know that these are usually just minor details, but I love trying to get a style completely right. And it's that dedication to perfection that got me to my fourth iteration. There are probably still things that I could improve, so it's not perfect yet, but compared to the previous iterations, I'm really happy with it.
showing the different iterations of my portfolio style
Mobile Transport App Follow-up:
As a follow-up on the Public Transport app in Interactive Media, we got the following.

Feedback for App Improvements
• Home Icon Placement: Move the home icon to the left and show the login page only when clicked.
• User Interface Issues: Fix inconsistent icon positioning and remove mandatory pop-up closures.
• Ticket Page Clarity: Ensure clear explanations and functionality for the ticket page.
• Page Layout and Navigation: Prioritize the home page, followed by favorites and settings.
• Design Aesthetics: Incorporate a bit more colors to reduce the excessive grey tones.

Implementation of Feedback (see prototype 4)
• Removed the mandatory pop-up step and added an optional info button.
• Switched the home and personal icons for better usability.
• Aligned arrows on the ticket page and added a time selection box.
• Improved the main page layout, focusing on routes.
showing the whiteboard sketch low-fi prototype
Iterations in the group project:
We wanted to have text signs in the final product to provide necessary information or riddles. At first, we had wooden signs that were saved from online. But after we applied them and saw how they looked together with some other items, we got feedback that these signs didn't really fit with the rest of the design.
the old style of sign

Discover
In the Discover phase, using design thinking and CMD methods like brainstorming and user feedback, we started exploring why the signs felt out of place. We looked at the visual styles of the updated items and gathered ideas on how to make the signs fit better.

Define
In the Define phase, we pinpointed the issue: the signs needed to match the new visual style of the product. We defined our goal to redesign the signs so they felt like a cohesive part of the overall design.

Develop
Then we moved to the Develop phase:
1. I asked Martin to generate a few sign designs with his ChatGPT model. This was our rapid prototyping step, where we quickly tested different design options.
2. Martin came up with a couple of options, and I chose one that I liked. However, it needed to be wider to fit all the text properly.
the sign martin made together with chatgpt

To fix this, I used a CMD method called iterative design. I cut the sign into three pieces and stretched out the middle part. This way, the sign didn't look stretched out and was big enough for the text.
making

Deliver
In the Deliver phase, we finalized the design:
1. We tested the new sign to make sure it fit well with the rest of the product.
2. We gathered feedback and made any final tweaks to ensure the sign looked integrated and natural. The final version of the sign fit perfectly with the overall visual style of the product, providing the necessary information without looking out of place.

By blending the Double Diamond technique with elements of design thinking and CMD methods like brainstorming, rapid prototyping, and iterative design, we were able to redesign the sign to match the rest of the product seamlessly.
the new style sign that fits way better
That's all
folks!
Scroll up button