Category: Digital Prototyping

Final Essay (Re-examination)

korneliapappLeave a comment

Introduction

The term Design exceeds the simple definition being a plan to execute a product or system. As its meaning shifts dramatically over the centuries, design as a process has been thoughtfully practiced apart from its traditional context where its used to intellectually devise solutions to acute social problems as well as an instrument of inquiry. After the popularization of the term User-Centered design in the 80s by Don Norman’s “The Design of Everyday Things”, a new strategy of design emerged from Raby and Dunne’s ideologies, they named it Critical Design as its based upon a more academic notion of critical theory (Dunne, 1999).  Critical Design was introduced to be in opposition to the typical “affirmative” and commercially-oriented practice of design and aims to find problems instead of solving them, not shying away from sensitive ethical issues and creating speculative narratives to bring those into the light (Gonsher, n.d). Dunne & Raby introduced this concept to spark conversations about contemporary consumer culture, addressing the potential negative (or positive) consequences rapidly-emerging technology can bring. This essay presents an argumentation for why digital prototyping is a valid medium for a speculative approach to design.

The Digital Future of Prototyping

Digital prototypes, like physical prototypes, allow for quick and realistic displays of a concept. They serve as manifestations of ideas, but represented in a different medium depending on the inquiry and aim for discovery. As Bucheneau and Suri mentions, a prototype is a representation that can take form as any medium that is served to understand, explore, and communicate what it might be like to engage with the product or system we are designing. Physical and Digital prototypes both serve as manifestations of design ideas in all design fields but it is important especially in Human-Computer Interaction Design because it uses digital materials they refer to as “material without qualities” (Löwgren & Stolterman, 2004). There are now many programs and software in the market designed specifically for creating digital prototypes, such as Adobe XD, Photoshop, Figma, and Bootstrap for building mockup websites. These prototypes are created to be pretty aesthetic to the eye without too many rough edges, as they’re often built using more advanced technology unlike physical materials such as cardboard and wood. They also afford more interactivity, animation, playful interactions, and so on. In Lim et al.’s (2008) paper discussing the anatomy of prototypes, they argue that digital materials have extremely few intrinsic material limitations and can take shape or form in various different ways. Physical materials such as wood and concrete however, do not. This tangibility of these digital prototypes determine form and function to a lesser degree and presents inherently more possibilities (Lim, Stoltenman & Tenenberg, 2008). Because the choices in prototyping are so open-ended, the strategy is even used to collect data such as A/B testing, and it presents successful results (Heyer, 2019). By applying these prototyping strategies, according to Heyer’s presentation, we are able to back our design choices up as well as move design ideas forward.

A Speculative Approach in Discursive and Critical Design

Critical Design (Dunne & Raby, 1995) and Discursive Design (Tharp & Tharp 2019) are essentially synonymous concepts. The method of design acts as a thought catalyst, creating prototypes that are not necessarily perfect solutions and having emphasis on aesthetics, instead, targets the intellect and presents thought-provoking questions. Discursive Design in general aims to discover and criticize potential futures by using a speculative and provocative approach, where scenarios or a “speculative world” is narrated using prototyped artefacts. Within the taxonomy of Critical Design includes Speculative Design.  A speculative design approach encourages designers or any audience to use design as a tool to create not only things but also ideas, to speculate about possible futures (Dunne & Raby, 2013).

Designers nowadays are often perceived as problem solvers, professionals that make products function more efficiently or look more aesthetic and beautiful. So the concept here is instead of solving problems, it’s to pose these problems as well as challenge assumptions. Authors Anthony Dunne and Fiona Raby have been outspoken advocates for the concept of speculative design and creating speculative worlds to inquire and provoke questions regarding ethical and sensitive real-world issues (Dunne & Raby, 2001). This approach, being part of critical design, challenges assumptions and allows us to think about “speculative” futures, and to criticize current practices (Dunne & Raby, 2013). You create fictional products, display it in a prototyped “speculative” world, to criticize current practices. This is what was presented for the final project. The goal is to “unsettle the present rather than predict the future, to understand the present and to discuss the kind of future people want” (Dunne & Raby, 2013).

Malpass (Malpass, 2016) claims that the common approach within speculative design when it comes to techno-centric domains is to place a huge emphasis on what technology can do. He argues that the main focus of Speculative Design isn’t necessarily concerned with the technological progress itself but rather the potential diverging paths and other possible technologies it can lead to.  

Speculative design practice functions in two different ways (Malpass, 2016). As a practice, it acknowledges the current advances in technology then “projects them into future domestic settings”, this practice again provokes conversation about the present as well as the future. Then comes the importance of prototyping in Speculative Design practice. With these “tangible” prototypes, it’s possible and much more effective to project these concepts into near reality (Malpass, 2016). And secondly, this practice is implemented to unsettle and reimagine the present (Dunne & Raby 2013).

In Lim et al.’s (2008) paper discussing the anatomy of prototypes, they argue that digital materials have extremely few intrinsic material limitations and can take shape or form in various different ways. Physical materials such as wood and concrete however, do not. This tangibility of these digital prototypes determine form and function to a lesser degree and presents inherently more possibilities (Lim, Stoltenman & Tenenberg, 2008).

Digital Prototyping contributes to Speculative Design

Speaking of tangibility of prototypes, it has been established earlier in this paper that because digital materials have fewer material limitation, it can take shape in more ways than a typical solid physical prototype. This method of prototyping therefore manifests noticeably more possibilities as it determines form and function to a lesser degree (Lim, Stoltenman & Tenenberg, 2008). It’s also easily changeable and modifiable unlike labored physical prototypes that often times might take shape in cumbersome formats. That being said, digital prototyping is perhaps an effective method of prototyping within a speculative approach in design practice. If the prototype looks plausible, and effectively creates a speculative “world”, it can spark a discussion about what’s wrong with the present and discuss what kind of future people want.

