Posts about “Digital Prototyping”

1. Valentin Salja on Unsplash

   Getting Closer Faster

   What does digital prototyping practices have to contribute to speculative design approaches?

   Introduction

   According to the definition used by Malpass (2016), speculative design is a genre within critical design that focuses on socio-scientific and socio-technical concerns. It is used either as a tool to look at what effects emerging technologies could have on everyday life or to reimagine how current technology might be used. Speculative design approaches can be used to create a basis for discussion around the political implications of technological advancements. As with all critical design, it’s purpose is to engage with an audience to create discussion and not to serve as functional commercial design.

   Prototyping is the practice of quickly developing prototypes, getting data from testing it on users, using the insights to develop a new prototype and then repeat the process. In a double diamond approach to design we can use this process to explore different possible solutions in the divergent developing phase or to refine our design in the convergent delivery phase. It’s an iterative process where you want to explore your design space little by little to be able to draw conclusions from the latest iteration.

   Digital prototyping practice is designing with the same approach but you use digital tools and delivery methods. With digital prototyping you can get what looks like very polished designs in a short time. You can develop websites or interactive mockups in a fraction of the time it takes to make a convincing physical prototype. As digital artifacts are by their nature immaterial and infinitely copieble they are easily disseminate through digital networks like the Internet, digital cinemas or email. With this approach designers can more quickly iterate and test the concept to see that we are hitting the right marks.

   What do digital prototyping practices have to contribute to speculative design approaches? How can we use our prototyping practice, especially our digital prototyping practice, to create better and or faster speculative design? In this essay I will argue for how digital prototyping could help projects like the Gaver and Martin (2000) Alternatives workbook of alternative design concepts by engaging more with their intended users and to reach a larger audience. I will use the work we did with iSweat, a digital speculative prototype, in the course as a base for this argument.

   iSweat

   As part of the Interaction Design programme at MAU we were tasked with creating a digital prototype highlighting one of the United Nations’ (2021) Sustainable Development Goals, through a speculative design approach. We were to communicate the problem in a novel way where users were to experience the prototype and not just read about the sustainability goal. We had four weeks working half time on the project.

   The speed of digital prototyping made an iterative design process possible, where we could go through different versions of the service every week and keep what we liked and develop the concept into something sharper. The digital nature of the prototypes made it possible to user test quickly and often with a minimal setup as it was all online. These qualities would make it possible for us to develop the project week by week and

   

   Our group designed a service where we merged a fast fashion clothing store with the trend of “gig economy” contract workers to highlight the trouble of workers rights and sustainability in production. The service was presented as a digital prototype of a web shop, an app for gig workers and a website presenting the company. The webshop would ask consumers to not only choose a garment but also what worker should sew the garments (Fig. 1). This introduced a pricing comparison and competition and consumers would have to choose based on just an image, rating,name and price. We also introduced sales on some workers, highlighting their exposure to global warming.

   The Alternatives Workbook

   Gaver and Martin developed the Alternatives workbook in 2000 as an inspiration and base for discussion about Information Appliances presented to their partners at the Appliance Design Studio. They made conceptual design proposals for ten devices that would highlight other values than productivity, efficiency or entertainment.

   The proposed products span a wide variety of usage fields and go from speculative to critical design. They are presented as the work of two people over the period of a couple of months and give the impression of being fast ideas that inspired new ideas and you can see how there was a flow of themes being explored.

   As a workbook they are presented in their final form with seemingly little involvement from any other people and with little iteration.

   Digital speculative design

   How speculative design could benefit from digital prototyping

   Speculative design is about engaging with an audience to create debate. Using digital prototyping techniques could benefit speculative design and make it easier to approach the audience where they are instead of bringing them in as with a more traditional exhibition based approach.

   Digital prototyping facilitates testing the design on users, wether it is on an audience or the designer exploring the design space, making it more affordable and quicker as you can distribute the design digitally and update the design between sessions in a way you could only do with very lo-fi physical prototypes. Engaging in this way with the audience during the development of the speculative scenario can benefit speculative design as it gives the opportunity to gauge how successfully you communicate your message.

   When presenting a message or a novel idea like a critical design project, it can be beneficial to communicate in a more affective way through real or rhetorical use, letting the audience use the design, as an app or website, or showing it in use through video or similar digital media. Presenting the speculative design project as a digital product gives an opportunity to approach your audience like users of an experience rather than a passive readers or viewers of an exhibition. Letting the users experience a speculative design project enables you to give the audience a more visceral reaction to the scenario and can lead to a deeper understanding of the concept.

   In our project it was evident to us that the act of selecting children to sew your clothes gave a viceral reaction in the users and we could use that insight to focus our message. This reaction was not evident when discussing the concept and needed to be experienced. Without a digital prototype we could not as easily have tested it on users as many users and in different locations. Gaver and Martin could have used a similar approach to dial in the message they wanted to deliver to their partners. Their approach is a more designer centric approach than ours and when working with abstract and potentially provoking subjects, it could benefit them to test it on the audience during development. It would not have been impossible for them to do so with their approach either, but as they worked part time for a limited period of time, it would have been a bigger burden to print and send via post or to gather users in their studio. A digital approach would also let them reach a larger audience than the one they intended with their book as distribution would be close to free.

   What are the pitfalls of digital prototyping within speculative design?

   When engaging with users you always run the risk of exposing them to unethical practices. Many speculative projects are best to be viewed under the guise that they are real in order to be impactful and some designs might be hard to experience in an ethical way, great care has to be taken to not expose the audience to harm. If you distribute the design digitally to contexts where you have less control over how the design is experienced the problem is more pronounced. Several critical design projects have become viral, like Facezam (Bonazzo, 2017), and show the potential for harm when the audience is unaware of the critical aspects of the design.

   Even though digital prototyping can accelerate the prototyping process it has some limitations. All digital prototypes have an overhead and are never as quick as paper prototypes to get started. Tools have to be setup and you need some degree of technical knowledge, especially for more advanced prototypes. It is not to be used as a first step in the prototyping process as many insight can be gained with a faster lo-fi physical prototyping approach.

   Conclusion

   Digital prototyping practice can contribute to speculative design but does also pose risks that designers have to be aware of. In our work with iSweat we used that practice to good effect and the project would not have come nearly as far without it.

   As we experienced in our work, speculative design can benefit from digital design practice of easy and quick iteration to sharpen the message it communicates. The iterative process led us down paths we never could have foreseen and sped up the workflow significantly as testing could be done at the same time as parts of the group worked on the design. The interactive elements that our digital prototype had afforded the audience, as users, get to feel what the proposed design entails and let us user test and gain insights into what we wanted to iterate on. It will also give the users a more empathetic understanding of the proposed design as they can see themselves in the situation more easily. In our example we could clearly see that our audience had a greater reaction to our final iteration than to earlier versions.

   Letting an audience experience the speculative design also poses problem different than those of the workbook. Ethical concerns, over what you subject your audience to, could be raised. You have to be receptive to how your message is received and to be aware of your privileged position when you present your design. These concerns are always present when exhibiting speculative design but are especially pronounced as digital projects can have a far wider reach and the context could easily be lost when a project gets shared on the Internet.

   References

   Gaver, B. and 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). http://dx.doi.org/10.1145/332040.332433

   Malpass, M. (2016). Critical Design Practice: Theoretical Perspectives and Methods of Engagement. Design Journal, 19(3), 473–489. http://dx.doi.org/10.1080/14606925.2016.1161943

   United Nations. (2021, December 3). The17 goals. Sustainable Development. https://sdgs.un.org/goals

   Bonazzo, J. (2017, March 16). The Man Behind the Facezam Hoax on How His Fake Facial Recognition App Went Viral. Observer.https://observer.com/2017/03/the-man-behind-the-facezam-hoax-on-how-his-fake-facial-recognition-app-went-viral/

