https://johnjcampbell.co.uk/work daily 1.0 2024-09-06 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/984d15d9-932a-486f-9c93-b7fbffef627f/Bike+comparison.png Work - Bike comparison tool Empowering users to make effective comparisons when comparing bikes online. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/a64fdbf2-cab6-4a41-808c-ae3b285979d7/Accell.png Work - Accell Group Designing a scalable international design system and building a headless E-Commerce platform. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/bf208055-a667-4730-a0a0-24dc63a5c0e7/Rituals.png Work - Rituals Defining UI foundations to bridge the gap between design and development. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/b150e7d0-faab-40a4-8e63-2fe395f0e478/Schuh.png Work - Make it stand out Schuh Bold moves and bright trends, Redesigning the Schuh website. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/a9c2ddf5-ad57-4014-a23a-253e77add42e/Scottish+Power.png Work - Scottish Power Developing a design system and establishing a UX/UI process within a large organisation. https://johnjcampbell.co.uk/about daily 0.75 2024-09-06 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/95ecf21f-7f7b-4019-b796-ebcac750b79a/me.jpeg About Outside of work this ol’ dog loves to learn new tricks. I love to cycle endlessly, cook Scottish delicacies, tell wee stories hill climb, dance to good music and share in a good laugh wherever and whenever I get the chance. My specialties lie in UI/UX and product design. For the past few years I have worked with a multitude of different brands to build truly scalable design systems to serve a wide range of business and user needs. I truly believe design can help create a better tomorrow. To get in touch with me about work or an upcoming project reach out on Linkedin or drop me an email. https://johnjcampbell.co.uk/bikecomparisontool daily 0.75 2022-03-11 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/f09c7ad4-5ee5-4b22-89d5-7bc003993f3a/importance.gif Bike comparison tool - 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/61debb5cce2601437d330f1a/a2fc3f72-eab4-449a-a7f2-c9e01cd67e2d/Screenshot+2022-01-21+at+15.03.41.png Bike comparison tool https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/9ea88361-81ec-4290-83f1-254bc77b6068/UPullup.png Bike comparison tool - 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/61debb5cce2601437d330f1a/9102ea5c-d9a2-450d-8f39-36c9ba9bac2c/Screenshot+2022-01-18+at+16.01.46.png Bike comparison tool https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/24ac7158-1b59-4c04-aefe-c89c8c03569f/Compare.png Bike comparison tool - 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/61debb5cce2601437d330f1a/96d03a17-407f-4c84-92e1-823d12bd9710/3items.gif Bike comparison tool - 1. Don’t allow for too many items in comparison. What we found in our research is that having too many bikes for comparison could be cognitively overloading. I think we all know the feeling that too much choice can often be a difficult thing when it comes to making a purchase. For this reason we choose to limit the number of bikes in the comparison to 3 initially pending further user testing and research. When the user puts in their first bike the pull up opens with a message informing them they can compare a maximum of 3 bikes. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/8ddeeafb-2bef-4c0c-8ab9-85c0eb66929a/Screenshot+2022-01-19+at+11.43.14.png Bike comparison tool - 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/61debb5cce2601437d330f1a/1642517511101-OEEQKXQ90E4ZN9JXEVOU/unsplash-image-m2TU2gfqSeE.jpg Bike comparison tool - Key Insights Don’t allow for too many items for comparison Information consistency is key when comparing. Give users control over what is important to them. Simplify the experience for mobile. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/57757062-b21c-47f4-9d53-b486406a10b7/mobileexp.gif Bike comparison tool - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://johnjcampbell.co.uk/schuh daily 0.75 2022-01-14 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/f945035d-a125-40e7-9231-ace0f4074ecc/before.png Schuh - Make it stand out Before redesign https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/03200816-3689-48cc-a986-1ed4f6193951/Schuh.png Schuh https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/88417a18-babd-4e60-88c6-cb354c8b67ad/after.png Schuh - Make it stand out After redesign https://johnjcampbell.co.uk/scottishpower daily 0.75 2022-01-17 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/55fcc446-02d7-4714-b8a1-cbe045e613cd/SPMYACC.png Scottish Power - 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/61debb5cce2601437d330f1a/170c45cb-bd09-48e5-9f7c-5e3ef4e1006b/SP.png Scottish Power - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://johnjcampbell.co.uk/accellgroup daily 0.75 2022-03-22 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/a7aba61c-091f-47a4-882d-09c902b08636/Screenshot+2022-01-20+at+11.46.13.png Accell Group - 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/61debb5cce2601437d330f1a/b56ae158-6b55-4373-a01b-1a20dd6888d1/Stylesheet.png Accell Group - Make it stand out The result of these two means that our “stylesheet” is produced in code by a collection of decisions; this can be seen in the example above. Here options and decisions aren’t buried in Sass files. Instead, they are centralised and propagated as tokens for any designer or developer adopting the system in an easy-to-use predictable format. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/a59ccd65-4a97-44f8-a9e8-550282defef1/1ec4b99a-c5ca-4a87-a19e-ef6ba3ca40d3.png Accell Group - 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/61debb5cce2601437d330f1a/d827531e-4c29-41ba-a621-462f62a9df3c/Decisions.png Accell Group - “What choice do I make?” Our design system submits decisions. Decisions are options applied to contexts. In the example you can see where we make the decision to call on the blueGradient option to a backround. https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/caaca833-39a9-42d9-af4e-0bf92453d8b2/Options.png Accell Group - “What can I do?” Our design system offers options. Options are visual identity properties. In the example you can see how colours for a brand are built up. https://johnjcampbell.co.uk/gcu daily 0.75 2022-01-14 https://johnjcampbell.co.uk/rituals daily 0.75 2024-09-23 https://images.squarespace-cdn.com/content/v1/61debb5cce2601437d330f1a/114843d9-8192-4003-9976-831a226c7da6/17shots_so.png Rituals - Make it stand out Whatever it is, the way you tell your story online can make all the difference.