verycybercyber

[verycybercyber]

How do speculative design approaches reveal qualities of digital prototyping practice, and what are these important qualities?

Introduction

Digital practices of prototyping are widely spread throughout the internet’s landscape. From polished-looking application mockups to fully functioning yet continuously iterated web platforms, digital prototyping is ubiquitous in the everyday experience of internet users, either through interactive engagement or simply visual exposure. It is hard to draw a line between a finished product and one still in iteration as these categories overlap and intertwine. Due to such scope and variety as well as for the purposes of this essay, prototypes are to be thought of as genotypes, a term suggested by Dunne (2005). As he writes, the idea of a genotype is an alternative that allows the concept of a prototype to gain a more abstract function. This function can, in turn, draw a user’s attention away from the aesthetics of composition to that of use (p. 90). Dunne’s proposal helps place digital prototyping and its qualities in the light of a speculative design approach. Revealing digital prototyping as a solid medium for speculation is ever more urgent, because, although ubiquitous and often perceived as standardized, it is nevertheless fertile ground for experimentation with different genres of digital media and its audiences. I begin by expanding upon what speculative design is in the context of this essay and go on to apply its perspective on two key qualities of digital prototyping practice: iteration and persuasiveness of dissemination.

Widening the delimitations of speculative design

Speculative design, being part of the critical design phenomenon, should not be understood as based on rigid oppositions between affirmative and critical, “an ideal whose relationship is very difficult to understand from the perspective of real designs” (Bardzell & Bardzell, 2013, “Critical Design is Opposed to Affirmative Design”, para. 4). I wish to instead consider a “more accessible range” (“Introduction”, para. 5) of approaches that would allow for a less mystified view of critical design (Bardzell & Bardzell, 2013) without settling on an ideal. It is likewise important to open up the limits of critical practices when it comes to digital prototyping because of its newness in the realm. An openness to different practices is also significant because this essay draws upon personal experience of carrying out a speculative design project for the first time in a study context and within a limited timeframe of one month only. This group project falls somewhere in-between affirmative and critical. It centered around us building a product landing page for a hybrid ice-cream that can be eaten on the beach or on a boat. Afterward the dye-filled bubbles remaining from it could be used to color dying corals. Not being a rigid opposition to affirmative products (Dunne & Raby, 2009), our result presented itself rather as discursive design. The unusual ice cream is to be understood as a possible utility that could very likely function in the every day life of tourists, yet the discourse it carries is our main concern (Tharp & Tharp, 2013, p. 407). Therefore, a speculative twist of interpretation is this very dissonance that positions our design as more accessible through its perceived mundaneness. Finally, discursive design is defined as an umbrella category including critical design and it supports the argument for a wider spectrum of practices (Tharp & Tharp, 2013, p. 407) and its open-ended delimitations provide a solution to the rigid borders of critical design and suit the nature of this essay.

Iteration as dialogue

One quality of digital prototyping highlighted by speculative design is its iterative nature. Speculative designs are about semantic openness and often intentionally leave gaps in presentation in order to provoke a sense of ambiguity. A theoretical concern with the applications and implications of intentional ambiguity as a strategy for design was one of the key elements in the development of critical and speculative design. Gaver (2000) argued that if presented as possible narratives with a conscious lack of refined functionality, implementation or aesthetics, design ideas remain open to be extended and modified by the users themselves. He suggested that such imaginary opportunities are hard to achieve by completed designs (p. 215). Hence if openness is to be defined as an approach of speculative design, the feature of digital prototyping responding to it is iteration. Characterized by the use and reuse of design patterns and specific communicative stylistic elements, digital mockups allow designers to determine what level of implementation and functionality is needed for developing a persuasive yet open preliminary version of their products. In addition, the ease of testing an idea adds to the iterative quality of digital prototypes as well. In our group project, user testing started out by trying out the prototype’s communicativeness. We displayed visual mockups, infographics and photos one after the other as the person at hand progressed to interpret the discourse deeper with each new visual clue. These probe-like initial sketches led to a recognition of different levels of interpretation emerging in the testing. We then used them when structuring our speculative landing page. Thus iteration builds upon engagement with possible audiences: as Dunne (2005) argues, speculative prototypes become “testpieces” which, through use or scenario, explicate beliefs embedded in the everyday and transmitted through electronic products (p. 145). Following a speculative approach, digital prototypes are facilitative because of reoccurring iteration. Each iteration facilitates a response, a dialogue with potential users. These dialogues, often heavy with frustration and estrangement, can reach an almost poetic level.

