JÄG UX/UI App Prototype Sample


JÄG - A holistic approach to wellness overview

Trig developed the JÄG prototype to serve as a visual and interactive guide for the back-end development team. All assets developed within the prototype are available for the development team’s use in the form of an assets export.

This case study is currently a work in progress, but still allows a glimpse into the general structure of our design process and the outcome expectation of a UX/UI App Prototype project.


Tools and Services

Logo Design






every project has a beginning

We begin all of our projects by first defining the scope of the project and then diving into research in the area we want to address. It is vital to understand as much as you can about the problems you want to address as you begin your design process.

For this particular case we are directing our focus on the issues of medication non-adherence. Medication adherence usually refers to whether patients take their medications as prescribed, as well as whether they continue to take a prescribed medication. Failing to do so, non-adherence, is associated with adverse outcomes and higher costs of care as the medical situation could worsen.

In order to best design adequate solutions, we need to understand the precipitating factors of non-adherence to medical plans. What are the pain points that prevent a patient from following its prescribed treatment? According to the American Medical Association about one-quarter of new prescriptions are never filled, and patients do not take their medications around 50 percent of the time, and the top 8 reasons that patients don’t take their medications are: Fear, cost, misunderstanding, too many medications, lack of symptoms, worry, depression, and mistrust.


Persona Development

getting to know you

As we work through the information gathered during the research phase we can begin to image our primary user. Our persona, if you will.

For this particular project our persona, Jane Doe, is an administrative assistant in her late 20’s. She is motivated by improving her health, time management, and stress reduction. She uses smartphone technology, social media, and apps that serve important notifications.

Building personas helps to guide us, as designers, through our process.


Wireframe Framework

I’ve been framed

As we begin to understand the problems that we want to address, and the personas of the people we are designing for, it is important to map out our ideas in a lo-fi, easy-to-understand way. This process can be done with multiple methods, but generally we start with hand sketched, or slightly more refined wireframes that serve as the building blocks and roadmaps for the layout and function of the application.


Sitemap Framework

almost as good as a treasure map

Another important step in our process includes site mapping the architecture of the app in a way that is easily digestible. Seeing how all elements of an application function together, at a glance, helps us navigate any potential pain points and gives us an opportunity to refine our design with each successive iteration.


Brand Exploration

telling the whole story

In tandem with the UX/UI design process, Trig has the capabilities to create the story behind the brand.

For this case study we developed a name, logo, and color scheme that would speak to the research and the users we were trying to reach. JÄG (pronounced jog) was named based off of the phrase “jog your memory”. The logo, a “J” combined with a typical pill shape, was designed to work simply at any scale, and uses a color palette that invokes feelings of trust.

After developing all the brand elements we are easily able to “skin” our wire frames with our branding system.



Interactive Protoypes

go on, give it a spin

Part of what we deliver from our process is an interactive prototype. This prototype can be shared for review with stakeholders, usability testing, refinement, and as a guidepost for the development team.

Although the JÄG prototype example is still in development (not all buttons are clickable), it should be able to capture the general function and feel of what we are able to deliver. A finalized prototype would include 100% clickable elements on all pages.

Feel free to click around on the the example to the right to explore more deeply.

**clicking anywhere on the prototype that does not have an attached action will highlight the functions that are clickable