In this course and specifically during the final speculative design project, students had to utilize digital prototypes to implement into the speculative “world”. Starting with an issue chosen to address, students continued by ideating on possible ways to create an unexpected twist, a dissonance that sparks conversation. After ideating and brainstorming, digital prototypes (and physical) were built, physical prototypes were photographed, digitally manipulated, then implemented into the final speculative narrative. The speculative world took shape as a landing page, or product page. With that website, user-testing could be done, as it’s a digital prototype you can physically engage with, most people understood the concept and the message the product advertised and the website is trying to convey, and how sort of twisted it is. The speculative design approach here were successful because it sparked conversation, as most respondents discussed about how “controversial” the topic presented was, and thanks to the digital prototyping strategies utilized, the message was properly facilitated. People need to use prototypes to visualize their own ideas and conceptions, this is thus extremely relevant in speculative design practice, in order to envision “speculative futures” it’s crucial to have something to look at that triggers more thought and conversation about the specific issue.

According to Ted speaker Anab Jain (2017) she imagines and builds future worlds that we can experience in the present moment with her project Superflux. By creating these new ways of viewing, being, and acting, she’s making assumptions and challenging us to look more critically at the decisions and choices we make today (Jain, 2017). Doing a speculative design project using digital prototyping methods creates a world, either in the future or in a parallel universe, we spark conversation, provoking people to think transformatively about a particular process, service, environment, or product. Jain says: “this work isn’t about making predictions… it’s creating tools that help connect our present and future selves, so that we can be active participants in creating a future we want.” (Jain, 2017) This way of articulating how people might engage with speculative design is interesting because it reinforces the separation from the hyper-commercialized, software development approach of design that looks at people as users. It prescribes ways of engaging, it’s open to imagining possible interactions and interpretations. Speculative design challenges notions like observation and is more communicative.

Working with digital prototyping methods in our speculative world presented several confusing moments, as often times our project was critiqued to be too perfect to be a speculative project. In Tharp & Tharp’s paper on Discursive Design Tonkenwise argues that the lesser polished aesthetic the more speculative and critical it is (Tharp & Tharp 2019). That reflects the core value tracing back to critical design, as we’re not supposed to create perfect aesthetic solutions, we’re creating a narrative to discover problems, shed light to specific societal issues, spark conversation and target the intellect. Other digital prototyping methods that could have been potentially used for this project could have been the collection of data via mouse-click tracking as well as A/B testing, this form of data collection can also contribute to the speculative because by discovering which areas the testing users might be drawn to can potential unveil some sort of superficiality, that of course bases solely on what message the speculative world is trying to narrate and convey. If more time was given, we would have learned to apply more commercial methods of design in order to enhance our message (Tharp & Tharp 2019). Dunne (1999) also advocates for interfaces with electronic products as it “draws on familiar images and clichés”, this ability to relate and the familiarity can definitely help enhance any sort of message needed to be conveyed in the speculative narrative.

Conclusion

By implementing digital prototypes in speculative design can definitely provide better results and provoke more reaction and conversation. Speculative design explores the role of design by facilitating alternative visions rather than introducing a one-dimensional reality driven by the industry. Malpass (2016) argues that implementing digital materials in speculative design practice can enhance the message and provoke more thoughtful conversations. Giving prototypes tangible properties is convenient for both the user as well as the client. It’s also effective to use digital prototypes because the tangibility of them determines form and function to a lesser degree (Lim, Stoltenman & Tenenberg, 2008) which means that the scenario does not necessarily have to be presented or defined by the designer, but instead the audience can make their own interpretation of the narrative and speculative “world” (Tharp & Tharp, 2019). If this initiation by the audience is successful, the designer can then be able to gather more valuable insights from the users including new societal issues. It goes beyond commercial applications, towards a more imaginative space. Designers that participate in speculative approaches should use digital prototyping as a tool to engage with their audience, to get their concepts across, as well as provoke conversations about the future and how they might develop a better version of it through speculations. However, it’s important to acknowledge that no matter what approach you use for design, prototypes are not created to be polished solutions. At the end of the day, they’re utilized in a creative process in order to aid designers in backing up design ideas or helping the ideas be pushed forward down the process.

Reference List

Buchenau, M. and Suri, J. F. (2000) Experience Prototyping. ACM New York. (pp. 424-433) NY, USA. Retrieved March 27th, 2019

Dunne, A. (1999). Hertzian tales: Electronic products, aesthetic experience and critical design. (2005 ed.) The MIT Press, Cambridge MA.

Dunne, A., and Raby, F. (2013) Speculative Everything: Design, Fiction, and Social Dreaming. MIT Press, Cambridge MA.

Dunne, A., and Raby, F. (2001) Design Noir: The Secret Life of Electronic Objects. Basel, Birkhaüser. 

Gonsher, I. (n.d.). Beyond Design Thinking: An Incomplete Design Taxonomy. Retrieved from http://www.cd-cf.org/articles/beyond-design-thinking/

Heyer, Clint (2019) 04 Data [powerpoint presentation] Received 1 July, 2019 from Malmö University: https://mau.instructure.com/courses/3021/files/folder/Slides?preview=254286

Houde, S. and Hill, C. (1997). What do prototypes prototype.Handbook of human-computer interaction. (pp. 367-381). North Holland. Retrieved March 27th, 2019.

Jain, A. (2017) Ted 2017: Why we Need to imagine different futures. Link to video: https://www.ted.com/talks/anab_jain_why_we_need_to_imagine_different_futures?utm_source=twitter.com&utm_medium=social&utm_campaign=tedspread

Lim, Y. K., Stolterman, E., & Tenenberg, J. (2008). The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Transactions on Computer-Human Interaction (TOCHI), 15(2), 7.

Malpass, M. (2016). Critical Design Practice: Theoretical Perspectives and Methods of Engagement. The Design Journal, 19(3), 473-489.

Tharp, B. M., & Tharp, S. M. (2019). Discursive Design: Critical, speculative, and alternative things. MIT Press

Digital Prototyping: Final Concluding Essay

korneliapappLeave a comment

