Case Study Onlineshop
 Conception and design of a niche online store in the course of the training at CF in Berlin.
The huge world of upcycling

More and more people are familiar with the term upycling and are fascinated by how modern design is brought to life from old materials that no one has used anymore.
2 billion tons of waste worldwide each year
30 soccer fields of rainforest disappear every minute
It takes between 450 and 5000 years for a plastic bottle to decompose
Based on the user stories, user flow diagrams were created to visualize the steps the user has to take to reach the goal. Here I show how user flows are created from user stories and how the user flow diagram is composed from them.
As a returning customer, I want to be able to save items that I cannot buy to a wish list, so that I can purchase them at a later date. find items I might not otherwise on my own.
As a frequent customer, I want to see recommendations of products I may like, so that I find items I might not otherwise on my own.
As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history.
Low Fidelity Pen & Paper Wireframes
Based on the diagrams, a rough sketch was made with pencil and paper of how the screens would have to look in order to make the goal easily accessible. The sequence of screens selected from these low fidelity wireframes was transferred into digital midfidelity wireframes.
Mid Fidelity Digital Wireframes
Mid fidelity wireframes are easy and fast to create, but reflect a real interface to the extent that it can be tested on the user without distracting him by not understanding the drawing or personal taste by e.g. colors.
Reach the goal
Based on the diagrams, a rough sketch was made with pencil and paper of how the screens would have to look in order to make the goal easily accessible. The sequence of screens selected from these low fidelity wireframes was transferred into digital midfidelity wireframes.
Operating systems
Mid fidelity wireframes are easy and fast to create, but reflect a real interface to the extent that it can be tested on the user without distracting him by not understanding the drawing or personal taste by e.g. colors.
Reactions & Quotes
With the findings from the user tests and the visual styles in the bag, we can start working on the high fidelity wireframes. Once the high fidelity wireframes have been checked and are functional, the final design is created.
Screen Evolution
If you liked this, check out my other projects
or just write me if you have any questions or just to say hi.
The huge world of upcycling

More and more people are familiar with the term upycling and are fascinated by how modern design is brought to life from old materials that no one has used anymore.
Did you know that ?
2 billion tons of waste worldwide each year
30 soccer fields of rainforest disappear every minute
It takes between 450 and 5000 years for a plastic bottle to decompose
Based on the user stories, user flow diagrams were created to visualize the steps the user has to take to reach the goal. Here I show how user flows are created from user stories and how the user flow diagram is composed from them.
As a returning customer, I want to be able to save items that I cannot buy to a wish list, so that I can purchase them at a later date. find items I might not otherwise on my own.
As a frequent customer, I want to see recommendations of products I may like, so that I find items I might not otherwise on my own.
As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history.
Low Fidelity
Pen & Paper Wireframes
Based on the diagrams, a rough sketch was made with pencil and paper of how the screens would have to look in order to make the goal easily accessible. The sequence of screens selected from these low fidelity wireframes was transferred into digital midfidelity wireframes.
Mid Fidelity
Digital Wireframes
Mid fidelity wireframes are easy and fast to create, but reflect a real interface to the extent that it can be tested on the user without distracting him by not understanding the drawing or personal taste by e.g. colors.
Reach the goal
Based on the diagrams, a rough sketch was made with pencil and paper of how the screens would have to look in order to make the goal easily accessible. The sequence of screens selected from these low fidelity wireframes was transferred into digital midfidelity wireframes.
Operating systems
Mid fidelity wireframes are easy and fast to create, but reflect a real interface to the extent that it can be tested on the user without distracting him by not understanding the drawing or personal taste by e.g. colors.
Reactions & Quotes
With the findings from the user tests and the visual styles in the bag, we can start working on the high fidelity wireframes. Once the high fidelity wireframes have been checked and are functional, the final design is created.
Screen Evolution
If you liked this, check out
my other projects
or just contact me if you have
The huge world of upcycling
More and more people are familiar with the term upycling and are fascinated by how modern design is brought to life from old materials that no one has used anymore.
AS AN ASIDE…
…do you know that?
2 billion tons of waste worldwide each year
30 soccer fields of rainforest disappear every minute
It takes between 450 and 5000 years for a plastic bottle to decompose
Based on the user stories, user flow diagrams were created to visualize the steps the user has to take to reach the goal. Here I show how user flows are created from user stories and how the user flow diagram is composed from them.
As a returning customer, I want to be able to save items that I cannot buy to a wish list, so that I can purchase them at a later date. find items I might not otherwise on my own.
As a frequent customer, I want to see recommendations of products I may like, so that I find items I might not otherwise on my own.
As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history.
Low Fidelity Pen & Paper Wireframes
Based on the diagrams, a rough sketch was made with pencil and paper of how the screens would have to look in order to make the goal easily accessible. The sequence of screens selected from these low fidelity wireframes was transferred into digital midfidelity wireframes.
Mid Fidelity Digital Wireframes
Mid fidelity wireframes are easy and fast to create, but reflect a real interface to the extent that it can be tested on the user without distracting him by not understanding the drawing or personal taste by e.g. colors.
Reach the goal
Based on the diagrams, a rough sketch was made with pencil and paper of how the screens would have to look in order to make the goal easily accessible. The sequence of screens selected from these low fidelity wireframes was transferred into digital midfidelity wireframes.
Operating systems
Mid fidelity wireframes are easy and fast to create, but reflect a real interface to the extent that it can be tested on the user without distracting him by not understanding the drawing or personal taste by e.g. colors.
Reactions & Quotes
With the findings from the user tests and the visual styles in the bag, we can start working on the high fidelity wireframes. Once the high fidelity wireframes have been checked and are functional, the final design is created.
Screen Evolution
If you liked this, check out my other projects
Â
Or just contact me if you have
This website uses cookies. By continuing to use this site, you accept our use of cookies.