https://www.kimdesign.se/test daily 0.75 2021-05-08 https://www.kimdesign.se/about daily 0.75 2023-05-12 https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/e3e78040-322b-4c49-ac68-d6dde89d1340/20220925_221653.jpg About - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5ce435d6bea1ed00016ba287/1558964652247-5MWXNMFZVOPGE4TY6U2Q/MHeiderich_ReflexionenZwei-05-copy.jpg About https://www.kimdesign.se/design daily 1.0 2024-03-21 https://www.kimdesign.se/design/project-one-99jlj monthly 0.5 2023-05-10 https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1620495858445-3P7Q6WKPNP88RC2PQEUM/Dreams+cancel.jpg Case Studies - Dreams App - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1620496185126-H0RQJOBTNVLYNLA4E0BC/Dreams+solution+wide.jpg Case Studies - Dreams App - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1620496334434-HV2UJABN5HE5R8YMSQA3/Dreams+beginning.jpg Case Studies - Dreams App - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1628110523972-CVNC52FFNV5TLRM1VL7N/Ska%CC%88rmavbild+2021-08-04+kl.+22.55.16.png Case Studies - Dreams App - Ux/Ui Design Insights One key insight is that just a few percent do actually reach their dream and that can depend on a few different factors such as the user taking out the money right before reaching the dream or that the user got a new more important dream and transferred that money to another dream instead. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1628110747841-T6ZIVPECO2TJFF0A0LEC/Ska%CC%88rmavbild+2021-08-04+kl.+22.59.03.png Case Studies - Dreams App - Ux/Ui Design About 42% of the users in a survey answered that they feel failure or disappointment in themselves when having to cancel a dream before reaching the goal. The users often save for something large like a new house or travels and saving money takes time so the majority have never experienced the competition of a dream. Some users also felt the need to be able to pause their dream due to financial difficulties at the moment but there is no official pause function so giving up on the dream prematurely is the only way to end it. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1620490458532-S7QBYGCHR7ZHSQO3VZZ4/Dreams+cancel.jpg Case Studies - Dreams App - Ux/Ui Design Here you can see the view the user gets when ending a dream as of today. This phrase does not make the user feel more confident when having to end a dream prematurely. "Oh no! Are you sure you want to give up on this dream? -”Give up”. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1620565116240-C2TWUXK3ZASI7ODXK2JJ/Dreams+coach_002.jpg Case Studies - Dreams App - Ux/Ui Design Soft ending Based on our insights we also created an official pause function where the user can easily pause their dream so no money will be transferred until it's resumed again. Overview The coaching concept now works throughout the whole app. The user first creates an action plan and an attractive target image. In the end, the user gets encouraged to reflect and gain insight into its previous action plan. As well as an alternate way of reaching the goal by taking a pause. https://www.kimdesign.se/design/project-one-99jlj-3k2f4-tbcgb monthly 0.5 2023-05-10 https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1627489172737-THWCTOLE5IVK99IN5202/Ska%CC%88rmavbild+2021-07-28+kl.+18.19.28.png Case Studies - Valter - A Library App - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1627498206241-PGALIJH13HL0BMILLMTF/Valter+mockup+01.jpg Case Studies - Valter - A Library App - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1627489105446-KA1TN1KN6QYIHL74QGB5/Ska%CC%88rmavbild+2021-07-28+kl.+18.18.20.png Case Studies - Valter - A Library App - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1626991139795-6PB14MH0T970HGKT7N29/Ska%CC%88rmavbild+2021-07-22+kl.+23.58.56.png Case Studies - Valter - A Library App - Ux/Ui Design Process We began to use our own experiences to summarize what a library is and concluded that almost all of our interpretations were negative, such as “boring”, “sterile” and “irrelevant”. Libraries have looked the same since the dawn of time with 4 walls and some bookshelves. They lack innovation and don’t try to innovate like the rest of the world. Now we needed to know if others also looked at libraries the same way as we did and localize pain points. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1628113661551-BE9EP53DWV2EWVBXD1DG/Ska%CC%88rmavbild+2021-08-04+kl.+23.47.36.png Case Studies - Valter - A Library App - Ux/Ui Design We interviewed 20 different people around the ages 16-35 about their thoughts on libraries and we found out that: Almost no young adults visit them. There’s a lack of knowledge about what libraries have to offer. Libraries don’t communicate what they have to offer through social media and websites. There are overall negative associations towards libraries based on previous experiences such as being forced to go there during school. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1626990953184-9C62JTSIN73ZGN4G1K4Q/Ska%CC%88rmavbild+2021-07-22+kl.+23.55.49.png Case Studies - Valter - A Library App - Ux/Ui Design One thing we noticed was that the people we spoke to had a hard time imagining what a library could be instead of what it is today. Therefore we made a prototype we called The X Company, where we included every service today’s libraries have but under a more neutral name. During our second round of interviews, we introduced The X Company as this new service that offers everything from seminars and lectures to physical books and the interviewees became more open to new ideas. We also noticed that the environment was not important to the user at all when visiting a library. So the idea of rearranging the furniture and or making it look more modern would just be a waste of time and money. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1627498095011-ILW79BZBD53L6Q91014K/Valter+mockup+01.jpg Case Studies - Valter - A Library App - Ux/Ui Design The solution Based on many interviews, research, and testing we concluded that the future of Swedish public libraries is digital, at least partiality in the beginning. Hence we created Valter, the next generation of libraries. A digital knowledge bank whose sole purpose is to encourage learning and make knowledge easy and accessible for everyone. Valter works as an extension of today’s libraries in the digital landscape. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1627569598745-N1L54YF7TL0MEFQ9MF5L/Ska%CC%88rmavbild+2021-07-29+kl.+16.39.54.png Case Studies - Valter - A Library App - Ux/Ui Design Valter could be described as something similar to Wikipedia or Google but at Valter, there will only be information and sources that are supported by research and controlled by librarians. While on other search engines people can publish whatever without any credibility or reliance. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/1627558616321-289EQ929QPAIRW98FL7K/Valter+03.jpg Case Studies - Valter - A Library App - Ux/Ui Design Valter’s strengths are the quality of the content, the time the user saves when only needing one service, and categorization based on subjects making everything easy to overview. We understand that the original physical libraries still fill a function and needs, so in the early phase of Valter, they will still be available as usual until the new service has gained trust, stability, and a good amount of content. https://www.kimdesign.se/design/project-one-99jlj-rzwk6 monthly 0.5 2023-05-17 https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/2c2314cf-87b1-4147-8b83-a578b69f744f/Desktop+-+1447+%28kopia+3%29.png Case Studies - Column Design System - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/f0468537-817f-47a0-84c1-270d5b55ff72/Desktop+-+1443.png Case Studies - Column Design System - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/cfd5e9b8-8190-45ba-940f-631991a6925c/Desktop+-+1441.png Case Studies - Column Design System - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/cfd5e9b8-8190-45ba-940f-631991a6925c/Desktop+-+1441.png Case Studies - Column Design System - Ux/Ui Design - Situation One challenge our sites at KEG has is that we don’t have enough defined elements and how they should act within a responsive environment. Today many elements are placed inconsistent and unaligned which results in the users getting a harder time overviewing the pages and that might result in lost conversions for us. Since we lack a standard today developers tend to add their own standards which results in uneven and inconsistent designs that over time turn into a mess. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/e551a742-5623-4376-9f5a-41d32f8e49c1/Desktop+-+1442.png Case Studies - Column Design System - Ux/Ui Design - Background A while back we updated one of our sites with a complete re-design but there was no thought to remove unwished design flaws such as aligning all elements so it gets easier to scan the page. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/c5920c9e-a4b4-4c6b-9e35-5ec8e379eb0c/Desktop+-+1443.png Case Studies - Column Design System - Ux/Ui Design Visualize the idea To visualize the concept in a good manner I divided the columns into 3 different screen sizes 4, 8, and 12, and marked how each element would be paired up against each column. By doing this I hoped to avoid any misunderstandings when presenting the concept to our tech department. At the meeting with our tech lead, we concluded that this definitely was the right path to follow since today’s way of working was not sustainable. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/a481c10d-cd32-4826-a59f-c2f8dd89be33/Desktop+-+1445.png Case Studies - Column Design System - Ux/Ui Design - Breakpoints Something I quickly adapted was to name the different screen sizes, small, medium, and large instead of phone, tablet, or desktop. Doing this minimizes the risk of confusion in the future and is more versatile for many different displays. Initially, I created 3 different breakpoints, from 320 px - 616 px - 952 px. When passing the largest width only the margins will change. This decision was made based on Google materials recommendations as well as the behavior of one of our sites Masterstudies.com https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/39ff4049-01b1-4f28-8bd4-d386d21b4def/Desktop+-+1444.png Case Studies - Column Design System - Ux/Ui Design Creation The next step was to recreate and define all the elements so that they could behave within the new column system. Usually, the best practice is to work mobile-first, but since all the actual content already existed I began adapting the desktop (large screen) view. I did this because the main challenge was to evenly spread all elements and on a smaller screen all elements end up on a single row anyway. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/c7341e3b-615e-4df0-8b27-ffabeae3a76f/Desktop+-+1447+%28kopia+2%29.png Case Studies - Column Design System - Ux/Ui Design Solution/ Summary To summarise the solution, I created a new 8-pixel grid and column system based on Google Material Design. This resulted in 4 different breakpoints from Small, Medium, Large, and Fixed large to really be sure all users get the best experience when visiting our sites. This will be applied to all our designs from here on and will save us design time as well as there will be a more pronounced design standard for the developers. This was one part of a larger re-design project and will work as a solid ground for further development (scaleable). This will also result in a better user experience and save the company money in the long run. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/c41e3154-01a9-40b6-abb7-bcac9c1c5771/Desktop+-+1448.png Case Studies - Column Design System - Ux/Ui Design Before https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/becba2b0-b9cc-41c1-af85-7d4fb17ed122/Desktop+-+1447+%28kopia%29.png Case Studies - Column Design System - Ux/Ui Design After https://www.kimdesign.se/design/project-one-99jlj-rzwk6-3x2p2 monthly 0.5 2023-12-04 https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/b5635cd7-2cd6-4ede-99e0-8ebd06f56112/Ska%CC%88rmavbild+2023-05-08+kl.+13.27.04.jpg Case Studies - Landing Page Re-design - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/042f4a7f-f5a0-4e7f-b478-eea60dac5cb4/visit+course+page+final.png Case Studies - Landing Page Re-design - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/82c4aa60-59b6-4177-86f2-9f0bda631ec8/Ska%CC%88rmavbild+2023-05-08+kl.+14.41.33.png Case Studies - Landing Page Re-design - Ux/Ui Design https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/4b2a7f21-cb7b-47cd-842f-c058a778af1a/Ska%CC%88rmavbild+2023-05-08+kl.+13.20.13.png Case Studies - Landing Page Re-design - Ux/Ui Design - Situation Keystone relies a lot on SEO content such as articles and guides that give the user value by providing suggestions on different schools and education. One of our formats is Top 10 pages that provide the reader with 10 different educations within a certain field. This is an image of the original design that needed a facelift* https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/e03e86a6-1f9d-4551-9774-8503c92c6170/Ska%CC%88rmavbild+2023-05-08+kl.+16.36.10.png Case Studies - Landing Page Re-design - Ux/Ui Design My process When I was introduced to this project the new design had already been created. My task was to set up an A/B test environment and analyze it as well as refine the design further based on the results. This image is what the new first iteration of the design looked like* https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/82c4aa60-59b6-4177-86f2-9f0bda631ec8/Ska%CC%88rmavbild+2023-05-08+kl.+14.41.33.png Case Studies - Landing Page Re-design - Ux/Ui Design Google Optimize set up Firstly I needed to make sure all the tracking links were set up so we actually could receive proper data. I wanted to know how many users clicked on the CTA as well as how many total visitors we had. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/a80a9066-12f7-4a00-a5b5-76552fa5ce13/ab+test+nr+1+line+graph+2.jpg Case Studies - Landing Page Re-design - Ux/Ui Design - Test 1 - The phantom test During the first test, I tested the original design against the new one. The test was active for 14 days and received 853 sessions. The original design received 18 conversions (4,17%) while the new design received 22 conversions (5,23%). An increase of 79,73%. This test did not result in a clear winner due to a lack of data, but it leaned toward the new design’s favor. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/050b2adc-394c-4c4e-90f9-dc794d4649dc/ab+test+nr+2+line+graph+2.jpg Case Studies - Landing Page Re-design - Ux/Ui Design Test 2 - The attack of the tests Since the previous test didn't give us an obvious winner, we decided to update the CTA text from “Contact Provider” to “Visit Course Page”. This decision was made due to the obscurity of the word “Contact provider“ and what it means to the user. What happens when clicking on the CTA is that the user gets to an education page, where you can read more about that specific school/course and contact them through a form (if the user wants to). This time we noticed a clear winner. Out of 3,031 sessions, the original design had a conversion rate of 5,82% while the new design had a conversion rate of 17,70%. This time around we had the test going for about a month before deciding on a winner. https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/042f4a7f-f5a0-4e7f-b478-eea60dac5cb4/visit+course+page+final.png https://images.squarespace-cdn.com/content/v1/60883c953209b71b67106240/faebeb66-4145-4970-96f7-73416cf0cf7c/ab+test+nr+3+line+graph.jpg Case Studies - Landing Page Re-design - Ux/Ui Design Test 3 - The revenge of the test We also tried the original old design against the new design with the new CTA copy. This was to make sure that it was the new CTA that improved the CTR. We could see a winner after about 16 days, and it was as expected with the new design. Out of 1,009 sessions, the old design received 6,12% conversion while the new design received 16,82%.