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
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.
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.
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
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
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.
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
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.
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.
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
Dive into the fold and discover the topics of Sky Line.
Starsigns
Discover star signs and the mythological stories behind them.
Stargaze
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
Find out more about the planets in our Solarsystem.
Deeper Insights
Get more informations about certain topics from chosen experts.
Shop
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.