Introduction

The third Industrial Revolution, the Digital Revolution has grown in such fast pace that electronic devices have taken over almost every aspect of our lives. The advancement of technology from analog electronic and mechanical devices to digital technology available today has been extremely revolutionary and has changed many people’s lives. The internet is something quite an abundant number of people cannot live without. Nowadays, some people can even get panic attacks when they’re not in proximity with their phones. That being said, even though digital devices have taken over in a way people can argue to be toxic, they have contributed in helping us complete tasks that take much more time to be done manually, and they definitely play a vital role in our lives.

A Speculative Approach and its Contribution to Design

What is speculative design? A speculative design approach encourages designers or any audience to use design as a tool to create not only things but also ideas, to speculate about possible futures (Dunne, A. & Raby, F., 2013). Designers nowadays are often perceived as problem solvers, professionals that make products function more efficiently or look more beautiful. So the concept here is instead of solving problems, it’s to pose these problems as well as challenge assumptions. Authors Anthony Dunne and Fiona Raby have been outspoken advocates for the concept of critical design, design fiction, and speculative design (Dunne, A. & Raby, F., 2001). This approach, closely related to critical design, challenges assumptions and allows us to think about “speculative” futures, and to criticize current practices (Dunne, A. & Raby, F., 2013). You create fictional products, which is what was presented as an assignment for the final project, to criticize current practices. The goal is to “unsettle the present rather than predict the future, to understand the present and to discuss the kind of future people want” (Dunne, A. & Raby, F., 2013), which is when digital prototyping can play a role.

The Future of Prototyping

Digital prototypes, like physical prototypes, allow for quick and realistic displays of a concept. As Bucheneau and Suri mentions, a prototype is a representation that can take form as any medium that is served to understand, explore, and communicate what it might be like to engage with the product or system we are designing. But in comparison to physical prototypes, the digital prototypes take more effort to create, and are even considered “hi-fi” instead of “lo-fi”. There are now many programs and software in the market designed specifically for creating digital prototypes. Though these prototypes are created to be pretty “high-fidelity” they don’t behave as close to the final product as possible, but they can be dynamic, animated, and have smooth transitions. Through this process, they can get a sense of how the actual product will behave.

Digital Prototyping contributes to Speculative Design

Digital prototyping practices contribute to speculative design approaches. If the prototype looks plausible, and effectively creates a speculative “world”, it can spark a discussion about what’s wrong with the present and discuss what kind of future people want. Prototypes, physical or digital, are presented as a “physical” representation, something you can look at, more than just plain imagination. It discusses what role an artifact will play and how it will be implemented (Houde & Hill, 1997), and presents itself as an “experience prototype”, in any medium, designed to understand, explore, or communicated what it’s like to engage with the product in the space we’re in or creating (Buchenau and Suri, 2000).

People need to use prototypes to visualize their own ideas and conceptions, this is thus extremely relevant in speculative design practice, in order to envision “speculative futures” it’s crucial to have something to look at that triggers more thought and conversation about the specific issue. For the final project of digital prototyping, students were asked to use a speculative approach to create a product in a “world” that binds with one of the 17 Sustainable Developmental Goals. The group created an overview of how people’s choices relate to the ecosystem and the overall picture of ocean life. By prototyping a website, the goal was to “speculate” upon a world where reviving the corals artificially to create a pleasant experience for the human eye is of utmost importance, not actual nourishment. As a rather controversial topic, it unsettles the present, and incites conversation to discuss about the society we’re currently living in and how it is strongly dependent on social media and superficiality, and how humans resort to choosing “quick-fix” solutions.

Testing the prototype will lead to new insights and more iterations that will eventually lead to a finished product. It also, as mentioned before, sparks more conversation if the general approach of the digital prototype is speculative. It can be used to discuss important matters in the society, and to validate if anything is worth being built or invested in, since it’s about questioning the status quo. their audience. Speculative design is about testing hypotheses and questioning the status quo. When designers integrate the digital prototyping as part of their speculative design process, the designer is able to construct prototypes that not only give a glimpse into the future, make it tangible, but also spark conversations about what’s the issue with our current society.

Envisioning Different Futures

Speculative prototyping is commonly used as a technique to bring a future to life in order to create experiences that people can touch, see and feel potential of the world we’re creating. It’s a great technique because it’s tangible. According to Ted speaker Anab Jain (2017) she imagines and builds future worlds that we can experience in the present moment with her project Superflux. By creating these new ways of viewing, being, and acting, she’s making assumptions and challenging us to look more critically at the decisions and choices we make today (Jain, A., 2017). Doing a speculative design project using digital prototyping methods creates a world, either in the future or in a parallel universe, we spark conversation, require people to think transformatively about a particular process, service, environment, or product. Speculative prototyping is not intended to create a solution but to open people up to creative thinking. Jain says: “this work isn’t about making predictions… it’s creating tools that help connect our present and future selves, so that we can be active participants in creating a future we want.” (Jain, A., 2017) This way of articulating how people might engage with speculative design is interesting because it reinforces the separation from the hyper-commercialized, software development approach of design that looks at people as users. It prescribes ways of engaging, it’s open to imagining possible interactions and interpretations. Speculative design challenges notions like observation and is more communicative. It’s powerful as it’s meant to facilitate imagination of a certain level of interpretation. There’s no prescribed usage.

Can Digital Interactions offer Benefits for Speculative Design?

Mentioned earlier, speculative design is more than making the design seem appealing and functional. It’s the engagement and interaction that is significant. A product’s functionality and limitations is often the second thought that comes to mind when being discussed in a more casual setting. What’s spoken about is the experience it incites and how it plays into your life. That’s why digital prototyping is an important technique that can be contributed in a speculative design process because much of prototyping and early user-testing is about experiencing the prototype, what thoughts it stirs up in your mind, and not so much about its functionality. In Speculative design, the audience is challenged to imagine their potential future with the aid of a prototype to help visualize such a future. The thought that these prototypes stir up is usually about how the product, device, system, whichever shape or form the thing has taken, will play a role in that speculative world. Digital prototypes allow users to interact with palpable objects not just to experience the functionality but to spark conversation and thought about how it fits in their world. Speculative designers can provide their audience with a website, an interactive application, a digitally enhance or modified photograph, etcetera. the possibilities of what could be created through digital prototyping practices are endless. We can simply argue that digital prototyping is the best tool that can be used to showcase a world for people to imagine better and feel more unsettled due to how realistic things can look.

