Case study
Sf bok website
Before
After
When the user encounters the page, I want them to experience the fantastic world of Sci-fi. I've constructed it as a clean library with elements from space. The outlook is clean and has a clear navigation.
Case study SCi-Fy book store website
The customer is an online and physical store that is a leader in the sci-fi world. In the physical store, they have succeeded. It feels like entering a parallel mysterious world where you can find everything related to sci-fi, from collectible figures, games, and above all, books.
The website is not as well-developed; it feels messy, lacks hierarchy, and the magical feeling is gone. My mission was to redesign the website so that it felt more updated and in line with their physical store. They also wanted the website to have same playfulness.
Sci-fi is such a fantastic world, and I want the user to experience it even if they can't visit the physical store.
RESEARCH
I started by going to the physical store to do some observation research. It was like entering another world. They have so many products, yet they managed to make the in-store experience clear. It had a slightly old, classic library feel but with a twist.
I did competitive benchmarking and other research and I experienced Sci-fi pages were dated and products were not aligned on the page. They often double exposed categories, and the navigation was unclear. Many online book shops used continuation and used unnecessary many colors.
What I learned from the research process was:
I want to make a clear interface, don't double-expose.
It is important to work with a clear hierarchy and clear navigation. Continuation is a really good way of showing the pictures in a clear way when having loads of products.
I also came to the conclusion that I wanted to provide the user with a shopping experience similar to what they would get from the physical store even though they are not able to get there. I want them to feel like they are entering another world when using the website.
Hamburger menu where you can find all the different categories. In the top navigation (which is sticky), the most important categories are presented.
Continuation: This way, you can display a lot of books, and it encourages the user to explore the site.
I've worked on accessibility; the previous page had text on images, which could be a bit difficult to read.
A sticky chat on the edge, designed with the same shapes as the planets in the footer.
Prices and book covers are clearly communicated. If you're interested in reading more about the book, you click on it.
Planet landscape as a footer. Clearly shows the available shipping methods and payment functions.
When you click on a book, you get more information about the book and can add it to the shopping cart. When you click "read more" on the "learn more," you will be taken to the product page.
Mood board concept
The logo is a planet; try a rotating planet when a page loads? Dark mode is more mysterious than light mode, better in this world. It feels very interesting to work around a library world, to get the sensation of entering a parallel world in a clean way. To work with gradients and futuristic space elements and planets. Font, the font they use today is quite clean but a bit narrow. Avenir is more airy and accessable.
ITERATIONS LOGO
EXISTING LOGO
ITERATIONS
The existing logo is yellow and has bold yellow text next to it.
I started by exploring other colors. A blue turquoise/purple gradient gives the impression of more space and has a more futuristic feel.
I tried keeping the text in a font that also aligned more with sci-fi, Equinox.
It was nice but not perfect, the strongest outcome of the design was when I focused on their planet. It's simple, eye-catching, and feels modern. I think they can go only for the planet in the logo icon. On bags and cards they can have the text to it.
iterations
During all iteration I did usability tests to see that the design met all needs; clear navigation, accessibility and a playfulness.
ELEMENTS ITERATIONS
I found these images on Dribbble when I was doing research. I think they are fantastic and represent Sci-fi in a modern and interesting way.
Since SF Book wants to maintain a playful side, I was inspired by these images and created a footer where I picked up the elements.
I've incorporated the planet shape into other elements, such as the chat icon, for example.
I know that most people use their mobile, but I chose to focus on the desktop since I can work out the concept more clearly here.
To fully immerse the user in the Sci-fi world, dark mode felt like the more obvious choice to go for. I landed in the end in a dark gradient backround
Since SFbok wants to maintain its playful side, I sketched some rough ideas with planets – what if we incorporated elements into the background? But that ended up being too messy. I also tried to work with a space image in the background. Along with the images, it felt like there was too much going on.
COLOURS
I sketched around with a variety of colors but settled on a dark gradient, an off-white, an off-black, and a turquoise gradient. I chose these colors because they highlighted the content in a good way and gave it a spacious feel.