2. Photo by Nathan Dumlao on Unsplash

   Final week of prototyping

   The last supervision before the presentation went well. We got good feedback and some small pointers to where we could improve before handing it in. The only point of contention was about the company website where we got the feedback that it might be good to have two separate for workers and consumers, but we think that this should be viewed more like a company overview where all the parts are presented, just like the uber homepage. The apps should be viewed as the separate portals for workers and consumers.

   Presentation

   We presented and got some nice feedback. Our class is not the one to engage too much in critique and feedback but this presentation was better than most. I enjoyed seeing the presentations of the other groups, as I have not seen their processes.

   The prototypes

   We presented the following prototypes:

   Web Site

   We made the iSweat company website to have a starting point where you could explore the company and the apps.

   

   Web Shop

   The consumers come in contact with the company through this webshop. The prototype was built in Adobe XD.

   view the prototype on its own

   Worker App

   Gig workers would mainly just use the worker phone app. The prototype was built in Adobe XD.

   view the prototype on its own

   Wrap up

   I think the project was a nice exercise in iteration. We were at very different point every monday, it was almost like we had to change concept every week. It shows how fast you can work when you only have to produce digital prototypes. Physical prototyping can also be fast but this was on another level. We could explore every iteration more and get a more finished prototype every time. We did a writeup of the project on the company website.

