SoutheRN SCHOLAR

Branding | UX & UI Design
Southern Scholar Website Pages

NORAXON

Noraxon is an industry leader in human metrics and biomechanics research. They provide practical and flexible hardware and software solutions for measurement applications.

PROBLEM = OPPORTUNITY

Their current software interface was outdated and failed to meet the evolving needs and expectations of it's users. They needed to update their interface to meet current design standards, enhance usability and improve the overall user experience.

DESIGN SOLUTION

I was hired to redesign Noraxon's software interface. By developing a new repository of design assets, I created a design system that better represented Noraxon's design language. The consistency and efficiency of the new design system led to an enhanced user interface.

MY ROLES

- Research
- Competitor Analysis
- Illustration
- Prototyping

TOOLS USED

- Figma
- Illustrator
- Photoshop

Our Process

To achieve our goals for this website, we followed the five step design thinking process. The goal here being to first understand the problems that needed to be solved, so that we could then come up with solutions to successfully solve those problems.

6 step design process

WHO USES THIS SOFTWARE?

The first step in solving the problem at hand was to empathize with Noraxon's users. The people using their software include but are not limited to sport scientists, strength training and performance coaches, researches and physical therapists. Their primary goal is to understand injuries in order to improve their prevention and treatment. Research consisted of exploring how other software companies have utilized more modern and up to date user interfaces.

Understanding The Market To Make Informed Decisions

It was very difficult to find other human movement metrics software products to look to for inspiration. They all operate on a SaaS business model, meaning that I did not have the ability to experience firsthand how they have designed their software interfaces. This gave me the unique opportunity to get creative and seek inspiration from other software interfaces that I interact with in my daily life. Based off of the brief I was given, I worked to find visual inspiration to help establish a direction to move towards.

Noraxon Moodboard

User Personas

User Persona 1User Persona 2

CREATIVE EXPLORATION & CONCEPT DEVELOPMENT

It was now time to clearly define the problems that needed to be solved. Once this was established, I was then able to begin the ideation phase of the design process. I collaborated closely with the team at Noraxon, utilizing their feedback to iterate and refine my design concepts.

This project was broken down into three phases:
1. Redesign the application tiles
2. Redesign the navigation system 
3. Prototype a new software interface

Refining The Application Tiles

The application tiles act as buttons, opening up a new measurement tool when clicked on. I created custom illustrations for the full suite of tiles. The new tiles that I designed better represent Noraxons's visual identity and personality as a brand. They are also more consistent and simplified, making the interface easier to interact with for users. Once the tiles were designed, I built out components in Figma with different variants for the default resting state, hover state and active state of each tile.  

New symmetry application tile
New Jump application tileNew Biofeedback application tile
New Gait application tileNew Pitch application tileNew Ergonomics application tileNew Balance application tile
New Timed Up & Go application tile
New Application Tile
Old Application Tile

Simplifying The Navigation System

The old navigation icons were flashy and overly designed. Their job was to create clarity for users and they were failing to do that because they all felt too similar to one another. When designing the new set of custom icons, I chose to embrace minimalist design. Simplicity helps users to quickly understand and navigate through the interface, leading to a better user experience. Once the icons were designed, I built out components in Figma with different variants for the default resting state, hover state and active state of each tile.

New Navigation
Old Noraxon navigation
Old Navigation

Color & Typography

To ensure consistency across the user interface, I created a color and typography design system for Noraxon.

Southeast Valley Alliance website information architecture

THE NEW INTERFACE

The last phase of this project was to build out a prototype in Figma. The final software interface was used as a communication tool that I shared with developers and other members of the Noraxon team.

Southeast Valley Alliance Mobile Mockups
New Interface
Southeast Valley Alliance Mobile Mockups
Old Interface

CHALLENGES & LEARNINGS

Design is iterative. I really enjoyed this project because I was able to move quickly through ideas and concepts. I shared my designs with the Noraxon team, gathered feedback and insights, then iterated to improve my designs. Design, learn, refine - rinse and repeat.

Design isn't always going to be perfectly linear. It would be ideal to work smoothly through the design thinking process, but constraints don't make this possible at times. This was one of those times. I had no direct communication with users to run testing or gain feedback. I simply had to work with what I was given to the best of my ability. In order to "get it done", adaption is critical.

Handoffs are challenging when working in a silo. I also had no direct communication with any developers. I worked with a project manager, who oversaw this projects implementation from conception to completion. Communication is essential when collaborating among cross-functional teams like this in order for a product to be successful. Cue the importance of a strong design system.

Enhancing the user experience of a product is always going to drive positive outcomes and contribute to meeting business goals. The new software interface that I designed plays a crucial role in this process for Noraxon.