The Problem

What Swing Catalyst is most praised for is being so easy to use, despite having very advanced features and integrating with an ever-growing number of hardware systems.

Users are constantly requesting new features to be added to the product and it becomes increasingly important to make the right choices for the UX design, so users intuitively know how to use these new features and at the same time avoid the existing experience becoming to complex.

The Eco-System

Swing Catalyst consists of a range of products that make a whole suite of tools.

• Desktop software: The main tool, a video analysis system that integrates and synchronizes video with hardware data and provides the necessary tools for full analysis of a golf swing or baseball swing/pitch. Built-in Lesson tool to make video lessons available over for the athlete.
• Online: Storage and facilitation of communication between an instructor/coach and their athlete(s), all lessons are sent and stored here.
• App: For recording and analysis on the move, also integrated directly with the Online cloud. Athletes can record themselves here and send to their instructor/coach for analysis and receive lessons back without having to go into a facility.
• Learning Center/Certification: A platform on the website where known instructors and our Research Director posts articles and videos on how to improve your swing technique. For Golf, we also have certification courses that give you an understanding of how to use the data from the sensor plates for analysis. This certification gives you credit in the PGA system.

The Job

I’m responsible for everything design in the product line. A day at the office can consist of anything from researching, exploring concepts and prototyping new features to talking with users about existing troubles or wishes to design new UI elements in detail and keep the external factors (emails, websites, etc) in line with the overall experience.

You could say I’m somewhat of a design unicorn, but my main focus is on exploring what a new feature actually is and who it is for, decide how it should work and look for the user and keep the software the way it is known for — easy to use.

Overview of tasks:

• UX Design
• Product Strategy
• Research
• Prototyping
• UI Design
• Front-End Development
• User research

The Process

Overall process
I’m part of the development team at Initial Force, we work in 2 weeks sprints and work based on a Development Plan that’s made for the year ahead. We set goals for each sprint and this also defines how I approach work, in general, I have 1-2 sprints to finish a general project, depending on the scale. For large scale projects, we have Epics that last over a number of sprints, with time allocated to this project each sprint.

We do reviews of this quarterly and update each planned release accordingly based on new information during that review. This is decided by the entire company and based on input from each team as well as an understanding of the state of the market and company strategy (which can change over time).

During the times in between, we keep in touch with users and gather their requests for features and general thoughts, as well as pinpoint parts of our products that we during the overall analysis see as weak-points in the user experience.

Project process

1. Research
   We start off every project with research on what we are adding/changing in the product. I gather an understanding of what problem we’re trying to solve and who we’re solving it for. In this phase, we keep in touch with relevant users or use our personas, which are divided into three different groups of users (athlete, instructor/coach and power users – who can be both the aforementioned, but with a much higher technical understanding).
2. Exploration of concepts
   We start exploring different approaches to the problem we’re trying to solve. In this phase, we often wireframe different approaches and test these.
3. Prototyping
   We start prototyping, which is usually made interactively (with Invision Studio) to get a better feel for how it would work in the product once it’s developed. This goes through a number of testing rounds, where feedback is gathered, the prototype is iterated based on the feedback and then tested again.
4. Final prototype
   Once the previous steps are done, we make a final interactive prototype which is then handed off to the developer who is assigned to the task.
   

All the documentation from the entire process is available on our internal document center (we use Confluence), but usually design

Design work is also completed quite ahead of development time, which gives us enough time to iterate and take into account new additions or technical challenges related to the project. This way we are well prepared for the development of a project and problems don’t arise while it’s being built.

The Problem

What is the best way to achieve an easy and manageable way to send offers to your customers? That can be updated quickly after a discussion and without the need for a new send out?

And what about Red Ant’s needs?

Every offer contains a series of standardized inputs:

• Information about the offer, who the client is, when it was sent and who’s the sender (contact point on Red Ants side)
• Budget information
• Pricing details
• Timeline of the project
• 1 or more references to former work or other styles for the project
• Alternative pricing offers

The individual offers should also be private between Red Ant and the customer.

Research

Red Ant, like myself, is very fond of WordPress. They use this for their primary website and they have worked with me before on a new WordPress website customized for their needs. So they were eager to have a solution on the platform, as they are knowledgable about it.