Using Digital Prototyping in the Speculative Design Process

In this course, students had to implement digital prototyping practices into a speculative design project. Starting with an issue chosen to address, students continued by ideating on possible ways to create an unexpected twist, a dissonance that sparks conversation. After ideating and brainstorming, digital prototypes (and physical) were built, though the physical prototypes were photographed and implemented into the digital prototype. The prototypes took shape as a landing page, or product page. With that website, user-testing could be done, as it’s a digital prototype you can physically engage with, most people understood the concept and the message the product advertised and the website is trying to convey, and how sort of twisted it is. The speculative design approach here were successful because it sparked conversation, as most respondents discussed about how “controversial” the topic presented it, and thanks to the digital prototyping tools utilized, the message was properly facilitated.

Conclusion

Digital prototyping is a clever way, and arguably the only way to contribute to a speculative design approach. They provide a sense of familiarity, “look and feel” (Houde, S. and Hill, C. 1997) to its users and can be “experienced”, designed to understand (Buchenau & Suri, 2000), it facilitates conversations and often sparks uneasy-ness. Speculative design explores the role of design by facilitating alternative visions rather than introducing a one-dimensional reality driven by the industry. It goes beyond commercial applications, towards a more imaginative space. Designers that participate in speculative approaches should use digital prototyping as a tool to engage with their audience, to get their concepts across, as well as provoke conversations about the future and how they might develop a better version of it through speculations.

Reference List

Mitrovic, Ivica & Šuran, Oleg. (2016). Speculative – Post-Design Practice or New Utopia?.

Dunne, A., and Raby, F. (2013) Speculative Everything: Design, Fiction, and Social Dreaming. MIT Press.

Dunne, A., and Raby, F. (2001) Design Noir: The Secret Life of Electronic Objects. Basel, Birkhaüser.  

Houde, S. and Hill, C. (1997). What do prototypes prototype. Handbook of human-computer interaction. Retrieved March 27th, 2019

Buchenau, M. and Suri, J. F. (2000) Experience Prototyping. ACM New York, NY, USA ©2000. Pages 424-433. Retrieved March 27th, 2019

Jain, A. (2017) Ted 2017: Why we Need to imagine different futures. Link to video: https://www.ted.com/talks/anab_jain_why_we_need_to_imagine_different_futures?utm_source=twitter.com&utm_medium=social&utm_campaign=tedspread

Final Project Wrap-up

korneliapappLeave a comment

Almost done!

The final day before the presentation consisted of wrapping up the final prototype website as well as finishing up the report page. During the weekend we have conducted different user-tests to see if people now get the concept better after the minor changes we made, most people complained there was too much text and the main goal of the product was still unclear.

Therese made a video which replaced the banner for the webpage, in the video the demonstration of the “coloring of the corals” is shown.

This video definitely aided our webpage a LOT, it gave users a clearer grasp of what’s happening and what product we’re advertising. Most were quickly to guess that the bubbles colored the corals, which was something they didn’t get before we added this video.

We did some final changes for our website, creating a second draft. We modified the colors of the website a little, making the colors more pink, playful, and vibrant, fitting to our theme. We eliminated most of the text and added 6-12 characters under the infographics for usage of the product. With the elimination of text the information is definitely easier on the eye. Pictures are also just better to look at.

The ball infographic showing the ingredients also received a positive response from the supervisors.

The Boat tour was removed from the final webpage as we believed that the concept perhaps detracts the attention from our main product and purpose.

And there we have it!

Our final webpage (final draft) https://pappkornelia.wixsite.com/website-1:

Home Page
Product Page

Things we could improve on if we continued with this project:

  • More visuals
  • Show user group (superficial selfie-oriented tourists) by implementing more selfie-like photographs for our instagram page

We’re glad that we decided to change our concept to the coloring of corals, it’s more speculative, outrageous, surprising, has more of a dissonance and twist. We’re not solving problems, but making people think they are. Highlighting superficiality in this made up “world”.

My role:

  • Polishing up final version of site
  • Prepare presentation
  • Assigning roles for presentation

Reflection: This course was pretty intensive and fast paced and honestly stressed me out quite a lot in the beginning and at the end. Journaling is time consuming especially when you meeting two different groups for group work in school is a requirement. Initially I found speculative design to be quite irrelevant for digital prototyping but now (since I’ve written my exam essay) I notice a correlation. This final project, however, was quite entertaining to work with and really challenged my perspective on design. Instead of doing something like the GUI course such as developing or redesigning an interface on Xd, we got to develop an entire narrative and a speculative “world” to challenge people’s assumptions. Provocative design was never something I thought I’d find enjoyment in.

This project was also exciting because I got to work with an a group of people I’ve never worked with before, experiencing new dynamics was definitely a plus. People argue that it’s nicer to work with people you choose to work with. I disagree, you never get to “choose” who to work with and who your clients are when you’re in a workplace. This is getting us prepared for that. Also, just staying in your comfort zone working with the same exact people you’ve worked with doesn’t necessarily benefit you as a designer. Different people have different perspectives and outlooks on design, it’s nice to bring these perspectives in to inspire your own.

Final Project WIV

korneliapappLeave a comment