3. Photo by Austrian National Library on Unsplash

   The Uber for t-shirts

   This week was great for us, we worked hard and came to great insights that changed our project's path.

   Pivot into gig economy

   At the first supervision we got some good feedback. We talked about how we should show and not tell what our message is and how we could make that obvious to people without just explicitly stating it in text.

   The supervision led us into discussing how we could make our statement more obvious by not having the consumer do the work, which could be seen as a nice thing, and instead make the consumer a more active part in the exploitation of workers. The shop will be some kind of gig-worker sweat shop where you as the consumer both order the t-shirt and decide who should sew it. We decided to reduce each worker into a profile picture, name, price and rating. This feels like a gig-app approach where you try to balance the humanity and productification of the gig-worker. The customer would have to add a t-shirt to the cart and then add a worker that should get the work.

   I like how it is a bit double edged, like the "t-shirt economy" concept where developing countries are exploited by the west but still might be better off than without the work. It's a complex question in my opinion.
   We made a new iteration of the web store and tested it on ourselves and some class mates. You feel dirty as you are shopping for workers, just as intended.

   We decided to reuse the IKEA-like instructions that we made and turn them into an app. As we wouldn't send the instructions to the customer we modified them a bit and made a mockup for a gig worker app where they can accept jobs and get the instructions for sewing and how to thank the customer. It felt good to be able to reuse this as Veronika had spent a lot of time doing the instructions and it would be a shame to waste that nice work.

   To collect it all together I was put on the task to make a website for the fictional company where they would try to sell their services to customers and gig workers. We tried to keep the tone very peppy and positive as a company would at least try to believe their own message.

   Turning it up a notch

   On our second supervision with Peter we got the feedback to make it more extreme. It feels like Peter and Clint see things quite differently at times. Peter suggested to make sales on the workers and we took that idea and developed it further to incorporate global warming and other problems that developing countries might face.

   

   We decided to add some advertising banners to the "choose your worker" screen in the web shop. This was done to skew it a bit further for the crowd that would just look at it and say "good for them to get a job".

   Presentation is next week but I am confident in our project and that I will have time to make the website.

4. Photo by Gaelle Marcel on Unsplash

   Finding new ways forward

   This week was a bit frustrating. It felt like we didn't communicate our ideas very well at the critique sessions and the group fell apart a bit.

   We got the feedback that a video prototype might not be enough and that we should create the web store implied in the unboxing video. We where told that we should investigate how such a store would look and what kits could be sold there.

   Making Kits

   After the first supervision, we discussed the possibilities that could come out of a web store. We took great inspiration from H&M and started discussing how we could make different kits with different patterns and colors. This is where the group work broke down a bit, two members just took the bigger concrete tasks and left without telling the rest of the group while the rest of us was fumbling in the dark a bit and trying to come up with tasks to do. I feel like it's not unusual that I get the role of group parent where I have to make sure everyone has a task and that they can do it. It is very frustrating and is probably based in part of my vocal nature, other team members design work inexperience and our age differences.

   In the end I made some designs for packaging and stencils and we cut them out of cardboard in the laser cutter in the workshop. The designs of the prints were inspired by t-shirts on the H&M web shop but made to look a bit crappier and modular so you could vary your prints a bit.

   Critique

   Our second critique session was with Clint and he pointed out that our concept might be a bit too fuzzy. What are we really critiquing really? If we want to make the critique about fast fashion, we might want to mimic those companies a bit more. They don't offer any custom design or add-ons as they want to streamline their processes. Our concept might be too far from there to really be understood as a critique of them.

   Re-aligning

   We came out confused but we found a new way. We will take the work and suggestions we got this week and take the project in a slightly different direction. We will keep the self assembly and press on that that is the only way this company can guarantee that there is no exploitation of the work force. The focus will be less on the DIY nature though and it's just a way to shine a light on the working conditions and not a way to build an attachment to the garment. We will also remove the customizations and make a web shop that looks more like a normal store.

