Final brief and process of the last unit in UXD Year 1: Undersea Cables Website

As the last unit of year 1, each of us had chosen the topic from the Internet Health Report that revealed and collaborated from Mozilla last year as the main brief to make a web, presenting the ideals and processing with the final project.

Chao-Ling Chyou
9 min readJun 3, 2020

Preface

In the beginning, having some fundamentals of learning in coding 101, for me, it seems to be the recap of the HTML/CSS I had learned before. But it had taken me to re-learn and think about how to be applied to the project as we receiving the tasks in the assignment.

After finishing the mini brief as the storytelling movie, it makes me recall the memories from the Internet Health Report we had gone through at the beginning of the collaboration with Year 2 during the whole week.

Week 1

Screenshot from the Internet Health Report
Submarine map tapped by GCHQ

When scrolling down the Internet Health Report, throwing away the basic topic collaborating with the group as the topic in the scandal and gossip between Facebook and Cambridge Analytic.

Moreover, AI and some social media issues are widely discussed in the public around these years, choosing something fresh and unknown in the public trigger me to do, such as child privacy-related issue with social media). Then the article of large invests on the undersea cables triggers me to have to dig out more and more. After a while, there is a piece of Taiwanese news popping up on Facebook, saying that the U.S approves that the proposed establishment of the undersea cables between Taiwan and the U.S hold by Google, giving me some points and clues to do more research during the quarantine period.

Week 2 (visual attempts and research)

One of the reports inspired me to do hacking and spying issue with America submarines

Browsing some information about the political issue within undersea cables(especially the war between the U.S and China just boomed up) seems rare because of the lack of more research on the Chinese journal and even the domestic journal in America. This is why I’m trying to focus back on the issue of the potential risks in privacy and security issue in cables.

Initial idea from the picture with submarine and the sea

On the visual part, trying to search out some styling and pattern with the submarine and undersea cables. With the origin sketches and ideas, tending to make the cross-section with submarine connected with the TV broadcasting each part of hacking and spying, but the tutor, Max, told me that it will put more emphasis on technique with VR combined with illustration, it may disrupt and delay your working time. At that point, realizing the idea is good but you need to consider the time management especially split time for the design and coding as well for the further four weeks and dedicated to the research step by step without any research.

Week 3

Before starting the first presentation with the first initial attempts on the sea cables, Max(tutor) and Gareth gave me some more materials crucially with the projects, especially speeches, and webinars that hold before, for the purpose of inspiring me more ideas and different angles of opinions towards the cable issues. For example, Jeroen Van Loon’s work with many Internet and undersea cables and the deep cable webinars hold in Berlin in 2006.

In addition, after finishing the quarantine, taking the train to the north of Taiwan, Tamsui port, in order to get more information about how they construct and the history of cables. This unforgettable journey helps me realize more specific information with what inside the cables and how it operated smoothly with the experts located in the museums.

Telecommunication established the cables connected with China beyond the seashore in 2012 from Tamsui Museum

During the meeting with Max talking about more content with the website, he had advised me to do the other inspiration from benjamin h. Bratton with The Stack: On Software and Sovereignty. But after experimenting with the coding of this, giving up this idea showing the contents because it still can’t show the content and storytelling what I gonna talk about more, especially the basic information of cables. Otherwise, considering more with the 3D coding module with this on each page, it would be an enormous difficulty to describe the contexts and make it animation for different angles of the pages.

the concepts of “The Stack: On Software and Sovereignty”

In particular, Jeroen’s work had given me some ideas with particles to illustrate the idea of cables, how they connected specifically, and fully effected our modern world and living. But unfortunately, it’s a failure that trying to search for more materials combined and integrated into the issue with the styling and content of spying and hacking. Then I started to make other research-based on the sea bed and how the telecommunication laid out the cables at the sea bed and what is the whole process of how does it go through. At that time, as getting more information with this issue, but need to make it narratively and storytelling the story I would like to talk about.

Initial ideas with particles presenting the ideas with connected dots

week 4

From content to the form

For the latest attempts with failure to particles, trying to make another visual experiment with aquarium and some swimming pool styling, showing the concept of “if you dive into more and more, you will see more things more and more with exploration in the sea ”.

