0t1 steckt noch in den Kinderschuhen.

Sky Line – A journey through the Creation Process

This article explores the creation process of a user-centered website called “Sky Line”. The individual process points are examined in detail, and both advantages and disadvantages will be evaluated based on the project.


The Beginnings


Before diving into creating an interactive and user centered website, it is important to think about what interactivity and user centered actually means and how well such websites can be constructed. Therefore it is always a good method to first analize other websites, that already seemingly did a good job on the encountered task.


Check what is there already

It is also very helpful to look for concurrenting websites that are featuring the same or very alike topic that you want to display in your project.

Benchmark Analysis

A Benchmark Analysis helps to filter good and bad parts of a website.

The Theme for the Product

The product we focused on is an interactive website, that gives insights on our universe, which includes planets, stars, great spots to stargaze and more. So far the first Idea.

First mood board that we created to have a slight idea of how it could look like.


Tools and Workspaces


Along the course we found several tools and programs helpful for reaching our goals.

In the following we quickly want to introduce you to the most important ones that we used frequently through the whole creation phase.


Tools


  • Figma or Miro (A workspace in which the team could work together )
  • Figma Prototype (Create Mockups and Prototypes - mostly used)
  • Adobe Xd (Create Interfaces - outdated)
  • Adobe Illustrator (Creating SVG's or other graphic elements)
  • Adobe Photoshop (For editing pictures)

Code


Visual Studio Code was our main coding program.


Browser

We used several browsers to check, if the website would perform on each of them.


  • Firefox
  • Chrome
  • Safari (differences sometimes occured compared to the other browsers)

Help


YouTube, Google or other tools like AI often helped finding solutions for problems.


DISCOVER – Users | Content | Infrastructure


Users

Target Group

we defined our target group to be people between roughly 15 and 50 years. The universe is a subject that should be available for a brought spann of people. The content itself should be easyily understanable so it doesn't scare away those who think the substance of it is too dry and challenging.

Chosen Sinus Milieus

Since our subject - the universe - was very brought and could be split into the spiritual and the scientific field, we wanted to narrow down the content into one of those two areas. For that we decided it would be best do hold interviews with possible people of our target group.

Here you can see some resuslts that show, that the majority of the questioned people prefer a scientific product rather than the spiritual counterpart such as personal star signs and their horoscopical meaning.


Personas

Now that we defined the theme of the website, created two personas, that would fit the target group.

Some facts about Nicole Fischer Some facts about Stephen Adam
Likes games Is practical
Interested in facts about space Interested in detailed facts about space
Is rather introverted Is quite extroverted
loves problem-solving loves research and science

Thanks to these personas we could proceed with further methods that helped to understand the users behavior and interaction with the website. Some of these Methods will be displayed in the following section.


Goal Matrix

With a goal matrix we can define Business- Brand- and User Goals that help us get a picture of what we want to offer on our website on all of those aspects.

This is how the Goal Matrix looks like:

Business Goals Brand Goals User Goals
gain new members bring people outside find more information about space
promote activity offer good locations for stargazing elements like chats that I can interact with
get more range offer quality information discovering my nearby surroundings in a new way
have people buy from a possible shop introduce astronomy in a friendly way have a great experience on the website

Now we already know in which direction we want our goals to be. However we wanted to have a deeper look into what our users could like, how they interact with the website and on what obstacles they could hit along the way. This is possible through certain methods:

– Scenario Mapping
– Storyboarding
– User Flows or User Journeys


In the following we will use some of those methods on our personas that we already created earlier.


Nicole – Scenario Mapping | Storyboarding

Scenario Mapping Storyboard
This method helped to under-
stand the different motivations
of Nicole and how she would
go through the process.
This method helped to visualize
Nicoles written process from
the first method.

Stephen – User Journeys

These user journeys helped to understand through an editorial approach how different scenarios of Stephan could look like if he moves through the process of finding and acting on a website by having a certain goal.

Conclusion
The User Journeys helped better than the other methods, because we could extract helpful features that we wanted to implement on our website to help users like stephan to navigate around more easily. The Scenario Mapping and Storyboard were nice visualizations but seemed to be a bit too superficial to extract certain features for the product.


Content

Brainstorming

First we did some brainstorming about about content that we thought would be interesting and suiting for the website.


Updated Mood Board

Meanwhile we started to collect pictures for many themes such as typography, colours, infographics and more to represent a general look and feel as well as inspiration of how to display certain objects. This marked the beginning of visualizing design elements for the website.


Pirority Content

Then we tried to categorize the content from higher to lower priority.


Competitive Analysis

The current phase we were in involved focusing on specific media to analyse and determine functions that could be advantageous for our project. In addition to apps and websites, children’s books were identified as a unique medium for analysis. These books were scrutinised for their narrative structure and information delivery methods, providing insights into potential features and considerations for our project.

For these analysis it was important to find apps, websites and books that were as similar to the looks and content of the own project as possible. On these two examples you can see, how such an alaysis could look like.


Brand Positioning

This method works by placing the analysed media from the competitive analysis on a coordinate system defined by various attributes. Then we have to position our own website within this system, both at its current state and with the goal of where it should be.

This method provided a clear goal for where our site should ultimately be. It also highlighted the considerations needed to reach that goal. The positioning exercise was valuable in understanding where the competition stands and how we can differentiate ourselves.


Brand Filter

For the Brand Filter-Method we first defined character attributes. Those were:

– Educational
– Unconventional
– User-friendly

Then we tried to define these attributes to the brand filters which were the look and feel, the information architecture, the userguidance and navigation as well as the movement and interactions based on the given character attributes.

This task was a bit of a challenge but had a great outcome for the project because we had to deeply think of how we want to achieve the given character for the brand filters.


Content Format

Thanks to the Content Format-Method our content is now much clearer in terms of its intended goal. Similar to the other exercises, we have gained a clearer vision of how the website should look in the end.


Infrastructure

After some more content studies we reached the state to where we would start to think about how the infrastructure through a Site-Map and User-Flows.

For the site map, we had to create an initial rough framework of our potential website using a Miro template, organized into main and subsections. For the user flows, we had to generate two to three user scenarios and visually depict how they navigate through the site map to reach their goal.

Site-Map

Site-Map

User-Flows

We were impressed by how effectively these two methods produced a relatively solid and stable framework that led to meaningful user scenarios. This gave us a much clearer vision for our website.


DESIGN – Wireframes | Style Studies | Prototyping


Now we reached the Design-Phase in which we would scribble wireframes, create style studies and start prototyping first digital approaches regarding our website.


Wireframes

Scribble Prototypes

First we worked with analog scribbles. These scribble show the first infrastructures of the freshly born website concept.


Polarity Profile

Polarity Profile

This polarity profile helped us to check in again with the personas Nicole and Stephen.


Stylestudies

From now on we would dive deeper into the Design phase. That reaquired first style studies. In those we tried each individually to find a certain look and feel as well as some design rules for basic elements like icons or buttons.

It was very clear that all of us sort of had a very similar direction style-wise. We wanted to have big graphic elements, elegant and slim style for text and info graphics and a lot of white space which you could rather call black space in these examples.

Additionally it helps to also wireframe prototypical content on for instance Adobe XD to get a first feeling of how the interface could look like.

A first approach on Adobe Xd

Editorial Approach – Interactive Storytelling

To gain a better understanding for interactive storytellling we analyzed a magazine about space to see, what features we could extract and adapt on our Website

Analyzing magazines helped us to understand the subject better.

Updated Mood Board

After all this new knowledge about our topic we updated the mood board to our new look and feel that we extracted from our style studies and media analyses.

Big objects, lots of space and wide typography was our goal-design.

New and final Style Studies

With these style studies we saw that we couldnt agree mroe on the design and look and feel for the Website that we from now an called Sky Line.


Lets make it more editorial!

Now that we had a guideline of how the look and feel should be we were thinking of ways how to create an interesting and interactive website that involves the user or/and is intriguing and animating.

First we thought of a new landing-page-approach that works with sort of a bubble system.

We prototyped this approach on Figma.

But we soon realized it had a few problems such as navigation. It would make it hard for users to get around and know where to go when they want to look for something specific.


How do others do it?

So we went a step back and did another round of analysis for interactive Websites. We extracted some helpful tools such as spinning- or zoom effects.


Stylestudies

Now we felt ready to make some first more fixed approaches through prototyping designs for Sky Line on Figma. For this part of the process each of us got one section of the Website.

The sections were:

  • Landingpage (Groupwork)
  • Location
  • Planets
  • Starsigns
  • Chat Room

In the following you can see some examples of the prototypes of the landingpage.

Here you can see some examples of the prototypes for the other sections.

These prototypes developed throughout the process, combined with fixing rules and a font for typography.


Typography

For the Typography we fixed on a signature font and a font for running text.

  • Termina (Signature Font)
  • Montserrat (Running Text)

To find the right line-spacing, font-size, letter-spacing and font weight for both of the chosen Fonts we did typography studies that generally looked like this:

This helped us to have a direct comparison of how well the readability is since this was a special task due to the black background of the website.

Final Prototypes

Landingpage


Community


Shop


Articles


Planets


DELIVER – Coding | Final Product


Coding

Similar like we did for the prototyping part we split the pages again to team members so each of them has at least one page to code. Because of this method it was mandatory to frequently meet in team-meetings to talk about the progress and to check in with the look and feel that has to be the same on every page.

Challenges that we faced and solved:

  • Size Porportions (typography and pictures)
  • Effects and animations
  • Accessability on different browsers
  • Responsivness

We mainly worked on Visual Studio Code but had help from AI like ChatGPT or BlackboxAI if we couldn't find the solution for problems we solved.


Coding with AI

Coding with AI sounds easy, but it definitely needs time until you found your way of working with good prompting. Here we can say: The more details, the better!

Also it is wise to never trust AIs completely. Always check what solutions it suggests and think of how you can work with it. Not seldomly you still have to code your own desired looks into the generated code.


Final Product

In the following we want to present you the final design of Sky Line - a website about space and the universe.

Landingpage

Landingpage on iPad and iPhone

Dive into the fold and discover the topics of Sky Line.


Starsigns

Star signs on the iPad

Discover star signs and the mythological stories behind them.


Stargaze

Stargaze on Mac

Find a spot nearby that grants you the best view on the night sky with informations about the current weather and what to bring along. If you liked your experience leave a rating!


Planets

Planets on iMac

Find out more about the planets in our Solarsystem.


Deeper Insights

Deeper Insights on iPad

Get more informations about certain topics from chosen experts.


Shop

Shop on iPhone

Find nice posters of photography or illustrations for yourself or for friends.


CONCLUSION


Methods and Process

The methods that we used along the process helped us a lot to work towards our goal. Sometimes we discovered, that some methods would help better than others. This is depending on what kind of project you choose to work on.

Structuring the working sessions into weekly units helped to stay focused and to keep the pace up.

Online meetings were good but could never replace the experience of meeting in person. We recommend to always schedule at least one weekly meeting where everyone meets on the work site.


Content Generation

Along the project development it is important to never forget to curate content for the website. Especially if it is a website like Sky Line that lives from content research. We had to plan a lot of time inbetween the concept process and design process to gather contant for the website. Since we started early to collect informations about the stars and the universe we had lelss time pressure in the end.


Process Flow: Watefall Model vs. Agile Development

During the course of our process of creating a user-centered website we tried to always complete the previous step before heading to the next task (Waterfall Model). Soon we realized, that it is almost not possible to complete every step in one run. It is necesarry – if not even crucial for a well designed and constructed project like this to go back to earlier stages and reform them and go through each step again with the newly added aspects of the project (Agile Development).

Due to the the first approach with the Waterfall Model we ended up having sort of a hybrid model of both process flows. It turned out to be just the right amount of aming for a certain goal and yet having the possibility to step back and change something along the way to a certain degree.


Teamwork and Communication

Having a team in which every individual can take over crucial parts of the creation process can be very helpful. A group of three to four people with different strengths and talents has been proven to be a good number in this project.

That way the tasks can be spread evenly without having too many different opinions and thoughts which is a relief when it comes to due dates and time management.

However more people working together can also cause different opinions and imbalances within the group dynamics which can and should be ruled out by straight and clear communication.


This project was developed by: Keng Lo-Yun, Rebecca Wick, Anna Luft, Eva Weddig
BACK TO TOP

© 0t1

Cookies

0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

Weitere Informationen in unserer Datenschutzerklärung.