5. Photo by Aron Visuals on Unsplash

   Struggling to find our way

   UN's goal of "Sustainable Production and Consumption Patterns" is about using less non renewable resources and reducing the per capita foot print of waste and how we could decouple economic growth from resource usage.

   We started talking about what sustainability really is how planned obsolescence can be a thing and how consumers could make informed choices. We got interested in the informed consumer and dove down that rabbit hole. When every product is as complex as they are today it seems impossible to make a real informed choice. We would have to spend hours just to shop for tomatoes.

   We had ideas for more labeling, with the real cost of a product in the veins of "Only 0.12 children died in the production of this smart phone" or maybe more abstract like a green tree but red human to symbolize how the product is good in resource use but bad in worker conditions.

   We continued on the ideas we had last week of labeling goods as good or bad for sustainability and developed that into some kind of Kharma-currency, where you would on top of the normal cost of a product, have a "kharma" cost that reflects how sustainable the product would be. A company could have a kharma sale, where they lowered the kharma cost of their products by increasing their sustainability for a period of time.

   It all seems to lead to surveillance and governmental control in a Chinese totalitarian and dystopic manner, and that feels a bit lazy. Maybe even like the Black Mirror rejects Clint told us not to produce.

   Critique sessions

   The critique we got was that we lacked a clear vision on what we want to achieve and communicate with our project. We should stay away from trivial truths and do some field work. We also got some concrete examples on what we could look into and while I didn't find any of the ideas that interesting in themselves, they inspired us to look into new problems and areas.

   DIY

   We decided to get more into clothing and fashion as theses are areas with notorious sustainability issues. How could we make users value their clothes more? We started to ideate on this a nd came up with kind of DIY clothing kits where you would have to assemble your own t-shirt. This would teach you how much time and care goes into something as trivial as a H&M t-shirt.

   The end product could be an unboxing video of this product and we started do look at fashion unboxings. Wow, that is dark, so much waste. We decided to go out and do some research on how much resources go into a t-shirt and how we could make our own kit.

6. Photo by Meg Nielson on Unsplash

   Speculative Project

   We were introduced to the project we are going to be working on for the next 4 weeks. We are to select one of UN's Sustainable Development Goals and somehow create new knowledge around that. We started discussing what goals we wanted to work with and we landed on number 12, Ensure sustainable consumption and production patterns.

   I can see ho this could become quite political and want to focus on workers rights. I find the consumption part of the goal to be a little to bland. If you look back at what Dunne & Raby were writing about, these goals seem to land squarely in the speculative and not in the critical design corner. The goal feel a bit like lip service where we should try to find solutions that can sustain the status quo and I think more radical measures will be needed if we are to "solve" the problem of a bleak future.

   Assignment: Speculative Digital Design

   Brief: Generate knowledge through a speculative design approach around the theme of UN's Sustainable Development Goals

   Materials: Digital Prototyping

   Team: Patrik, Veronika, Snezhana, Caleb and me

7. Photo by Markus Winkler on Unsplash

   Google Analytics

   Assignment: Analytics

   Brief: Find design opportunities in the Google Merchandise Store based on Google Analytics
   Materials: Google Analytics
   Team: Individual
   note: I redid this assignment for a re-exam in November of 2021.

   Analyzing the Analytics

   Quality of data is very important. I wanted to use 2 years of data to compare but those sets are very hard to evaluate as there are very different in revenue. 2020 had a revenue of $54k versus the 2021 revenue of $1.6 million. I will have to use the 2021 data only. There also seems to be some irregularities with the February sales dropping drastically to then just come back in March. I will not try to find insights in that part of the dataset.

   

   Noteworthy data

   • The mobile vs desktop use ratio is odd. Just under 1/3 of the users are on mobile, this is very low in 2021 and might be because it's a web store, and shopping is still easier on a big screen. Mobile users are also half as likely to return.
   • USA is a very dominant origin country with over 40% of users, India is a distant second with 9%.
   • Referal users are by far the most valuable. They are 8% of the visitors but 50% of the revenue.
   • Sales are greatly reduced on non working days as weekends and holidays.
   • AdWords are losing them money. The only well performing keyword is the name of the site and on that search they would probably be on top anyway. Youtube campaign spent $39k to make $52.
   • I would guess that there is a lot of internal sales as many order are for huge amounts of the same product, like 100 backpacks or multiple orders of 25 giftcards for $100 a piece. I don't see that normal consumers would do this.
   • The 15% returning users generate 70% of the revenue.
   • There seems to be around 0.5% of the users that return over 50 times in a year.
   • Display ads have very bad conversion rates (0.96% of the sessions but only 0.02% of revenue).
   • Mobile users just have 0.56% conversions versus desktop with 3.34%.
   • 7 out of the top 10 mobile devices used are used are Google Pixel phones. These phones are rare and my suspicion is that Google employees are a big portion of the visitors. These users also have a higher conversion rate.

   Design for mobile first

   The industry standard is to design for mobile first as this will seldomly harm any desktop usage but the other way around can often lead to problems. This is even more true than in 2010 when responsive web design was invented as mobile traffic is the dominant traffic on most sites, on this particular site mobile traffic is low but that could be caused by the design. As mobile traffic seems to under perform on the site I would suggest further research into why.

   Some problems I can find right away is that the site is abysmally slow. Google lighthouse gives it a 23 out of 100 in performance with a 22.6 from start until you can interact with the site. Funnily they also score very low (50) on search engine optimization.

   I think the start page has potential for improvement. One problem is the auto-scrolling carousel at the top, auto-scrolling is not a great UI-pattern and the manual navigation is bad. Today, I would expect a better navigation than having to click small dots under the carousel, I would want clicks on the sides on the carousel and swipes. The navigation is even worse on mobile as the expectation to be able to swipe is higher and the small dots are bad targets for taps.

   The click targets on the product cards are very small, just a link instead of the whole card, making mobile navigation harder. None of the high performing products are pushed on the home page, instead we get some "trending" categories. Nothing in the analytics data shows that these products are trending.

   With almost 200 network requests on a simple product page, it's no wonder that it is slow. Megabytes of javascript gets loaded just to show a very simple page that should be light and fast to load. Performance is also part of UX and especially on mobile. It's not ok to load almost 4mb of compressed data just to show a page with 1 medium image and 7 thumbnails.

