You called?
Hi, I'm Mikael.
Through my experiences I have been given the unique opportunity to often work alongside both product and marketing teams, allowing me to gain insights into a large part of the user journey. Having worked almost exclusively in-house I have also gained deep knowledge on how to maximize a brands identity on the web and on other digital channels.
I have enhanced the experience for countless of users having worked with companies in e-commerce, health, tech and travel.
Take a look at a selection of work below and check back regularly for updates on current and new projects.
Enjoy your day.
Joint Academy
— Digitizing the health care system to easier help people in need.
Joint Academy is a scale-up health tech company that helps people with osteoarthritis and joint problems through training exercises and digital contact with a physiotherapist.
I was responsible for and lead work on their web design, design system, App Store images and A/B testing. I also assisted with marketing, creative direction, product design and setting up their e-commerce.
Project Highlight
Creating a seamless booking experience
In 2023 Joint Academy acquired a small number of physical clinics in Sweden. This was a significant move away from being digital-only that Joint Academy was in prior and provided a way to diversify its revenue streams.
The clinics were part of two chains: Hälsa i Kubik and Active Rehab. Both of the chains had a booking system in place, but neither connected to the Joint Academy platform, which meant that a new system had to be built to provide an all-in-one solution that works for everyone.
My responsibilities consisted of leading the UI/UX work for the new booking system.
Starting with nothing
With no prior design, the initial work load consisted of researching and understanding the clinics' current booking services to get a foot hold on user flows and user journeys in how users navigate through multi-step options.
The research phase gave me and the product team valuable insights into their operations and provided both solutions and complexities going forward.
Materializing the research
With a better idea of the booking system requirements, limitations and opportunities, I started creating a large swath of wireframes, and with the help of product managers, to concretely map out all user journeys from start to finish. Allowing us to see the different entire flows through Figma helped us gather input and feedback from the clinics and other stakeholders.
As the project was in constant motion with requirements changing on the fly, I had to adopt a very agile way of working ensuring that the design aligned with business goals as well as user needs.
Visualizing the wireframes
With the wireframes ready, presented to various stakeholders and with an encroaching deadline, it became time to paint the wireframes with a coat of visual design.
The final design follows the Joint Academy design system (of which I was also responsible for), but are co-branded with the respective clinic chains. As the design system at this point was quite robust, I could simply use already created components for the majority of the design.
This saved time and it became very easy to share the design progress to shareholders who could provide feedback. Both desktop and mobile were worked on simultaneously to ensure that the MVP had a solid foundation.
Project Highlight
Launching an e-commerce from nothing
In the spring of 2023 Joint Academy launched its e-commerce with products such as foam rollers and exercise bands. The store was setup to help patients buy necessary equipment needed for some exercises in the various Joint Academy programs, as well as in terms of growing Joint Academy's revenue streams and diversifying the business. The e-commerce launched with over 100K SEK sales in the first month.
My responsibilities were leading the overall UI/UX design of the store, based on my extensive experience and knowledge working with prior e-commerce projects.
"Mikael excels in both product design and marketing communications, allowing him to work in cross-functional teams and grasp the full understanding of user journeys."
— Henrik Rosengren, CMO @ Joint Academy
Sembo
— Transforming the aging travel industry with AI and modern technology.
Sembo is a digital travel agency that lets people book hotels, travel and more through an easy-to-use tool.
I was responsible for the UI/UX design on Sembo’s home page, focusing on enhancing the experience for travelers in the pre-booking phase. I also collaborated and lead the design work for their AI tool, nicknamed Amelia.
Project Highlight
Using AI to transform the way travelers search for trips
I was responsible for and lead the design work for Sembo's AI travel tool nicknamed "Amelia". The project was jumpstarted to showcase the company's characteristics and capability within AI towards its users and its competition alike.
Iteration 1
The first iteration was kept simple and slightly hidden to avoid causing a spike in traffic as we had a limit in how many times the AI chat model could be called. For the UI/UX, we opted for a 'FAB', a Floating Action Button in the lower right corner of the website as the trigger, which then opened up a modal. From there the users had to sign in or sign up to continue, allowing for two user flows. If no account existed, the users was prompted to create one.
Onwards, the flows merged back into one and they were asked to fill in their travel plans. We pre-populated this field with an example text to give the users an idea of what to write. Once ready, a trip could be generated, and the users were sent to the next phase of the booking flow allowing for further customization or to checkout.
Iteration 2
Initial traffic was low as we partly expected, so to boost this we set out to make the AI more visible on the homepage which became the start of the second design iteration. We explored multiple ideas on how to make the AI tool more visible but opted to with a small banner high up on the homepage to ensure as many people as possible could view it.
We went for a purple color in contrast to the beige background color of the website to further its visibility. We also added a clear CTA and re-designed the modal to now be front and center on desktop with a full takeover on mobile to keep the focus on the AI itself and not everything around it.
Iteration 3
As a third, and final iteration that I was a part of, we made the AI conversational instead. This meant that users could now talk back and forth with Amelia in a chat like manner. In the two previous iterations the users had to go back a step to generate a new trip.
While the conversational model didn't require significant changes to the UX, I did have to re-design parts of it to now follow a chat flow. To give the feeling of instant feedback we also added prompts such as "Amelia is typing" to indicate towards the users that the AI is working. In general, I had a lot of fun working on the project as I was given a lot of freedom to shape the UX and UI of the tool within the Sembo brand.
Sembo launches AI assistant for planning and booking multi-stop trips in one flow — taking the world lead in AI development in travel
Project Highlight
Inspiring travelers in a new and engaging way
Another project I worked on, and was responsible for while at Sembo, was redesigning the pages used for countries, regions and cities. These pages are very important for Sembo, a digital travel agency, as they are used in the pre-booking phase by travelers to gather knowledge and inspiration for a future trip. The pages contain images, information and links to other relevant pages, such as hotels, on a specific country, region or city.
The redesign was due to the pages not receiving any updates for many years and were lacking in UX, SEO and up-to-date branding.
The process in short
Not to be taken as a literal representation of events as the project was worked on for several weeks.
1.
The breif
Update the pages to match current look-and-feel with the rest of the site with a great user experience to inspire and engage users.
2.
Meeting
Product team meeting talking about the brief as well as lifting potential technical and design challenges.
3.
Brainstorm
A crazy8 session is organized with the team to sketch out different ideas and generate a wide variety of solutions.
4.
Start on design
Gathering everything and starting work on lo-fi designs by organizing the content to form the layout of the page.
5.
Heiarchy
With typography and colors, I could better create a visual hierarchy, guiding the users through the content.
6.
Inspire
To inspire as many users as possible, a focus was on having image heavy pages with a large gallery above the fold.
7.
Condense
Sections with a lot of text were truncated to reduce cognitive load and help balance the layout.
8.
Present
Presenting and receiving feedback on my initial designs from stakeholders and the product team.
9.
Moving forwards
Updating the lo-fi designs to hi-fi by replacing dummy content with real data, using real imagery, presentable copy, fixing margins and ensuring standard design library components are used or added.
10.
Final input
Stakeholder review of hi-fi design which is given the green light to continue.
11.
Delivery
Design walkthrough with the team to go through hi-fi design, my process and answer any questions.
12.
Hand-off
Developers take over and start coding up the pages based off the design. Any design related questions are dealt with ad-hoc.
I like to dabble with personal projects in-between work. It keeps my skills fresh as well as staying on top of the latest design trends.
You can view my projects on Dribbble.
Hrímfaxi Hovslageri
— Creating a modern logo for a noble profession.
Hrímfaxi Hovslageri is a farrier in southern Sweden owned and operated by Emmie Thorstenson. In 2015 I was tasked to design a logo for her then new business. The core logo idea combines the horse in a profile perspective along with an anvil, a common tool used as a farrier. I created a number of sketches before presenting them all to Emmie who chose the favorite one which was then iterated upon until we were both happy.
Emmie used the logo throughout her business, including her van, on merchandising, and on her website.
The Hrímfaxi icon in black.
The Hrímfaxi icon in detail.