Dissemination as persuasive framing

Persuasiveness through dissemination is another quality inherent in digital prototyping. Being so ubiquitous, applications and websites have an established place in the everyday life: screen interfaces coupled with internet access allow for momentary transmission of digital experiences. Dissemination as a means of making the fictional appear more mundane and real holds potential for digital practices to take a speculative turn. Digital prototyping can, for example, be inspired by the history of avant-garde design practices which have pioneered speculation through mainstream media. As Tharp and Tharp state, “Memphis may be the first significant product-design related movement towards discursive design” (p. 408, 2013). Here Rossi’s (2013) outline of the post-war Italian design history proves relevant in understanding the role publishing played in Memphis’ practice.  Mid 60’s saw a crisis in the economy and a growing disappointment with consumerism.  Most notably, as stated by Rossi, this gave birth to the first wave of Italian avant-garde and “In the shift from market-driven to conceptual-oriented design, all that was needed was something that could be photographed and disseminated through a magazine, however fictional it was” (p. 35).  By publishing photographs of small-scale prototypes in magazines, Memphis created a fictional impression of their realness (Rossi, 2013). Similarly to Memphis, we in our project drew insights from the current western economic reality and discussed how it shapes the commodification of digital products and services through the use of template-based aesthetics. We decided to go with a landing page template in order to achieve a high level of similarity to real product pages yet worked to present an inherent strangeness through the visual content. We were consciously ignorant of the many other possible futures that are available for those not part of the socio-economic class we are targeting, the tourists. Therefore it must be noted that dissemination always implies a specific audience. By choosing particular media outlets or templates designers frame the immediate public of their prototype. As Tharp and Tharp write, although Memphis did articulate a concern for its impact on the wider cultural landscape, they focused primarily on the impact on design practice. Authors suggest that the collective’s effect on culture as a whole was a consequence of that (p. 408, Tharp & Tharp, 2013). Hence the persuasiveness of dissemination can encourage digital design practitioners to consider their experimental approaches of media as ways of targeting specific publics and use prototypes as a “publicity plot” (Rossi, 2013, p. 41).

Conclusion

In conclusion, speculative design approaches allow designers to see the practice of digital prototyping as generating knowledge beyond pure functionality or visual aesthetic. Although omnipresent in our daily lives, digital products seldom attempt to question or inform in ways beyond pleasing the user. Potent as it may be, the digital realm lacks criticism from within and is not as established in the sphere of speculative practices as, for example, product design. I suggest that this need not be definitive. As the qualities of iteration and dissemination demonstrate, digital prototyping is a rich toolkit for generating knowledge about working in a speculative manner. When it comes to iteration, open-ended prototypes can become instruments for facilitating meaningful discussions around values implicit in our cultures. Here user testing transcends the goal of optimizing the product and is instead a valuable space for dialogue. What is more, the ease of disseminating digital prototypes by embedding them in the everyday experiences of internet users can, in turn, shape these discussions. By consciously framing their prototypes through specific media genres designers are able to reach target audiences in an instance. Finally, these two qualities of digital prototyping discussed throughout the text are just some of the many that a speculative design approach can foreground. If approached as an extensive toolkit, its many important features could provide a strong foundation for emerging criticism from within the practice itself.

References

Bardzell, J., & Bardzell, S. (2013, April). What is critical about critical design?. In Proceedings of the SIGCHI conference on human factors in computing systems (pp. 3297-3306). ACM.

Dunne, A. (2005). Hertzian Tales: Electronic Products, Aesthetic Experience, and Critical Design (MIT Press).

Dunne, A., & Raby, F. (2009). A/B, a manifesto. Retrieved June 2, 2019 from http://dunneandraby.co.uk/content/projects/476/0

Gaver, B., & Martin, H. (2000, April). Alternatives: exploring information appliances through conceptual design proposals. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp. 209-216). ACM.