8. Photo by Markus Winkler on Unsplash

   Prototyping with Data

   We had a workshop where we was given the task to design a movie app but I did a news feed app instead as I found it a bit more inspiring. To fake data in a more realistic way we installed the plugin Repeator that lets you mock data into repeater grids. This was a nifty plugin that I will use in the future when I have to do these kind of mockups.

   XD really helps in these kind of situations. Too many times I have been doing hifi sketches in Photoshop or Illustrator and gotten feedback that some small change needs to be done and then I have to make that change in 100s of places. XD really helps in those kind of situations and Repeator supercharges the repeater grid.

   I focused on the news feed screen just to play around a bit with the plugin.

   view the prototype on its own

   Now I just have to find a plugin that lets me use JSON data or similar to have my grids show "real" data.

9. Photo by Markus Winkler on Unsplash

   Data driven design

   What are the implications of heavy use of data in the design process? We can easily get into hairy situations where we are spying very much on our users, gathering data that will never be used but risks exposing our users if the company is hacked or an the company goes rogue.

   On the other hand it can give us valuable information for understanding the use of our product that could never be acquired in other ways. The unobtrusive nature of these kinds of data gathering makes them good in production code as the product will still be fully usable as we gather the data.

   There is a larger question of where all this data goes. Google is keen on slurping up our data and gives us analytics for "free", we just pay with our customers data. Amazon does similar things with track 3rd party vendors performance so they can see what products are performing well and then launch a cheaper competitor.

   In the end I see the value, but an over use can kill the soul of a design. If there is no opinion and we are just going the way of least resistance, we will never change anything and just preserve the status quo. Another problem with all this testing is that we are often breaking it down into atoms, when we put it all together it might not work so well. An A/B test changing a button text in one end of an app might have implications that we didn't forsee. We might have introduced new wordings or colours that work here but not in other parts.

