To design an app that coordinates with the freelance industry, that allows to book spaces for their classes, to find inexpensive classes to attend and to rent out their spaces for extra income. For this client project, we decided to focus primarily on how the would interact with the app.

The Tools

  • Figma
  • InVision
  • Sketch
  • Photoshop
  • Illustrator

The Process

Once we had our meeting with the client, we came to the conclusion that Junto was a multifaceted app. Because there are three stakeholders, we would have to design the UX and UI for three separate classes of users. Students would need to search and book classes to attend, Yoga Teachers would need to book spaces and post about upcoming classes and lastly, Venue Owners would need to advertise their spaces and confirm bookings. As a team we decided to break down the process and primarily focus on the yoga teachers. Focusing on the teachers allowed us to bridge the two other groups of stakeholders.

From there we were able to ask ourselves, what mood do we want for Junto? What features are important for our users? How can we create a seamless and enjoyable app for all stakeholders involved?

Design Inception

Final Design Inception

From our meeting with the client we were able to create our design inception. Having a solid design inception gives us a foundation to build on in terms of creating mood boards and our final design.

Some of the key words that really resonated from our conversation with our client were:

  • Community
  • Organic
  • Friendly
  • Collaborative
  • Inviting

Once we had established our primary words to focus on and a completed inception, we were able to begin designing our mood boards.

Mood Boards

First Mood Board iterations
Tested Hi-Fis with original colour scheme

Above are the three mood boards that my partner and I designed for our client. The first was aptly named “Potluck” and was to demonstrate the community and inclusive vibes of our design inception. The second is called “Airy Editorial” and is more airy and organic. The last was “Mind and Body” which was designed to be inviting and a direct appeal to yoga. Our client really enjoyed the “Mind and Body” mood board, however felt that the colours were too muted after we did a few Hi-Fi mockups with the colour scheme, as you can see on the right.

Final Mood Board

After seeing the Hi-Fis with the original colour scheme, it was agreed that the colours were too muted and needed more of a pop. Taking from the “Mind and Body” mood board, I simply increased the saturation and tweaked the two primary colours slightly, the teal and fuchsia are the results. The grey was a solid choice for the typography and we included a dark navy as a tertiary colour.

Style Guide

The style guide includes the typography, iconography and components used for the UI Design.

Final Style Guide

For the typography, we chose “Nunito”. It is a sans serif font that is modern and rounded. The rounded letters gave a friendly characteristic and a softer look, which lent well with our design inception. Nunito is easily legible as copy text and a strong stand alone font for titles.

Wanting to maintain our simplistic and organic outlook from the design inception, we were able to create a set of icons that had the same rounded edges as our font and were simple line drawings.

The Components; such as buttons, drop downs, tabs etc. were more fun to work on. We originally had two versions of UX to work with, Android and IOS. IOS implying that the components would be more minimalist and simple, whereas Android would be more material design and tactile. Depending on which version the client preferred, it would affect how the components would be designed. With this in mind, my partner and I decided to pick a version each and do Hi-Fi mockups, so that the client could determine which style they preferred. I chose to work on the Android version because I enjoy the look of material design and have not worked in that style previously.

Printouts comparing IOS to Android

We printed out our Hi-Fis to compare the Android and IOS designs and see what aspects worked best for Junto. In the end we all collectively agreed that combining the two designs would be best. We decided to keep the minimalistic look of IOS while incorporating the material design to the cards, header, footer and certain buttons.

Final Delivery

Working on Junto was a great experience and having to apply material design as well as IOS design to a mobile app was a learning curve. It pushed me to learn more about how mobile apps are designed and the languages used for different programs. It was very refreshing to work with another UI on this project and to have another set of eyes to provide insight. Our team worked closely together for the duration of the project and we were all able to contribute to the UI and UX design, which allowed us to deliver a polished, final product that our client was thrilled about.


Source link https://blog.prototypr.io/junto--together-yoga-teachers-students-and-venue-owners-d035ef3f7855?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here