Rossi, Catharine (2013) From Mari to Memphis: the role of prototypes in Italian radical and Postmodern design. In: Valentine, Louise, (ed.) Prototype: design and craft in the 21st Century. London, U.K. : Bloomsbury Academic. ISBN 9780857856821

Tharp, B. M., & Tharp, S. M. (2013). Discursive design basics: Mode and audience. Nordes, 1(5).

Tonkinwise, C. (2014). How we intend to future: review of Anthony Dunne and Fiona Raby, speculative everything: design, fiction, and social dreaming. Design Philosophy Papers, 12(2), 169-187. 

[verycybercyber]

Re-doing the analytics exercise

After receiving feedback which pointed out the many pitfalls of my last analytics exercise, I have decided to re-do it. For it, I decided to start by having a strong focus on the usability of the website instead of getting lost in data as I did before. I also realized that a simple insight still goes a long way. I also followed the structure provided in the analytics exercise brief as I lack experience in structuring and analysis data-based insights.

Customers from all continents show a significant drop-off rate in the search section page. According to user flow data based on 11.2% of sessions (the reason for this percentage and not all 100% is data sampling), both 1st, 2nd and 3rd interactions are marked by around 1/3 of users who enter the search page drop-off from the store.

1st interaction:

2nd interaction:

3rd interaction:

Despite this persisting drop-off rate, the store does not provide any additional guidance to people when their searches deliver no results. There is no suggested spelling correction nor suggested  items  similar to the term typed in, nor similar features that could ensure the user flow would continue further.

Taken that this might be the reason why the rate is high, my suggestion is to make the search results page more responsive when no results are found. It can be done by including features that could guide the user. I suggest creating an A/B testing that would allow discovering whether an improved version of the search page would reduce the drop-off rates. Examples of features to be included are:

A) Adding a feature which would suggest a correct spelling of the search word/phrase

B) Adding a feature which would suggest items relating to the search term

This analysis was based on data from the period of June 3, 2018-June 3, 2019 and encompassed  97K sessions in total.

[verycybercyber]

Finalizing the Final project, working on the report, user testing

screen capture of the report

During the final days of our project, I focused on phrasing the portfolio page text. Previously I and other members added to a coherent text of around 1000 words and so I worked towards clarifying the key points and re-arranging the whole into chunks that would meaningfully function on the website. My work was not visual thus I did not produce any supplementary material and stuck with text. It was a struggle to rewrite a text that was written before we decided to switch to the concept of ice cream containing only coloring and not nourishing bubbles. The whole process description I and another group member worked at writing down before seemed pointless at first. 

We also lacked user testing of the page because or website was coming together quite late and all we had till now was partial insight based on materials for the page. Nevertheless, I added to the group by sharing the findings of the testing described in an earlier entry and also assisted in transcribing quotes from one testing done the day before the final presentation. One interesting insight from this test was that while thinking out loud the person stated: “I don’t know how the person is gonna eat it, It is very strange that you have to spit the bubbles out”. Ice cream bubbles were one aspect that creates estrangement from the product and we wanted to convey it. Yet we did not explicate nor intentionally point it out in the visuals due to a lack of time and getting lost in the process of choosing what is it actually that we are aiming to convey and how.

[verycybercyber]

Final decisions and thinking about discursive design

Ice cream is part of the summertime vacation experience: hot summer days call for an easy refreshment, especially in the backdrop of global warming and ever more present heat waves. With our speculative product landing page, we aimed to show users the story of a new kind of beach experience; one enriched by an inter-species snack that makes for a somewhat estranged entertainment.

After the supervision we were encouraged to be less polished in our product website: through our design and aiming for a playful look the twist and dissonance of artifact and scenario became less direct. As suggested in the supervision, went with changing our product from containing nourishment to containing dye for corals to be colored. 

My role in this process was mainly overlooking the roles we have in the group and adding to the initial design steps of the website before this turning point in the supervision. This week i stepped back from visuals and focused on starting the report portfolio page and wrote the initial draft of a coherent text that follows our process. This I did by working through the notes from our meetings and supervisions. I then moved on to picking out shorter paragraphs and visuals to be used for the report website. Together with that I started looking more into contextualizing our concept and design work in relation to discursive design.