So the research process revolved around finding out what was possible and what kind of potential limitations were in WordPress.

During the process, we found that what they wanted was fairly easy to achieve and there were no limitations as far as we could find, we just needed customization.

The solution

We built a WebApp on top of WordPress, utilizing a theme with some added functionality.

On the backend, we developed an “Offer” post type with a set of custom field groups presented by section. We also removed most of the admin menu for most of the employees, just showing the Add new offer section, letting Red Ant’s employees intuitively know where and how to fill out the offer form.

For some parts of the offer, the text was usually standardized, but with an occasional need for editing, we pre-filled this content directly into the editor. This way if there was no need to make changes to the text, you just skipped that section and went on to next.

The video references are oEmbed fields, so you could just copy-paste any link from the video service of choice and WordPress would take care of the rest.

The page is set to be private and not indexed and we also added some extra code to make sure each link had a set of random characters in it, making it hard to “guess” your way to an offer URL if you tried.

Once the offer was done, you published and sent it to the client.

On the front-end, we made a responsive minimal design, with just the Red Ant logo and the information presented in different sections for each part of the offer.

The client could just check their email or save the link to see any changes made to the offer if necessary – this also makes it easier to share internally on the client’s end, no need to send an updated PDF.

The task

Create a simple landing page that teases what’s coming, without revealing too much. The feedback is still coming in from our test pilots and we’re still not set on what hardware solutions and perhaps new features to deliver with the product on launch. What we knew was that general fitness was a great focus to have, as it’s a part of an athlete’s day in all sports, combined with the elements of the actual sport they are in. And that our unique combination of synchronized video and data is the key to the product.

The branding

The team was clear on one thing, there should be a link between our product families, but it also needs to feel separate. The logos are similar, with a different contrast color and icon separating them, Swing Catalyst is also in general branded with a light theme, which made a darker approach for Motion Catalyst an easy choice.

Motion Catalyst’s immediate focus is on fitness and the team wanted to have a theme that felt a bit bolder to represent this. A well-trained body has more definition (contrasts) to it, we used this as a key element to reflect in the design. We went all dark, with the green and white colors popping out of the black.

The landing page

As we just wanted to tease, but not show off everything we made a few choices:

• The actual product is in the background and you can see that it’s about video analysis and data, but not many details.
• The small illustrations give a more clear indication of the above.
• The athlete jumping relates it to fitness, we also show our hardware, the plate, here. Relating it to the software.
• The fade-in-out animation simulates a heartbeat — when you work out you feel your heartbeats more than when you are not pushing your body.

Together with some content blasts on social media, which is also filmed to be a bit cryptic (and, hopefully, funny!), we can start creating some buzz and get people to sign-up to get notified when the product goes live.

The Concept

In my hobby of photography, nature, and especially mountains, have been the target of a lot of my shots. And being Norwegian, I’m used to having a lot of them around me. Even if I’m not a particularly sporty person, there’s nothing that beats reaching the top when hiking up a mountain trail and seeing the view.

And for me, a trip up a mountain is a lot like a design project.

Planning:
Even for a smaller hike, you need to plan a little bit.

• Where are we hiking? / What’s the project and what are we solving?
• Select what gear you need, what kind of hike is it? / What does the customer need? What tools/platforms should I use?

Basecamp:
We need to get to the starting point before we can start the climb.

• Travel to the start point / Explore concepts and ideas
• Make sure you’re starting on the right trail / Test the ideas and concepts

The Climb:
Now we have to get to the top.

• Make you’re way up the trail / Start building the project
• Remember to enjoy your surroundings and the act of hiking / Add the visuals and make it look and feel nice.

Reach the summit:
We made it!

• Make the last push / Hand the project off to the client
• Take a breather and enjoy the view / Ensure the client is happy with the final product

Today

This logo has been with me ever since 2009, only with slight changes to the color scheme based on the context it was presented with.

I use it on send-outs to my clients, such as invoices and emails. I don’t use it as prominently as I used to, as I’m not actively promoting myself these days as I’m working full-time and only take on the occasional project here and there.

But I even tattooed it on me… brand loyalty, right?