10. 

    Reconstructing Malmö by Bike

    Starting the reconstruction was harder than I thought. I stumbled a bit and had a fair bit of scope creep. In the end I decided to strip it down a lot and just focus on how you find a bike or free return slot.

    I started to make quick sketches and didn't care about the design of icons or similar. I just wanted to get a sense of what I would want in the flow. I decided to remove a lot of of functionality as I saw it as cluttering the screen.

    What am I looking for?

    When sketching the new app, I see that I'm stuck in the current design in some aspects. I did not thing of displaying more data in the map pins at all times. When I got the idea I don't understand why I didn't think of it immediately. It shows the power of sketching where one small idea gives another and you see a clear evolution in the multiple iterations.

    As a user, I want to see where to get or return a bike fast, I don't want to change filters to make the data available, filters that are reset when the app is off. I want to find a bike or return slot close to me, so the favorites have to go but the list of stations can stay (it is outside of the scope of this redesign though).

    In the end I just want the finding to be fast and clear. I want a clearer hierarchy of what services ae available at the stations.

    Throwing away stuff

    The focusing on the task at hand makes some functionality moot. I will remove the following functionality:

    • Record trips: I don't see the use of this. It is very bare-bones and just shows you a line on the map of where you have travelled. This is better done in other apps.
    • Center: I went for the approach that Google Maps has, of just showing this button when the map is not centered on you and you are not viewing a specific bike station.
    • Documentation: I want to move this to the hamburger menu and maybe show it on the first use. You should not be needing this as much with the new design and having a tutorial being that prominent in everyday use feels weird.
    • Favorite: I don't see a big reason for a list of favorites. The favorites are not as accessible as the map, as the map is the screen we start on and finding your station ahead of time has very little value as the bike stock changes fast and you never know how many bikes have been taken or returned since you looked. On top of this there seems to be a delay in the data in the app. This is frustrating when looking for a bike in real time and makes planning for finding a bike impossible.
    • Filter: I plan to remake the icons to show the stock of bikes and return slots at the same time. This make the filter superfluous and by removing it I can also remove the bottom bar and give the map more space.

    Adding stuff in

    As I opted to strip the UI down a bit, I don't add so much to the app. My main focus is the map pin for the stations. The challenge is to ass more data without making it cluttered or unclear. I experimented with different designs designs and land on one of the simpler ones.

    The qualities I like are that still has a "chevron" that point to where it is on the map. Without this it can be hard to know where the station is on the map.

    I like having both types of assets visible as bars as it makes it faster to search for the different types without changing any filters.

    I experimented with how the payment stations should be made more visible. In the end I opted for a crown. It has some Swedish connotation with the King and the name for our currency. The other visualizations might be nicer but are not as clear, especially when small.

    For color I went with the brand colors even though they are not the nicest. I would rather use Malmö green but the service uses the orange so much and it would be weird to introduce a new color.

    

    

    The digital prototype

    The final digital prototype turned out nice but I would have wanted to make it bigger in scope but that would also make the prototype massively more complex. One solution could be to make different flows where you don't have a continuos

    view the prototype on its own

    User Testing

    I dicided to go for a "think out loud" test as the prototype was so small in scope and I wanted quick results for such a short project. Think out loud gives you insight to the reasoning, or at least what the tester shares as their reason and that can give me insights into what I am missing.

    I gave the test users the task of finding the closest available bike as this is what my re-construction is focused on. It's hard to test what effects the decluttering of the UI has had without testing the original app as well and it feels like that is out of my scope here. It would be interesting to do some kind of A/B test with the apps but then I to remake the original app in XD or just use paper prototypes. Sadly I didn't find anyone that had any experience with the original app, but I don't think that was very important here.

    User 1

    This user was reasoning about the dot and how that was probably their position. They clicked the closest station and found that it had no bikes and then the next closest and found a bike. They said that they wanted an icon to show what the bars in the pins represent. I don't think this is the case, I think you might be confused onece before you click a station but then it is just a cleaner experience.

    User 2

    This user was very timid and it felt like they were worried of doing the wrong thing. They wanted confirmation from me that they were allowed to do things. THe user clicked aroud a bit seemingly without a plan and then found that one station was the closest but said that it didn't have any bikes but if it still was the one I wanted. They didn't like the color scheme, it felt boring.

    User 3

    This user also completed the task very quickly. They where reasoning about the crowns on some pins and that this might be where the payment is not out of order. They found this weird. I can agree that the payment station signalling is weak, I would like to work more on this.

    Test take-aways

    The test was easy for two of three users. I don't think I can credit my disign for all of this but I have made it less cluttered and a bit more clear, but I think it was mainly about the narrow scope of the test. I got some good and some less valuable feedback but if I would work omn it more I would have to take these into account.

    Portfolio

    The assignment also called for us making a portfolio page for our redesign, I have included it at portfolio/malmo-by-bike.

11. Photo by Rechanfle on Flickr

    Critical Speculative Fiction

    This was an interesting lecture where we got to see some speculative / critical design. Many projects can look silly at first glance but if you dig a little deeper they quite intriguing and could lead to interesting discussions. Dunne & Raby with their A/B Manifesto, might be drinking their own Kool-aid a bit too much, but the manifesto is interesting and thought provoking. We have to question the status quo and try to reframe our line of thinking to not get stuck in the capitalist money making machine. On the other hand it has a lot of the same problems and can easily feel a little like upper middle class privilege. That said, I still think it can contribute to a societal debate just as art can, even though it seems hard these days.

    Of the two concepts I like critical design the most. I do love science fiction but I like the critical and social aspects of it, not the technological. Star Trek or Star Wars can be fun but they are not as interesting as 1984 or some of Philip K. Dick's short stories. It's interesting to see how this kind of design is edging closer to art and future studies.

    Examples

    The Facezam example was a bit interesting, I'm pretty sure that The Astonishing Tribe in Malmö were working on something similar before being bought by Blackberry. I remember a video about it speculating on how the phone could find different social media accounts for the person in the viewfinder. I can't remember if it was a real product they were working on or if it was a specualtive design project. It wasn't as critical as Facezam is though, and didn't spark any controversy. I guess it was simpler times. These kind of projects can form a basis for discussions on privacy and who own our data. In an article in Mashable Facebook defends themselves and says that such a thing couldn't happen as they are very responsible. A year later the Cambridge Analytica story broke.

    The Camera Restricta is a more playful and fun critique of how we document our lives and what we think is a unique and interesting picture. It reminds me of pictures I have seen of Kodak Picture Spots, those are sadly not critical design.

    

    Since the course I have found something that relates a bit to this. We were shown a child's smog alarm "toy" that wanted to raise the question of what we do about the air quality in cities today. On a trip to Stockholm I found an ad for a air filter pacifier, I don't know if it was a critical design project but I doubt it, I think it was just a sad way of making money on peoples fears.

    