Contextualizing our design in relation of Tharp & Tharp (2013, 2019)

Our design project presents itself as discursive design: it is to be understood as a possible utility that could very likely function in the everyday, yet the discourse it carries is our main concern (p. 407, Tharp & Tharp, 2013). 

Our design is centered around digital renderings, not an artefact per se. We communicate a speculative scenario of a different culture around beach tourism activity, not the packaging as such. Visuals and packaging are diegetic prototypes that present the user with a specific message / discourse / rhetoric that our project aims to get across

Principal artefact: ice cream

Depictive artefacts: visuals

Explanatory artifacts: the text, copy  and infographics

Tharp, B. M., & Tharp, S. M. (2013). Discursive design basics: Mode and audience. Nordes, 1(5).

Tharp, B. M., & Tharp, S. M. (2019). Discursive Design: Critical, Speculative, and Alternative Things. Design Thinking, Design Theory.

[verycybercyber]

In the making

This week our project has entered the making phase, and our objective shifted from making a product page for a hybrid sun cream into communicating a product that is based on both humans and corrals eating it: ice cream that features bubbles of nutrients to be thrown to the ocean to nourish the corals and the life underwater. I believe this change came to be from an advice we received on monday during the supervision: we were advised to ideate on the sun cream packaging that would look like a food one. After intense discussions about this, we ended up dropping the sun cream idea, partially due also to the research we did about how any substance that blocks UV light is inherently damaging to corals.

My addition to the making phase was in the shared ideation and on tuesday I focused on the logo and infographics drafts, which then were passed on another group member who will use them to make more developed graphics. 

Our product idea is about a pink ice cream for cooling down yourself and “cooling the corals” by nourishing them and making them withstand global warming. Through appealing to leisure time on the beach and a casual want to relax with an ice cream on a hot summer day, our product encourages people to share the experience with the coral reefs by feeding them parts of the ice cream meant to nourish the life underwater. 

1st iteration of the logo for the “brand” we are prototyping

a quick sketch illustration to be used for creating an infographic on the benefits of the nutrient bubble balls found in the Coral Cooler ice cream

User testing

I added to the project by user testing which I did by employing only the initial sketches and sending them to the other person one by one while either messaging or having a video call. The insights from the 2 testings I did provided insight on what levels of understanding could possibly be common in our audience: ice-cream as a cooling product for the ever-warmer oceans and the bubbles as something inherently good for the corals came through as the main findings. I was encouraging my group members to try out this method of user testing as well but they did not proceed to do so thus we are significantly behind on user testing at this point in our project 

The images(made by other group members) and their sequence for user testing were:

The 2 remote user-testing cases I carried out proved that the 1st picture had a clear product advertisement purpose. The speculative aspect came through mainly because of the ice being depicted on the bottom of the ocean: it is here that one of the interviewees pointed out: “oh, it is cold on the ocean floor just like ice cream is cold”, which was a new and interesting insight for us. However, the main revelation of the purpose of our product came through in the 2nd picture. Then both of 2 separate individuals interviewed were sure that bubbles inside it are meant to do good for the corals in some way: one suggested that it cools down the corals while another guessed it was nourishment of some sort. Finally, the 3rd image provoked the second person to say the word “fertilizer”, thus our message appears to be getting across. 

[verycybercyber]

Ideating on the “what” to make

Today we decided on our discourse and our objective

Objective: Informing: Offering a new understanding of what suncream does

Discourse: Suncream from people’s skin becomes part of the ocean’s flora and fauna. Suncream affects life under water: it makes the life underwater AND humans sick.

By choosing this we want to generate knowledge about working in a speculative manner and an understanding of how people relate to the ecosystems and what the sustainability goal of preserving life under water means in this concrete case, where a seemingly harmless and even protecting action of applying sun cream disturbs and kills ecosystems.

[verycybercyber]

Brainstorming 1

