IKEA: Redesigning an App
As the third project at the Ironhack bootcamp, we were given the challenge to redesign a well-known app of our choice without the constraints of conducting a user research, within 3 days! This time we would work solo.
I chose the IKEA app because I love the company and often visit their stores, but also find the app very useful for searching products and prices or gathering inspiration before I even step foot in the store.
Although the app is great, there’s definitely room for improvement in terms of its UI.
Task & Deliverables
We had to choose a minimum of three screens to redesign, starting with copying these screens. Then, we should conduct a heuristic analysis and a visual competitive analysis. Next, we had to define brand attributes and create a mood board, which would then be used to create a revised style tile with colors, typefaces, and UI elements. The end result was to see high-fidelity wireframes and an interactive prototype of the redesigned app, along with a brief presentation of our process, decisions, and results, so we could receive feedback during a design critique for further improvement.
Goal
The main goal of the redesign was to enhance our UI skills and design ability. Copying the selected screens of the current app was also meant to greatly improve our Figma skills and give us a good opportunity to analyze the decisions made by the company behind the app.
Cloning
Cloning the app was a particularly interesting experience. I intentionally chose only three screens because I wanted to focus on quality and design rather than trying to clone too many screens that I might not be able to finish.
Just before I started cloning, I thankfully noticed that there was already a new version of the app in the app store that I could update. After I did that, I was a bit disappointed because the new design was much more appealing than the old one, although there was still room for improvement.
First, I tried to find out what typeface was used in the app. I found out that IKEA uses its own, called Ikea Sans. So for the clones, I chose a typeface that was relatively similar.
I then happily started designing the clones, but soon realized that it was taking much longer than I thought. I had planned to create things like icons, auto layout, components, and styles at this stage of the project to improve my skills, but of course that took me a lot of time.
At the same time, I found cloning the screens to be very educational. I was able to make good observations about the design decisions that were made for the app, such as the margins or the overall layout, font sizes, or the size of individual elements. At this point, I already had a rough direction in mind for my redesign.
Here are my clones compared to the original screens:
Heuristic Analysis
The next step was the heuristic analysis. While cloning the screens, I had already analyzed the design and made some observations.
For example, one thing that stood out was that the app was very impersonal in design. The IKEA brand wasn’t represented at all, and the colors were barely used, except for a small button. You could have easily swapped out the imagery and the app would have been the same for virtually any brand or product.
So, at this point I knew for sure that I wanted to change that.
Also, the first page you land on when you open the app (the search page) wasn’t visually appealing. On the other hand, the home page was much better-looking with its big interior photo and the ability to learn more about the items in the photo using small clickable dots, which I thought was a very cool feature. I also liked the decision to start on the search page, because my personal experience with the app was that’s usually what I wanted to do first.
Overall, the app still looked relatively appealing. Clean, modern, organized, although, as already mentioned, very impersonal.
Visual Competitive Analysis
Having delved deeper into the design aspects of IKEA, I was now eager to examine the design styles of its direct competitors!
In order to make a better comparison, I first created a brief overview of the current design of IKEA:
I researched and decided to examine the apps of Home24, Westwing, and Wayfair. I wanted to gain a deeper understanding of how they compare to each other and to the current design of Ikea’s app, in order to identify potential areas for improvement.
For this I created a brief overview of the current design of all three brands:
What becomes clear right away is that the competitors also keep their designs clean and minimalist, but they use their brand colors much more than IKEA does.
For example, all three use one of their brand colors in their navigation icons and even in Wayfair’s small heart icon for favorites, which I find very cute. For example, Westwing’s buttons are also represented in brand colors and Home24 has small illustrations that give a positive and slightly playful flair.
The decisions regarding the uniformity of the designed elements have also been chosen appropriately for the brand at Westwing, all elements are designed without roundings, which underlines the high-end positioning of the brand.
Moodboard & Brand Attributes
And now, the really fun part started! With the insights I gained from the heuristic analysis and the visual competitive analysis, I thought about how my redesign of the app should look and feel. What kind of impression should the app make when used?
I already knew that the brand should come across more in the feeling. However, what kind of feeling should that be? I didn’t want to change too much of the actual brand and the feeling associated with it. I wanted to highlight it at most and underscore it a bit.
I associate the IKEA brand with positivity and coziness, but at the same time also modernity and minimalism. Additionally, I think of the Scandinavian interior style. Therefore, I compiled my brand attributes from a combination of my current feeling towards the brand and the feeling that the new app should convey:
- Cozy
- Hygge
- Minimalistic
- Clean
- Fresh
However, when I made my moodboard, I realized that it didn’t match the IKEA brand colors at all. All the images were more towards petrol and orange instead of blue and yellow.
I had thought from the very beginning that the IKEA logo was actually quite outdated and somewhat unprofessional, so at this point, I decided that I could play around with the logo a bit and maybe even change the (actually sacred) colors slightly.
This escalated a bit as I had a lot of fun with it and it resulted in many attempts, here’s a small glimpse from my design file (don’t judge me for the mess here):
After playing around for a while, I finally decided to stick with the original brand colors. Firstly, because they are so strongly associated with IKEA that it would be almost sacrilegious to change them, and secondly, because they simply didn’t fit the logo.
So I simply adjusted my moodboard accordingly using Photoshop:
Style Tile
What I did change a bit, however, was the logo by adding curves and removing the serifs, making it look a bit more modern and friendly. I still wanted to retain the character of the original logo. This resulted in two versions that I liked very much in the end, and I used one of them in my redesign.
For the typefaces, I chose Futura for the headlines and Open Sans for the body text.
I decided that the icons should be a bit more rounded and filled, and I wanted to incorporate a few illustrations, similar to what Home 24 did. But not too much so that it doesn’t look too childish, and in general, the brand colors should be used more.
Here is my style tile with the updated logo:
Redesigns
And now it was time to get serious! The redesign of the screens finally started.
First, I established styles for the colors and fonts. Then I created individual elements and set up components & variants according to the rules of atomic design:
I wanted all elements to be more rounded compared to the original design, with my decision for the logo and cozy feeling to be reflected throughout the entire app. Thus, the navigation also got rounded corners.
I only wanted to use the circular form for the category buttons with illustrations and buttons with icons. All other elements, such as cards or products, should be based on a square or rectangular form and also have rounded corners, so that these two categories were visually separated.
I tried to find a good balance for the use of colors, so that they were consistent but not too heavy. The app should still look modern and minimalist. I colored the icon on the products yellow to add them to favorites, similar to how Wayfair did it, which is my favorite aspect of the redesign! :-)
I decided which elements of the original app I wanted to include in the redesign, such as the beautiful interior image with dots that allows you to navigate products in the photo. I moved this to the search page to make it visually appealing. On the home page, I kept the infinite inspirational photo gallery, which also achieved a very appealing look. Here, too rounded corners proved to be counter-productive, so I only slightly increased them at this point.
What am I even still talking about, just take a look at yourself:
Prototype
Below, you can see the prototype and take a look around by clicking through it if you’d like:
Design Critique
The design critique was a special moment where it was very interesting to see all the projects. We even had an additional professional UX UI designer visit us and give us feedback! That was really cool.
My redesign actually received only positive feedback, which of course made me very happy and I am very grateful.
In the future, I still want to focus on additional points of my heuristic analysis and create further iterations of my redesign!
Key learnings
Working on this project was an amazing experience! It allowed me to develop my Figma skills a lot, to analyze UI decisions and elements in other apps, and practice using the principles of atomic design.
The best part was being able to choose a project that was of personal interest. This made the process even more enjoyable, as I was eager to explore the details and find ways to improve the app.
I learned once again (let’s see when I finally learn) that I need to improve my time management. When I enjoy certain tasks, I easily get lost in them, leading to me losing a lot of time. I will set a time limit for each task in the future! :-)
I also experienced that hard work is not a problem if you enjoy what you are doing and are somewhat satisfied with the end result.
I love the attitude in UX/UI design that designs can be improved through further iterations and that the preliminary end result is not set in stone. This is a big difference from the fashion industry, which I come from, where you always have to deliver a finished and “perfect” product.
I also want to thank my amazing TA Bori, who has accompanied me through the entire process and always given me helpful feedback and great recommendations!
Thank you very much for reading!
Please feel free to give me some feedback & to follow for more!
