Tech Used

- React
- Gatsby
- Graphql
- DynamoDB
- Markdown
- Lottie
- Adobe XD, and Illustrator, After Effects
- Figma
- Cloudinary Integration
- Sendgrid for automated emails

What Is Aritae?

Note: This is an awesome project because I had the ability to design it from the ground up and the code it!

1. A Mobile Application (React Native)
2. A Web Application
3. A Marketing Website

It’s a hard concept to grasp when working with the owner of the company. He describes it as a ‘like-mindedness of inspiration, goal-setting, and the achievement of those goals’. But throughout my time of working with him, I see it as a community of coaches that are there to help young people learn how they can accomplish their goals. Some other people that have gone through the self-leadership academy that Aritae offers, describe it as therapy for your goals. Either way, I love the project and I plan on staying in connection with the project for as long as I can.

TLDR: It is an online platform for connecting young people with a coach that will guide them through the Aritae Self-Leadership Academy. With the pairing of a coach and going through the SLA, each player will learn how to get over the obstacles in their way, and accomplish their goals.

So what did I do?

• I was responsible for looking at a list of use cases (messaging, players finding coaches, and payment, etc.. ) and turning them into wireframes and then physical designs thinking how the UX will be throughout. I designed all of the UI elements as well as planned out what 3rd party integrations we might use to solve the user experience problems that were arising out of each different use case.
• Responsible for all media creation and
• For the marketing side of the site (The static site) We used Gatsby and React. I worked with another team member to code all of my designs from scratch using tailwindcss and tailwindUI components (I’ve been loving using tailwindcss!).
• Worked with the customer over 10 weeks to go from refining mockups to refining the actual marketing site and getting their designs and content just the way they wanted. Please visit the website because it was a lot of work.
• Made a Gatsby blog using Gatsby’s graphql data layer and pulling all blog post data from amazons dynamoDB. The blog is for them to have better SEO after writing articles pertaining to their industry. And for them to advertise testimonials.

Now For the Actual Application and Mobile Application

• We are currently still in development of the web and mobile applications. (Ask me where wher are now in person! Though I will probably post some updates.)
• MOBILE: Worked with my co-worker to turn the players program into a fully customized mobile in-app experience.
• There are almost too many features to list: In app messaging, in app invoicing and other financials, a customized player and coach application process, an account setup steps guidance that keeps track of a users progress, a social media section with infinite scroll and reporting, coaches ability to customize their own program for players to go through, and much more.
• Since we are currently still in development I can’t share too much (Shhhh...)

Photos

The actual landing page for the marketing site. Designed by me and coded by me and the kirkwork team.

Our whiteboard in the office after wireframing most of the troubling UX problems like user sign up, user refunds, coach-player assignment, etc...

Figma wireframe mockups for the social media portion of the aritae platform.

This is just some of UX wireframes that we mocked up in Figma. I didn't want to overwhelm you with the rest of them.

These are the Aritae.com marketing site mockups in Adobe XD. These were fully done by me and revised about 30 times by me and our team after feedback from the aritae team.

The landing page has a video background with no sound and a pulsating play button that just begs you to click it.

A matte glass look for the drop down menu i thought was a great last minute design. It gives it that microsoft look and feel.

Here is most of the app mockups in Adobe XD. Each lesson was individually adapted to meet the needs of the program inside an app.

An upclose view of what one of the lesson designs looks like. A user enters their needs and wants and classifys them accordingly.

Adobe XD mockup of what the settings dashboard will look like in the web application.

XD mockup of our custom reusable slide out panel that is currently displaying a coach profile from an admins perspective.