Today we spent the morning ideating on the various takes on ocean life preservation we discovered through desk research. Discussing ocean as local and non-local territory, questioning what is it that humans actually want from the ocean as part of the earth’s ecosystem. Here our central concern was looking at the inevitable interconnection between humans and the ocean on the systematic level (ecology and infrastructure-wise). From there few aspects were argumented for as plausible areas to work with.

One aspect we discussed related to the micro-plastics found in our oceans: not only the fish and sea animals suffer from it. Humans, who eat these creatures are also likely getting their share of micro-plastics that are too hard to filter out through regular drinking water pipe systems. Another aspect is the fact that humans overfish the predator fish species (especially in Sweden) and in thus disturb the ecosystem naturally present in the sea. These insights might be an opportunity for generating design knowledge about such systematic connections and thus pose the question about our place in the eco-chains of our planet: both land and ocean. 

Before the supervision we settled upon the topic of corals. Our brainstorming discussion took a turn towards the multiple roles they play in the ocean’s and earth’s ecosystems and we decided to stick with it. Supervision that followed made us question our choice, although it seemed a sure one prior to that. I consider the advice we got to pursue an honest, authentic and discursive path a valuable one. I am learning that the speculative approach is about more than vivid and imaginative scenarios, although these are the ones that came up most in today’s session. What is needed is thus a thoughtful consideration of our audience and message.

[verycybercyber]

“Make your own plugins” workshop

Original of the draw many lines tutorial

My re-workings

Using plugins is something I knew about from following other designer’s practices online yet never tried myself until now. I find the self-made ones provide more agency over the outcome and a personalized feel to an extent. When it comes to my practice, using self-modified javasacript extensions intrigues me: having worked with art direction and having tipped my toes in the graphic design field this seems like the next step to developing my visual composition and design skills. I tend to work focusing on grid and simple shapes and such plug-ins like the ones Adobe xd  provides can be limiting and often produce UI that follows “the norm” of a polished bootstrap website. Ganci and Ribeiro (2016) describe such visual style as a  type of “visual polish that has become all too ubiquitous across the modern web.” (p.99). While there is nothing inherently wrong with such practice, I myself aim to find a meeting point between an intuitive UI and a more brutalist web design approach. Although a brutalist web interface can also be described as a certain manifestation of ignorance towards broader issues of usability and accessibility (Ganci & Ribeiro, 2016, p. 104), implementing details that twist the UI a bit is something I appreciate and learn about more in the future. And javascript-based plugins seem a plausible place to start.

Ganci, A., & Ribeiro, B.(2016). On Web Brutalism and Contemporary Web Design. Dialectic, 1 (1), 91-110. http://dx.doi.org/10.3998/dialectic.14932326.0001.107

[verycybercyber]

Final project week 1: setting the goal and dipping my toes into possible speculative poetics of the ocean

The goal

In our group we discussed the possible development goals to work on. We agreed upon the Goal 14: Conserve and sustainably use the oceans, seas and marine resources. We reached this decision by discussing which goals are relevant for each of us and then found connections and overarching concerns between them. Lastly, we voted and this goal was chosen. In an hour-long group work discussion, we suggested that this sustainable development goal is in many ways the least explored area in the sense of media representations of sustainability. In addition, it poses us with the human-nonhuman interaction question, a philosophical concern for the life under water and how humans relate to that which is so vast and mostly unexplored. Seas and oceans are inhabited by unfamiliar creatures and are home for widely unknown materials and infrastructures, such as, for example, the internet cable networks. Therefore making the implicit things inside the sea explicit is what our project will most likely aim for. 

The poetics

Here I return to the human-nonhuman and recall how Schmeer (2019) describes human-centered design as lacking in terms of the non-human perspectives. The author states that such ways of design practice create “unsustainable modes of production and consumption leaving ecological or non-human perspectives unaccounted for” and she sees it as constituting social inequality and “suppressing radical, imaginative, and poetic ideas by being too consensus-driven”. Perhaps this is why the ocean seems such an unknown teritory, as it is indeed a nonhuman structure, an experience of vastness and an ecosystem on its own. Schmeer (2019) encourages a speculative turn in design that draws from cultural theory and architecture practices: xenodesign. A design method where “all objects — living and nonliving entities, sometimes even fictional objects — are considered to have the same degree of being-ness in the world.”