12. 

    Deconstructing Malmö by Bike

    In this project I chose to work with the app Malmö by Bike. It's a bike rental service with around 500 bikes distributed at about 50 spots in central Malmö. I use it quite a bit, when my bike is broken or I just need a bike one way. I first found the service under a different name in New York.

    

    The app functionality include: a way to find available bikes or return spots, either on a map or in a list; a trip recorder and a view to see past trips; support ticket submission; app tutorial.

    I had a hard time narrowing down what was a good project for this assignment and kept moving away from what we are supposed to do. The app is lacking in some regards and in the beginning I was focusing too much on these bad design choices, but after talking to Clint a bit I have found a user path that I want to focus on.

    This assignment focuses on finding common UI design patterns in existing apps and communicating the findings and I have chosen to focus on the user goal of finding a bike at Dalaplan and to use it to go to Niagara at Malmö University.

    I have broken down the existing app into the following patterns:

    

    A: Top Bar

    A top bar serves to collect important navigation and page info so the user can easily navigate through the app. This top bar contains several other patterns.

    1. Hamburger Menu: This is a way of hinting that there is navigation to be accessed by pressing the button. The hamburger menu has been criticized for its accessability but is very well used today.
    2. Text Button: This is a very discrete button that does not show its affordance very well, a problem some buttons in Google's Material Design paradigm suffer from. On top of this it's a reset button for a function (trip recorder) that I would guess very few use. It takes up precious screen real-estate and is should probably move.
    3. Icon Button: This button shows help documentation for this screen. It might be a bit too much to have it here and could probably be hidden in the hamburger menu.

    B: Scrollable Map

    The main view of the app is a scrollable and zoomable map where you can navigate to find bikes and stations. Overlaid on the map are some more elements to help the navigation.

    1. Icon Button: This button center the map on your position. It's probably something that is included in the Google Maps element and thus carries the style from there.
    2. Map Pins: These map pins are included with the map to show points of interest but probably just confuse in this context.
    3. Map Pins, Stations: These pins are custom and are buttons that open a modal for the station. They have a different styling to show that they are special but don't feel coherent with the rest of the app as the shadow is totally different and they have a border stroke. Some are triangles and some are more like pins, this indicates different station types but no user would guess that triangles are stations where you can pay. That has to be found out in the documentation. The color of the pin indicate available bikes or return spots based on selected filter in the bottom bar.
    4. Map marker: THis marker is your position in the world.

    C: Bottom Bar

    The bottom bar is like the top bar, a place to cluster buttons and info that are a bit out of the scope of the main view, like the filter in this view. It is also a place where tabs that shift the view often reside in apps.

    1. Toggle Buttons: Sometimes called radio button, this button group can only have one active (pressed) button at a time. Pressing another button toggles all other buttons into inactive mode. This is useful when only one option is applicable like here in this filter selector. The style for these is again a new one.
    2. Icon Button: This button just has a play icon in a circle and I would guess very few users would know that it starts a recording of your trip. I have no idea why anyone would like this feature, if I was to record my commuting I would do it in an app that gives me a bit more, something like a training tracking app.

    D: Selected Station

    This is the scrollable map whe a station is pressed.

    1. Icon Toggle Button: This button appears when you tap a station pin. You can toggle it to save the station to your favorites list. The style is similar but not exactly the same as the center position button but why is it outside the station card? Gestalt theory would suggest this is bad as not clustering all station info together makes it hard for the user to understand the context.
    2. Card: A card envelops most of the data for the station and puts it on top of everything else. This is a clustering method to show that this data belongs together. In this app it is pretty obvious but other apps could have long lists with data that can be segmented and better understood with cards.
13. Photo by Jannis Blume on Unsplash

    User Testing

    We had a lecture on user testing and how to do it, and also a bit on how not to do.

    We went through four different types of tests: observation, when you want a realistic use of your prototype; video analysis, where you can get very rich data on the interaction on a screen and reactions; think aloud, when you want to know the users reasoning; use & interview, when you want rich qualitative data from your tests.

    All types of tests have pros and cons and no one fits all situations.

    We also have to be conscious of when we test. We need to have something significant to test but we shouldn't wait to long as we could find fundamental flaws that have to be addressed.

    I have found that testing can reveal things you wouldn't ever dream of finding because you are so invested in your product and get blind to what other people could see in it.

    Guest Lecture

    We also had a guest lecture with Patrik from a company called Arvato Financial Solutions, it's some kind of Klarna competitor that mainly focuses on Germany right now.

    He talked about what you want to learn from your tests. What does prototypes prototype :). He also talked about the problem of building too big prototypes and the problems they have with prototypes that don't use real time data.

    It is important to know the limitations of your prototype so you can cater for that in the tests.

    Why do we user test?

    My main take away here is why we should do it, because for me it can at times feel like something I don't prioritize over doing "real" work.

    • We do it to get distance and experience the prototype for the first time through the tester.
    • We might also need a reality check on why we designed it like this, wa have an agenda and it won't always align with our users.
    • We often already know what is possible, both technically and politically, and this can close our mind.
    • Kill your darlings. User tests can reveal things that need to be cut.