diving into the aquarium for the cleaning
diving into the aquarium for the cleaning

The idea came from the aquarium for the whole website because all the sea cables are laid on the seabed. Then the scuba diver in the sea to search more experiences or other tasks in the sea symbolize the general people gaining more insights with undersea cables on the website. So, I settled down the title of “Insights Cables” with the website.

the website comes from the swimming pool giving the audience see the how depth it is at the right-bottom side

Another website inspiration came from the swimming pool in French, When the user scrolls down the website, the water of depth will pop up at the right bottom of the page and see how the depth of its, so I try to put this into the website, giving user see how depth they can insight the cables.

Second Attempt (visual and attempt)

Overall Sketches version 1: inside the aquarium
Main page
second page — the basic information with cables/ why it is crucial in the digital world
the third page- chat cloud symbolize the air and breathing with scuba divers
page 4 and page 5- a case study with GCHQ spying for the data with the issue and make the question for the people to think more possibilities

With the idea development, this is the second attempt with two pages from the aquarium, but when I put those text in the middle of the page, it will be complicated and disturbing the whole vision, and the ladder means going forward to the next page(meaning the people will be the scuba divers for more exploration and sightseeing more with the further pages).

Logo Design

At the same time, arranging the ideal logo design I had come out with. the ideas basically originated from the London Eye as you take the London Eye for more we see more gorgeous and sightseeing view as we see more insights with information and issues with spying and hacking. Then I put the eyes and submarine as the visual language to show the concept of the website.

logo design sketches
logo design sketches-2
logo design sketches-2
logo version 1
the animation with HTML/ CSS/ Javascript for the attempt with this styling

In order to look at whether my ideas would be settled down or not, trying to use animation and see how does it would be likely. It seems to be more suitable and fitting with my sketches and align with my visual languages at this point. Then beginning with the prototype, but I face difficulties with how to make the contents visually and stopped with the prototype.

But after the progress presentation, the content still doesn't have a connection with the theme with aquarium styling. (Big thanks to Veva for this crucial feedback, Kim and Min for more encouraging words about these attempts.)

Actually I felt so disappointed with what I had done, I hadn't done well enough to align with my expectations within this project. (But I hadn’t given up with this issue with other attempts.)

This week, realizing how important the concept and research combined together is a good point and try to be focus on one styling I would like to do instead of more and more.

Week 5/6 (third attempts)

With a limited time of only two weeks, I re-consider the latest visual concept from the Online platform broadcast because I want to make it(insight cables) as the whole channel give people more knowledge about the cable issues like National Geographic and Discovery but played at Netflix. (This is why I‘m trying to make “play” and “pause” for the further pages but still weird honestly.) So, this is why I would like to do and make it more simple in comparison with the previous two attempts.

Watch out for the Unfinished insight cables website version 1:

Also, you can point out this link as well

: https://unfinished-undersea-cables.netlify.app/index.html

What I will improve from the project and more possibles

After the final presentation, I know the analogy with Netflix seems unclear for the inspiration of the “play and pause buttons” that are so weird. I will change it as an undersea cable hacking and spying guide to give the general audience for more knowledge instead of the channel, transforming the buttons as the start button and backward, forward buttons, and having more pages to describe the solutions with the spying and hacking for the cables.

What I had learned within this project and the improvement

Firstly, realizing the coding technique is a crucial part of showing the concept, it is not just showing off the coding skills, it would be the aid with delivering and communicating the concept I would like to talk about more.

Secondly, time management still the key point of the project, we need to figure out the way to make a balance with the research and the design also the coding and split off the three parts and settling down the timeline from the beginning to the end of output(maybe the deliverables).

Third, thinking more narratively instead of having more and more materials inside the project. Making the pattern and the styling with consistency and arrange for the only one styling. This is the key point I would like to improve for the next project.

In the end, challenging myself for diverse issues and be brave to receive more opinions and listen to others.

--

--

Chao-Ling Chyou

Previous UX Designer/researcher. Now Product/Project manager. Based in London/Taipei.