Schmeer, J. (2019). Xenodesignerly Ways of Knowing. Journal of Design and Science.

[verycybercyber]

XD workshop April 24th

In the workshop we focused on wireframing a social movie app. For this we drafted screens for different feeds:

Wireframe draft, results of the workshop:

PROFILE

MOVIES

BUDDIES

[verycybercyber]

Google analytics workshop (OLD, find the new one on top of the page)

According to the audience-related data, users within categories other than  Affinity categories or In-Market Segments use. These are more granular user categories. Based on data from a one year period (time period:  Apr 22, 2018-Apr 22, 2019), the engagement of these users with the site has decreased:

Out of the 3 most popular interests of this group, the “ Arts & Entertainment/Celebrities & Entertainment News” and the “Online Communities/Social Networks” make up a significant amount of users:

In the first category top revenue providing users come from the 25-34  (49.12%) and 35-44 (30.19%)  age categories. So do users from the “ Arts & Entertainment/Celebrities & Entertainment News “ category:  25-34 (50.94%) and 35-44 (29.58%).  

image: Online Communities/Social Networks most shared url’s

image: Arts & Entertainment/Celebrities & Entertainment News most shared url’s 

Data shows that both user groups share mostly the url of the site’s home page and a specific brand category. This suggests where social media icons can be placed in the site and goes deeper than a trivial insight about the site not having any. Keeping in mind that the categories of users who’s data was discussed here are active users of social media and are exposed to media news, I suggest that a UI that would guide the people producing content for social and news media would benefit the flow of visitors to the site in these granular user groups and presume it would allow the site’s links to spread within potential new user groups.

[verycybercyber]

Prototypes and data

Data is a powerful tool in quantitative analysis and digital design where products are seen as continuous prototypes to be optimized. Tools themselves are often said to be neutral when it comes to ethics and analytic can in fact become valuable instruments for continuing the research that starts with an in-depth interview on a qualitative level.

On one hand, we have A/B testing that spans from button name variations to different features. On the other hand, we have Amazon's Alexa leaking private conversation’s and sent it to random contacts. Here “data” is on a qualitative end of the spectrum and leads to a concern for personal privacy. In addition, such recordings are valid as real-life qualitative studies, but with a lack of transparent consent from the person involved.

[verycybercyber]

Critical (of) what?

Being interested in their proposal for challenging design as a consumerism-serving practice, I have been looking into the sphere of critical design for around almost a year now. Recently I have been seeing more and more constructive criticism of the agenda of a critical design practice. This led me to question the premise of the discipline and its promises: Is speculative design too meta-design? Too introspective? Too western and academic? What exactly is it critical of?

Cameron Tonkinwise (2014) has published a review on a relatively recent book by the creators of the field, Dunne and Raby. He highlights that “the book explicitly names homogenizing global capital as what design must be critical of” (p.172).

“This hypothesis, that design can and should correct the paucity of futures available to us, restoring to us our capacity to vision, depends on the claim that “we” currently have constrained futures.”  (Tonkinwise, 2014, p.174)

“So why? In terms of aiding our capacity to vision and evaluate futures collectively, why design, why product design, why completed yet nonfunctional artefacts, and why exhibited (and photographed)?  How does this enable us (“we”) to widen and deepen our engagement with the future?”  (Tonkinwise, 2014, pp. 175-176)

Who’s future is it?

Critical design seems to follow quite an individualistic image of the designer when it comes to thinking about the broader picture of humanity as a whole. My personal concern is that of the western modes of thinking being so deeply rooted in our imagination that alternatives are themselves fitting in this very narrow scope of rationale.

I consider that community-centered and grass-root organization based critical design might be a way to go. It is happening as authors discussing participatory design practices do draw upon the significance of collective storytelling.  Here is a scheme that  Sanders (2013) uses to illustrate the process of collective narration. For the author, both making, enacting or telling are all parts of the participatory prototyping cycle. I believe that collective fictionalizing and storytelling are an area that has an overlooked “critical design” element that proves important when the subjects in questions are the futures of people and not the selected few.

Sanders, E. B. N. (2013). Prototyping for the Design Spaces of the Future. Prototype: Design and Craft in the 21st Century, 59-74.