14. Photo by Alice Butenko on Unsplash

    UI Design Patterns

    We got an introduction into UI design patterns, anti-pattern and dark patterns. UI design patterns are patterns we see in software we use. Anything from simple input fields and thumbnails to more complex composite patterns like carousels and wizards. These patterns have formed when they are used in many places and almost become standard.

    Anti-Patterns

    What constitutes an anti-pattern could be contested but in my years as a web developer I have seen patterns come and go. Many consider things that take agency away from the user like auto playing carousels or scroll-jacking to be anti-patterns as they often work against the will of the user. Nowadays many consider carousels altogether to be an anti-pattern, as they hide content that is important enough to have in a prominent position and make the user click to see more.

    Dark Patterns

    Dark patterns ar more insidious, they are not just bad patterns, they are patterns that try to trick the user into doing something. This could be anything from displaying every time someone else books a hotel to make you anxious about finding the best price hotel and just book something fast. Gamification could also be seen as a dark pattern, it certainly is when casinos use it to make you gamble more, but it could also be a useful pattern in education.

    Can we break away?

    It is useful to know about these patterns as it gives us a better understanding of what makes the UI and we can use the knowledge to analyze software design. It is also important to know the rules, even informal rules like patterns, to know where we can break away from the rules and when it is smarter to just stick to the patterns we got.

    The hamburger menu is an example of this. I remember when it was new and there was a lot of discussion about it. Would it just confuse users or was it something that we needed. I think the hamburger menu won in the end but I don't know if we just got used to it or if it was innovative. I don't remember what we used to do before it.

    Finding patterns

    There are a lot of sites that gather examples of UI design patterns, I like designvault, as it has a rather large list of apps and patterns that make sense to me.

    Now I have to use this deepened knowledge to find patterns in Malmö by Bike.

15. Photo by Kelly Sikkema on Unsplash

    Digital Prototyping Intro

    The start of our new course Digital Prototyping builds on what we did during GUI. It's a bit like the redesign for one hand assignment we did with Sofie but this time we will focus less on just UI and will focus more on UX as we are to redesign a user flow of our own choosing in an app we use often and know well.

    We talked in class about UI patterns, what they are, why they are there and how to identify then. A UI pattern can be things like using a card metaphor to cluster information or how a date input could look like an old time calendar to signal its intended use. Good UI patterns reduce cognitive load when using software as you will have a level familiarity with the UI even if you have not used it before.

    My first encounter with UI patterns and usability was with Steve Krug's book Don't make me think, as an artist and graphic designer coming into web design in 2008 this was eyeopening. I think a lot of self taught developers miss a lot of the more academic parts of design and development. I think I have gathered some of this knowledge on my journey but studying at a university has really boosted my knowledge, reasoning and confidence in this regard.

    The web has evolved a lot since I started working with it, and I think one of the reasons is that designers are better trained in usability and thinking of the web as an interactive media. More UI patterns have been established and the web looks a lot more professional these days, but it is also a little less experimental. Less and less is hand built, and that is true of mobile apps too, and more and more is using frameworks and practices from the American tech giants.

    There has to be a balance to find here, where we can do experimental and high quality design. I think one of the driving forces here is that design is still relatively low status compared to engineering and a lot of decisions in software are taken by engineers. App development seem to be ahead in this regard where both operating systems and apps like Snapchat and Tinder try to find new UI patterns with swipes. My main gripe with theses is that they are missing a GUI and often time overlap with other actions and add confusion and errors.

    Assignment: Deconstruct a GUI

    Brief: Choose an existing GUI you are familiar with. Select a user goal and deconstruct the flow and analyze the UI components used

    Materials: Use Adobe XD or similar and present the findings in a blog post.

    Team: Individual

    For my assignment I chose Malmö by Bike, an app I use when I need a bike to get to school and my normal bike is broken or when I want to go somewhere and don't want to have to care about parking and moving my bike. The service is super affordable at 250 SEK a year but the app is very poorly designed. There has probably not been any designer involved with it as it has no coherency and logos are deformed. The features available seem to have been chose more on the grounds of what was easy do implement than what was needed.

See all tags.