Monday started off with a critique session where we showcased the visuals we’ve made so far and received feedback. After showing all the lo-fi visuals we’ve made to Peter, he recommended a few things, to change the logo to something more playful, perhaps using a bold font. Also to polish all visuals we’ve made so far while the website is being made. Then our next task is to make a website landing page that is persuasive and similar to ice creams. During the supervision, I brought up some Ice cream landing pages we can use as inspiration. Sites like Solero UK and Magnum gave us some inspiration to our very own landing page. Solero has a very bold banner we liked so we took on making a new banner (the old one Peter did not like at all). And Magnum had a solid landing page for their products, it was clean and pleasing to the eye, we will use the page as inspiration for the positioning of our elements.

During lunch, I bought lunch at Bella’s corner and while I was there I took photos of the billboard that advertises ice creams for inspiration to our logo redesign.

The group stayed after in the mac room for the rest of the day polishing up the visuals, creating new visuals and graphic elements for the page. I began by creating a domain on website builder wix.com and started placing our ready-made graphic elements in to see how it looks. Because nothing was polished yet, it looked a little wonky. The first thing I wanted to do is to polish up our ice cream visual, Therese did a good job taking pictures of her home-made CoralCoolers but I wanted a clean background for us to use on the product list and product page. I cropped out the best photo I could find of the ice cream and cropped everything in the background out, then, I photoshopped more bubbles in. Finally I did some touchups on the edges of the popsicle so it looked “fuller” and less eaten. I also added a popsicle stick because Therese had used a plastic one for her photos.

I also tried manipulating the colors of these popsicles to create four different flavors that represent different CoralCoolers needed for different target areas. I’ve mentioned earlier that we have four different locations: 1. Caribbean 2. Southeast Asia 3. Australia 4. Pacific. I placed this on the website but it was later deleted and reedited with more vibrant colors.

My first version of popsicle flavors, color not as vibrant.
Finalized and Vibrant colors of popsicles for different targeted areas with coral reefs

I also worked alongside Richard and created product descriptions for each popsicle.

By the end of the day I’ve also finalized Therese’s initial banner design, built our new logo out of it, and also a more stylized logo for our photoshop “instagram” elements, I’ll explain this later.

Banner
Final version of logo
A more stylized and graphic logo

The “Instagram” aspect:

Last week I had photoshopped our logo into real life ice cream salesmen photos, onto ice cream billboards and such. With these photos, we decided to create an instagram account to place these photos into. Now our “world” would look more legitimate.

On day two during our critique session: Clint gave us valuable feedback

First of all, he encouraged for a bigger and more surprising twist, and planted the idea of “coloring the corals” in our head. He enjoyed our new visuals but thought that it might not be conveying our concept and product purpose well enough (this was also given as a feedback during most of our user-tests). We decided after lunch to go with the idea of coloring the corals, so when the bubbles are dropped onto the corals they’re giving it a temporary color and not permanent nourishment. There’s more of a dissonance, a “surprise” element, it sounds appealing but we’re actually not solving the problem of coral bleaching at all, just coloring them for visual appeal. This kind of shows how superficial our “world” is, with our target group being tourists and instagrammers wanting to take pictures of the “colorful” corals.

Zakiya brought up an idea of a boat tour that we wanted to try implementing into our page, this CoralCooler boat tour takes customers out into the ocean, provides those on board with CoralCooler popsicles, and are asked to toss the bubbles into the ocean for maximum colorful effect of the corals for photos. So I designed a poster for this boat tour and placed it on where I thought was appropriate on the site.

Now that we’ve changed our concept a little, we just need to change some text (thankfully the logos and graphic elements don’t really need to be changed). To help communicate the concept better, I proposed to create an infographic for the bubble’s content and ingredient so it’s more catchy. It’s also a nice way of showcasing what’s inside the bubble and why it should be spit out instead of swallowed. The initial draft we have of the ingredients was simply a chunk of text.

I also designed a banner for the product page.

Banner for product page

End of the week:

First draft of website complete:

Visit website here: https://pappkornelia.wixsite.com/website

My Role (TL;DR):

  • I created a domain for our ‘prototype’ and final report website. You can find it here (this is the first draft of our website): https://pappkornelia.wixsite.com/website
  • Photoshopped ice cream for clearer product picture to be implemented in other elements such as logo, banner, product list
  • Looked for logo and website inspirations
  • Finalized banner for main page, logo, graphic logo
  • Created a different banner showcasing flavour of ice creams for product page
  • Created Boat tour poster
  • Created bubble ingredients infographic
  • Created more Instagram graphics
  • Placed all of these elements on the prototype website

Final Project WIII

korneliapappLeave a comment

This week also consisted of two sessions of supervision and additional group work. To kick this week off, on day one, we followed up our coral reef nourishment concept by summarizing some of our findings regarding different reefs, where they are located, and what they need as nourishment. During the supervision we were told that we can kind of fake some information too, for example, we can categorize a group of yellow-colored coral reefs and name them yellow corals, and claim that they need magnesium as a main nourishment, etcetera.

Blue corals, red corals (precious corals), yellow corals (the third is not real)

We’ve also settled on focusing on shallow reefs that are closer to tourist destinations, close to the beach, easier to access by beach go-ers.

  1. Caribbean
  2. Hawaii
  3. Southeast Asia
  4. Australia

With that all set, we started exploring the art direction of the product, creating a storyline, creating a style guide, mock up some lo-fi digital illustrations, and so on.

On day two, we set ourselves out to create an objective: communicating a product that is based on EAT and FEED principle, we began ideating for some potential ideas of how the packaging of our product should look, what shape or form it should take on. I think most of us started looking at sustainable packaging, anything that’s NOT plastic. We added different photos of packaging to our mood board. We came up with crazy outrageous ideas such as tuna cans, Ben and Jerry’s ice cream jugs, milk cartons, fish oil capsules, vitamin jars, and so many more!

Eventually, we started discussing about popsicles, and idea I actually came up with (and am pretty proud of).

So why popsicles? It’s a typical refreshment anyone including tourists can enjoy by the beach. What if these refreshments meant for humans can also act as nourishment for the corals? Popsicles can take on so many colors, perfect if we want to communicate our product with colors. We started to ideate upon what part of the popsicle should be used to nourish the corals.

