Shaloom

Design and Development

Shaloom

Shaloom

Industry: Wellness and online learning.

Challenge: Create a website to offer online courses related to people's well-being.

Role: Interactive UX/UI Designer and Frontend Developer.

‍

☝️

About the project

This project arises from a collective feeling that emerged in deep listening circle (coaching circle, Ulab1x technique, a group practice where the main focus is listening to specific situation). This is organized by the U school of transformation supported by MIT university. The project consisted of creating a web environment where online courses and education services for human well-being could be offered. Also, with the social intention of being able to help communities by offering these services for free or at least more accessible.

About the challenge

The group was mostly composed of therapists and coaches who wanted to offer their services online, but they lacked the knowledge or options to do so. Many of them were over 40 years old with little experience in digital world, but with a lot of experience in their roles as coaches and therapists. Later, we gathered and identified some needs and opportunities such as:

  • Therapists and coaches with little knowledge in digital world, but wanting to offer their services online.
  • Some of them had a landing page website, but it was rarely used.
  • High demand for purchasing online courses, especially after the pandemic.
  • Need to create visual identity plus logo.

We established that our challenge would be to create a minimum viable website to start offering online courses, along with the creation of a logo and visual identity.

‍

Research stage

In this stage, we focused more on understanding what similar services were in the market, such as existing websites offering online courses in the wellness sector. We also, used a tool from the theory U (MIT) called stakeholder interviews to start interviewing facilitators. For this, we created a very simple landing page to begin connecting with the ideas and assumptions of the facilitators. Based on this, we established certain project objectives.

Landig page para investigar.
First landing page.

Project goals

The following goals were established for the project:

  • Create a logo and define visual identity.
  • Create website structure with possible services to offer.
  • Create a prototype based on wireframes for iteration and reaching a final minimal page.
  • Bring the page to development.

Connecting with the users.

During the interviews, we shared a lot of feelings and thoughts with each facilitator. Based on that, we built the possible structure of the page.

‍

Shaloom sitemap
Shaloom Sitemap.

Ideate and creation phase

Iteration phase

In this phase, we iterated with the prototype and realized that facilitators needed a space on the page where they could talk about themselves, to provide relevant information about their profile. We also made some adjustments as follows:

  • We made changes to elements of the page such as icons, texts and position of some sections.
  • We removed the search filter and added category pills so the user can filter by category. The filter was removed because we had few courses and initially aimed for simplicity.
  • We expanded the description and category on the course card.
  • We added a photo of the facilitator on each course card.
  • We optimized the distribution of content on the page of specific courses.
  • We modified that contact us section.
  • We added a sign in button to access the educational platform.
  • Additionally, we added an external link to resources in the menu.

‍

Prototype

Based on the sitemap, we began to create some wireframes, but we realized that there was a lot of information, especially to start with, that was not necessary. For this reason, we decided in a first stage to remove some services and events and only focus on the online courses. An interactive prototype was created based on the wireframes, and we iterated on this.

‍

Final design

After applying the adjustments and changes in the testing and iteration phase, the shaloom website is presented as follows:

‍

Landing page.

‍

Course section.

‍

About us section.

‍

Contact us section.

‍

To navigate through the entire website and view all sections, I invite you to click on the link to the page below or at the beginning of the project (top section).

‍

Thanks you so much for your attentionπŸ™Œ.

Shaloom