Tonkinwise, C. (2014). How we intend to future: review of Anthony Dunne and Fiona Raby, speculative everything: design, fiction, and social dreaming. Design Philosophy Papers, 12(2), 169-187.

[verycybercyber]

Re-constructing +user testing goals

LINK TO THE PORTFOLIO PAGE https://julijarukanskaite.wixsite.com/de-re-construct

Credits: World globe Icon made by https://www.flaticon.com/authors/turkkub  from https://www.flaticon.com and is licensed by Creative Commons BY 3.0

Images:  Unsplash, copyright free images

The first thing i choose to attempt at changing was the drop-down menu. Although useful in the sense of saving screen space, it might come off as not transparent enough when it comes to the user goal i set at the start of this task. Here I choose to try to change it with a tab design pattern. The goal is to show the user that they are in only one of the tabs and they have the right to choose what tab to view. Although not perfect in context of the tab names being quite long, this is still the same in terms of saving screen space. I finally decided upon using the same icons the original app uses to indicate the tab sections instead of using full titles.

+ when it comes to the tab design pattern, badoo does use it in its discover page already: 

The second thing i changed the design pattern of is the strangers online section on the top of the screen. Instead of having a carousell design pattern I chose to put the icons of users online into a simplified thumbnail pattern where instead of going directly to the person’s profile when a thumbnail is clicked, an in-between page would be available to scroll through the people Online. I believe that this way not only is the discover section clearly separated out of the chat screen: it takes up less spaces and due to smaller icon size and generalized nature of the thumbnails proves to be clearly different when it comes to reading the screen. 

Here I have decided to also design an additional screen for the in-between of chat and user profile so the user testing proves more persuasive and precise. I have copied the pattern another discover page that shows both non-online (yellow dot) and online people. 

I simply replaced it with only people online. Here the user can get a better view of the accounts suggested but is not obliged to jump into someones profile straight away. It must be noted that I am redesigning the experience of navigating the chat section thus considering the user testing this page is needed:

This section with “discover” thumbnails does suggest an affordance as a button as I intended

User testing results

For user testing I used Adobe xd mobile app that accessed my prototype and allowed it to be tested in the real-life scenario of using a smartphone. I tested on 3 different people that are my flatmates.

For the user testing my curiosity was focused on how users interpret the visual hints in terms of the menu tab, but more broadly I was concerned about how people would interpret the chat screen and people on it, what sort of intentions they perceived the app to be offering.

My method of testing was based on “thinking out loud” and observation. I provided the user with a task of finding a chat with one of their matches and observed their actions of choice in pursuing it while listening to their thinking out loud. After that I asked broader questions and observed if the person would spot some features they did not before, thus pointing out the learnability aspect of the redesign. Then we kept on talking as i followed up on the observations i made and asked the people to explain their motives in more detail. Finally, i opened the actual Badoo app and let the user see and try the original in order to provoke some comparisons between the change in menus.

MENU TABS

Both observation and thinking out loud revealed that all of the users testing the prototype choose to follow the icons. In terms of the goal being to find a chat window with a match, the speech bubble icon proved very transparent: ”it is ubiquitous”, one of the people claimed in the follow-up talk. 

However, all the people tested expressed a level of confusion between the “All” tab and the chat tab:  “all and chat tabs seem to have a similar function”, said one informant. 

After testing all 3 seemed to find the tab menu,, besides the confusing all-chats difference, simple and informative: “this is what you need to see all your options, it’s a good thing that you see all your options: it makes sense to have them as long as there are not too many (tabs)”.

ALL AT ONCE: PERHAPS NOT SO BAD? A question of the agency overexposure

2 out of 3 users i tested on had no previous experience in using dating apps and seemed satisfied with being exposed to all of the possible chats to happen: people online to discover, people who favorited etc.:“ In this case you see that people basically decided and you have a chance to decide on who to like. So it is not a bad thing.”, said one informant - he guessed that is a common logic of dating apps and in his opinion that serves the purpose of getting easy and quick matches. Another person had a similar opinion: “They have to present you with people, cause it’s the starting point”. However approving of these aspects, one of the 2 positive responses was surprised by the logic of favorites / favorited being in one section: “Oh, but those are also the ones that liked me”. This reminded me of my initial concern, and I believe if I were to iterate on the menu in more detail, this would be one of the things to focus on to provide more clarity and hopefully more agency over the understanding of the structure of the menu.