We had ideas such as licking away the first layer of ice cream and exposing the layer inside which would actually be sunscreen that you can rub on yourself, and then the sticks can be tossed in the water as nourishment (they can be left by the beach as well and get flushed in the oceans, they’re biodegradable). Ultimately we moved on from the concept of sunscreen being incorporated in our product, as we would simply like to create a food product for us AND the corals.

Brand name: CoralCooler

Finally, we have a clear vision on our final product: It would be a Hybrid popsicle, for humans to ingest, but have little bubbles inside (think tapioca bubbles in bubble tea, or fish oil capsules, gelatinous) that are meant to be spat out and thrown into the ocean to nourish the corals. Through appealing to leisure on the beach, our product encourages people to share the experience with the coral reefs by feeding them a part of the ice cream. We are aiming to create a familiar product that is twisted and unique in some ways. Global warming became our new focus, and it perfectly complements the coldness of the ice cream. Global warming is causing our corals to bleach in color, so the metaphor of corals being hot and needing to cool down is a playful way to hint at the deaths of other species.

Visual guidelines: playful communication, playful packaging that has a twist, colors, thought provoking. Helvetica Neue as font (for product website).

Colors taken from pictures of corals, pink-ish coral-y colors, playful and cute

My Role:

My role this week has been more prominent than the weeks prior, I helped establish our main product concept, the ice cream, and was a major part in establishing how the nourishment takes place. I also helped creating some visuals, photoshopping the logo Viviana has made and the product pictures Therese has took, onto real-life photos that boosts affinity to the product (because it’s more relatable when you see it in “real” life), creating these photoshopped photos also helps establish our “world”, our world that such ice cream exists.

My visuals: (using first iteration logo and graphics)

  • Hall of ice
  • Hall of ice 2
  • CoralCooler Ice cream stand
  • Ice cream sales man selling CoralCooler Popsicles

Reflection: Working in a group for a speculative design project is fun, you get to share your ideas no matter how outrageous they are. For this project I feel like we really got to use our utmost creativity to make up products that suit our situation and fit our SDG. An ice cream that nourishes corals? A food product you can have yourself and also share with life under water? Sounds so crazy and twisted but it also kind of makes sense, it’s speculative after all. I also finally got to play with photoshop, haven’t gotten to do that too often in this program/course.

Final Project WII

korneliapappLeave a comment

This week was consisted of two supervisions and additional group work. In addition to all the material we gathered from brainstorming, we also obtained feedback from the supervisors on how to move ahead.

We tried answering our speculative questions and also doing more brainstorming, expanding on issues we’ve found:

  • What would happen if we privatized the sea? People buy pieces of the moon, so why not the corals? Tied to the nature through privatization: people seem to care about their small gardens but not about the rainforests. So what provides motivation to care for the ocean?
  • Hawaii will forbid certain types of sunscreen: Sunscreen became a big thing we discussed about, the cream gets to the corals, and is actually a major pollutant of the oceans.
  • We should take advantage of natural oceanic forces?

By now we’ve begun leaning more towards coral reefs and the preservation of them, corals are the lungs of the ocean and they are in fact living organisms. They’re a crucial part of the ocean’s ecosystem and is an essential part of the underwater food chain. It’s important to not let them die out.

What can we do to nourish the corals?

Post Supervision Monday:

Image result for coral reefs gif

Insights gathered, questions to think about:

  • What do we want to say about coral reefs?
  • Are we too general? Be more specific!
  • Local or global to be sustainable?
  • Territorial aspect: territory is a politically tense phenomenon
  • Set a scope!
  • Create an interesting twists: find things to twist, it’s speculative, don’t find a solution
  • Decide on what seems the most pressing, relevant, current issue of the corals
  • Discursive design is about discourse: what do we want to say with our project?
  • What is the audience? Or are we designing for individual actions?

We thought about trash that nourishes the ecosystem: embedding nourishment into destructive actions, that could be a valid twist, but maybe not provocative enough?

Our discourse (Since we need to be more specific):

Sunscreen from people’s skin becomes part of the ocean’s flora and fauna. It affects life under water: it makes the life under water AND humans sick. We’re getting ourselves sick!

Image result for sunscreen bad for coral
Hawaiian sunscreen safe for use in the ocean, doesn’t damage corals

Then it was time to further develop our concept, creating awareness for sunscreen and how it’s harmful to corals.

Sunscreen🌞:

Image result for sunscreen gif

Objective: Is to inform, so we may offer a new understanding of what sunscreen does to the ecosystem, since the truth is that we do not grasp the scope of how suncream functions in our ecosystem. It needs to be made aware of.

A new understanding for whom? For users of sunscreen (tourists mainly and everyday people who are flushing sunscreen down their drains).

About what, in particular? About how daily practices of using sunscreen let the more harmful chemicals in the product get into the water: through showering at home and also by swimming in the ocean.

Why are these appropriate? Because we want to create an overview of how people’s choices relate to the ecosystem and the overall picture of ocean life.

What is the audience (=people who encounter your work) for the work? For (rhetoric) users of sunscreen (tourists and everyday people).

How is it specifically about development goal as articulated by the UN? UN Goals 14.2 and 14.7 concerns goals about marine coastal ecosystems as well as the effect of tourism on these ecosystems.

Post Supervision Tuesday:

WHERE? We must think of where this campaign happens and is experienced and create a speculative space, or world.

Brainstorm:

  • On the beach: giving away sunscreen to feeding the corals, sunscreen that actually nourishes corals instead of damaging them.
  • Create a culture around it: use a website to create a social network/ map of sunscreen users, a community.
  • A traveling commercial can be utilized.
  • Coral farming: learn coral farming in a summer school?
  • Advertised in cosmetics shop to promote awareness.
  • Install coral reef gardens in pools: feed them, care for them as for your private aquarium, and maybe that creates and incentive to also protect the oceans like your aquarium.

POSSIBILITIES

Highlighting the body as a nourishing medium, by swimming in the water with your sunscreen on you’re also enabling nourishment to the corals

Physically “feed” the corals

By now we’ve had somewhat close to a clear concept of what our product should be. And have created an overview of our concept: Feeding the corals.

Some ideas we thought of were creating a community attached to the usage of the “sunscreen-feeder”, adjusting what kind of sunscreen you need according to the sea you’re swimming in, interactive sunscreen? These were random ideas we came up with.

We also began planning how our final product should be advertised, it should be delivered and shown as a landing page (information page, community page, product page etc.)

We made an information architecture sketch of what pages will be included:

My Role:

Contributed as an individual task of finding and screenshotting pages of real websites that include landing pages, about pages, and product pages. Researched about sunscreen and different coral reefs, what they require as nourishment, what chemicals are harmful to them.

Reflection: This week I couldn’t be present in school because I was abroad fixing private matters. However in the weekend I spent time looking at different website with product landing pages that can potentially be used as inspiration. I also did some additional research on coral reefs and the ingredients of sunscreen and what it is about them that’s harmful for the reefs. This provided insight and assisted moving ahead because we will have a better grasp on perhaps targeting specific area heavy on sunscreen pollution and investigate if it’s because of a specific sunscreen that tourists are using, etc.

Final Project Introduction and Kick-off

korneliapappLeave a comment

For the final project of the Digital Prototyping course, the overall goal is to “generate knowledge in and through a speculative design approach, utilizing digital materials and prototyping techniques around a theme of Sustainable Development.”

The project should be sincere and thoughtful about sustainability, and has the “potential” to positively contribute to society. We are required to work in relation to one of the UN’s Sustainable Development Goals (SDGs).

The 17 Sustainable Development Goals

In the project, we must implement Discursive design strategies (Tharp & Tharp) <<Discursive Design: refers to inquiry that takes materials, media and articulations of designing as its core concern. Here the focus is on how research moves into the speculative.>> to remind and increase awareness, inform, and offer a new understanding to the concept trajectory.

Because the design should be a speculative approach, instead of creating a design to solve a problem, we must bring something up that incites thought and conversation, provides information so the audience can see how the problem really affects them.

Image result for speculative design
Traditional design vs Speculative design

The project should also have an element of fun and lightness, instead of inflicting a feeling of doom. The goal is to provoke a reaction from people!

The goal this week is to dig deeper into one particular development goal, and throughout the weeks, raise awareness about an everyday practice and suggest alternative social future, etcetera. Also develop a user-group, establish to whom this awareness is targeted towards. The outcome can be provocative, even controversial.

What are we creating?

Design an object(s), scenarios, stories, graphic design, logo, text, props. And communicate those via video, logos, copy, design guide, we can even create something big. The object should be discursive, and not functional (Heyer, C.).

For the kick-off week, which I couldn’t participate during private matters, the group settled together and discussed, those who were not present were able to take part in decision-making thanks to the group trying to be inclusive when it came to settling a development goal (though it was determined later on in the group contract that those who are present get to decide and move forward with ideas). The group decided on a development goal then proceeded to create a mood-board with resources.

By the end of this session (the only one this week), we’ve chosen a goal after pondering on SDG goals 15, 12, and 9. The final decision was chosen to be Goal 14, Preserving Life under the Sea. The reasons why we chose this goal was:

  • It’s the least explored area
  • There is a massive amount of unknown materials, creatures, and infrastructure hidden under water
  • Should focus on making the implicit things under the sea explicit
  • Water as a source: this topic relates to the drinking water problem, not so much this specific SDG (more Goal 6)

We also asked some speculative questions :

  • What would happen if we privatized the sea?
  • People buy pieces of the moon, why not the corals?
  • Tied to nature through privatization: people seem to care about their small gardens but not about the rainforests, and the ocean.

Brainstorming prior to supervision next week:

The issues life under water is facing that we have noted down :

  1. The adverse effects of overfishing
  2. Growing ocean acidification
  3. Worsening coastal eutrophication (= the excessive loading of water with nutrients, dissolved substances containing the elements P, N and Si needed by organisms for growth ). In the Baltic Sea, algal blooms and a dead sea floor are becoming increasingly common.
  4. Global trends point to continued deterioration of coastal waters due to pollution and eutrophication. Without concerted efforts, coastal eutrophication is expected to increase in 20% of large marine ecosystems by 2050.
  5. By 2050 there will be more plastic than fish in the world’s oceans. Plastic waste imagery is very much used in the media and social media.

“Unfortunately, much of the world’s oceans are not part of any one country’s territorial waters. More than 40 per cent of the planet’s surface (80 million square miles – seven times the area of the whole African continent) is ocean that belongs to everyone and no one – and hence is largely unregulated. While fishing, environmental, tourist and defense policies all unite to seek to protect and manage the sea close to a nation’s shoreline, beyond a notional 12 to 200-mile limits it is largely a free-for-all. This is where the fish, dolphins and plankton are taking the hit. No one is setting the global rules and few are agreeing on a better way.” (source)

My role:

Contributing to the mood board and noting down issues prevalent in the oceans, brainstormed possible objectives and discover what contextual aspects might be interesting.

My key-take aways, reflection on my practice: This week was heavy on Design research, it is a necessary ingredient for creating, developing, and delivering a successful product. Designers need solid design research to guide their decisions about the product’s interaction framework, feature set, and overall appropriateness for its users (source). That’s why this part (desk research), the early steps in a design process, is so important.

Adobe XD Workshop III: Plugins II

korneliapappLeave a comment

Creating Adobe XD plugins

As of right now, I don’t know if there are any plugins that don’t exist in the Adobe cloud or somewhere on the web that I would want to create. I understand that it’s an interesting concept to be able to customize your own plugin to maximize your workflow on the program. But as for now because I have just gotten in touch with the program and have barely experimented with any plugins, I didn’t get to create one of my own.

Here’s a video that demonstrates how to create an Adobe XD plugin from scratch, here you can see how powerful Xd is, you can even create your own plugins!