The 3rd person has been using dating apps some time ago but did not “think-out-loud” about having all the different options available. She did express confusion about the discover option:  “ where is my agency in choosing who I get recommended?” she asked.

DISCOVER / STRANGERS ONLINE

This feature proved puzzling: while 1 out of 3 users did “think out loud” about noticing the green dots indicating all icons as being online and guessed these were people online to discover (as was intended), the 2 others both thought the discover option was a display of their matches  /chats, and one of them added that he considered it to be a search option for exploring you chats: “But how do you find people?”.

[verycybercyber]

Wireframe of De-construct

[verycybercyber]

Finding order in chaos

The initial chat screen

Wireframing revealed that there indeed is a somewhat visible hierarchy of the messages and notifications on the initial chat page. In the wireframe above we can see that one person’s chat window is noted in bold: both their name and the message. What follows is the message request above it, where only the “new message” text is in bold whereas their name is not highlighted. The other people on the chat window seem to be marked only by orange circles that indicate some notification I have not opened yet, be it a message or the action of “favorite-ing”.

Here I noticed that the people who “favorited” me are in the same regular boldness as a person i previously had a conversation with, although the latter is what my user goal is concerned with. 

The menu

The menu is based on the “Vertical Dropdown Menu” Design Pattern.

This pattern proves useful here, as it is a chat window and it is the communication that is at the center of attention. A small arrow down on the right on a long gray rectangle indicates a possible “drop-down” affordance of the figure. This design pattern saves space. However, it is an in-between for a user who wants to choose only the “Chat” section and not encounter other message suggestions etc. Perhaps there could be an extra indication or a quicker way to reach your “real” chat section? What does the app imply when everything on the drop down menu is also equally timid color-wise? Of course, the sequence of the drop down section still creates more or less a hierarchy of the sections.

The menu option provides a division of the many notifications:

-Chats (this option is notably on top of the menu yet not in bold or highlighted anyhow

-Online

-Visits

-Likes

-Favorites

Chats section

Going into the actual chat window

[verycybercyber]

Bits and pieces of the chat window

1. The strangers on my screen

The first thing I noticed when opening the chat window were the icons of profiles i don’t know at the top of the screen. Not understanding what it was, I did not give it a second thought. However, I later opened Facebook messenger and saw the same design pattern: people’s icons. But here the context of the chat is different: these are the “stories” people I know. So what is the purpose of this similar looking pattern on Badoo? What does it add to the experience of the app? I believe this pattern is displaced here: the people I am seeing online are not my matches, neither did I indicate my interest in them anytime before. This seems to be the app itself “suggesting” random people for me.  Does it follow my choosen user goal to possibly start a conversation with one of their “matches”?

The second thing to notice on the screenshot on the above left are the notifications of people “favorite-ing” my profile. Why are they in the chat window? Of course, this is perhaps useful for hinting at a possible conversation with these people too. Still, how does this help the user to start a conversation with their matches (=people who they have themselves swiped right on?). Clearly, this design pattern proves useful in filling up the screen and providing a solution for a user who intends to simply chat without too much emphasis who is their respondant or whether they intended to connect to this person prior to the “favorite-ing” notification.

initial state of the screen -> menu-> favorited(?) only

2. Everything at once?

Why does the user see all this extra information (people online, people who favorite you) instantly when entering the chat screen? Is this intended to facilitate more possibility for conversation? The screenshots above demonstrate a flow that does allow user agency to maneuvre the screen and filter out the possible information.

A thing I observed is that the section which filters out people that have “favorite-d” you is called “Favorites” although I did not indicate this from my account. Again, a hint at the role of lack thereof of it when it comes to being exposed to the people for possible matches.

3. Message request 

I am unsure about this design pattern. It seems appropriate as one does not see the message until opening the message request. I am adding it here as it might prove relevant later on.

Question for further ideation: Are these patterns platform-appropriate?