If I have more time this summer, I’ll definitely sit myself down and try out some plugins. When I try the preexisting ones out I’ll know what’s missing personally for ME and hopefully give creating a plugin a try as well.

View at Medium.com

Adobe XD Workshop II: Plugins I

korneliapappLeave a comment

Introduction to Plugins

Adobe XD Plugins? What are those???

By incorporating plugins into your Adobe XD application, you’re adding more capability to Adobe XD.

In addition to the general Adobe XD features, the program also features plugins and app-integrations from Adobe and third-party developers. These plugins enhances design workflow by automating complex and repetitive tasks, and enables deep integrations with external tools and services. 

Image result for google maps plugin XD

If you want to incorporate Google Maps in the prototype you’re building, for example, you may install and use a third-party plugin to bring them into your XD project.

Installing a Plugin (👋)

(I’m placing this information here for easier access to this knowledge if I ever need a refreshment in the future)

Download the plugin package. 

If you received a .zip file, unzip the file and locate the .xdx extension in the folder you have after unzipping the file.

Make sure that you have the Adobe XD opened and you are on a document.

Double-click on the .xdx file and you will see a verification panel. Click on the Install button.

If the plugin is installed successfully, you will see the following pop-up.

Experiencing Plugins:

To kick off, I googled essential Adobe XD plugins for designers, and was directed to this page. The plugin that immediately stood out to me was the plugin named UI Faces, not that it was essential or anything, I just found it to be interesting. It is a plugin you can use to generate avatars in any kind of shape, directly into your design project on XD without leaving the program.

Tried it out, looks kind of ridiculous…

This plugin could be useful when mocking up an app or website that serves as an internet forum when icons are commonly used, a user testimonials page, or any profile-based applications where you implement avatars such as ones similar to Instagram and Facebook.

Then I proceeded to explore more plugins within XD at “Discover Plugins”, downloading a few that stood out to me.

You can install plugins easily in XD
Plugins I’ve installed so far

There are so many plugins out there available to use and it’s difficult to pinpoint which ones are essential for better workflow, all I can rely on are google articles that recommend the best tools. And as I move forward with this application I will see which tools I need for more better performance on the program. I will definitely be trying out these plugins and I definitely see a use for them.

Some helpful links for the best plugins:

The Best Adobe XD Plugins for Designers

Adobe XD Workshop I: Wireframes

korneliapappLeave a comment

For the De/Re-construct assignment I utilized Figma to create my final prototype. It’s nice to know that there are other applications out there for digital prototyping purposes. If I had known more about this Adobe application beforehand, what it is and how it works, I might have considered using it for my final reconstruct instead.

I did not attend this workshop because at that moment in time I could not get Adobe XD to download on my computer, therefore I found it to be not so effective to attend the workshop. Now that I have managed to do so, and have consulted my classmates about what went down during this workshop, I have a better grasp on the application and how to use it.

Introduction to Adobe Xd (not xD, 😂):

Image result for xd logo transparent

What is Adobe XD typically used for?

“XD empowers designers with the speed, precision, and quality to seamlessly iterate and share interactive prototypes with team members and reviewers across devices and platforms, including Windows, Mac, iOS, and Android.” (Adobe Help Center)

XD serves as the perfect tool for vector design and in our case as Interaction designers, website/application wire framing. XD helps create simple interactive click-through prototypes, handy for us when we prototype redesigns of an application or creating a new application. Having access to the interface upfront, it’s easy to engage customers and your “audience” to demonstrate how it works in general as well as spot flaws and performance issues during user-testing.

The technique of wireframing in design:

Wireframing is a quick and effective way to identify usability issues early on in any design process. 

A wireframe is like a skeleton of a page (on desktop, mobile, or any other devices). This skeleton is a two-dimensional depiction of a page’s interface that shows the spacing of elements on the page, how the content is prioritized, what functionalities are available, and how users will interact with the site. (Medium)

Five Reasons to use Wireframes (from Medium)

  1. Wireframes are a great tool to get your clients to focus on what you want them to think about early in the design process. 
  2. Wireframes allow you to map out the functionality of the pages, catch problems early, and save time on revisions later. 
  3. Wireframing allows you the opportunity to get to know your client better. You will start seeing patterns in behaviors and motivations the more time you spend with your client. 
  4. Wireframing is a great tool for gathering feedback and figuring out flaws early.
  5. Wireframes are a great way to prioritize content by helping reveal space constraints and designing the hierarchy of elements on the page.

Now that I have a clear grasp of Xd as a tool and wireframing as an important UX design technique, it’s time to address the insights I’ve gotten from the material taken from this workshop.

✍ Insights and other take-aways important to note down:

It was nice to be given an idea of the common industry practices, it’s important and we can apply it in our future work.

From workshop:

  • Single column layouts on mobile applications
  • It’s important to make clear to the users that clickable text IS clickable, otherwise use cards to visualize that the users can click on it.
  • Comment sections should require moderation, otherwise don’t include it
  • Icons in the west are on the left, in Eastern cultures they are on the right <coming from an Eastern country I know this because our text starts from the right and goes vertically instead of horizontally :)>
  • When wireframing, only place components that are needed, there’s no need to make a wireframe (perfect), as long as you showcase the main spacing of elements and what functionalities are available for a clear understanding of what’s going on.
  • Include visual hierarchy
  • Neutral colors so client can’t find fault in something irrelevant (like a choice in color that they do not prefer)
  • Implement icons if it’s important for the interaction.

Other insights:

  • Keep your colors to grays, whites, and blacks.
  • Use a generic font. This helps prevent the user from being distracted by the style of the typography.
  • Showing the hierarchy through simply changing the size of the font and whether it is “regular,” “italic,” or “bold.”
  • Avoid highly stylized graphics and images. Use rectangles and squares as placeholders, adding an “x” through the middle of the box to show where the image will be placed. You can also do the same thing to show where videos will be positioned with a triangle as a play button at the center of the box.