meilisearch / design-team Goto Github PK

1.0 1.0 0.0 0 B

design-team's Introduction

Website | Roadmap | Meilisearch Cloud | Blog | Documentation | FAQ | Discord

⚡ A lightning-fast search engine that fits effortlessly into your apps, websites, and workflow 🔍

Meilisearch helps you shape a delightful search experience in a snap, offering features that work out-of-the-box to speed up your workflow.

🔥 Try it! 🔥

✨ Features

Search-as-you-type: find search results in less than 50 milliseconds
Typo tolerance: get relevant matches even when queries contain typos and misspellings
Filtering and faceted search: enhance your users' search experience with custom filters and build a faceted search interface in a few lines of code
Sorting: sort results based on price, date, or pretty much anything else your users need
Synonym support: configure synonyms to include more relevant content in your search results
Geosearch: filter and sort documents based on geographic data
Extensive language support: search datasets in any language, with optimized support for Chinese, Japanese, Hebrew, and languages using the Latin alphabet
Security management: control which users can access what data with API keys that allow fine-grained permissions handling
Multi-Tenancy: personalize search results for any number of application tenants
Highly Customizable: customize Meilisearch to your specific needs or use our out-of-the-box and hassle-free presets
RESTful API: integrate Meilisearch in your technical stack with our plugins and SDKs
Easy to install, deploy, and maintain

📖 Documentation

You can consult Meilisearch's documentation at https://www.meilisearch.com/docs.

🚀 Getting started

For basic instructions on how to set up Meilisearch, add documents to an index, and search for documents, take a look at our Quick Start guide.

⚡ Supercharge your Meilisearch experience

Say goodbye to server deployment and manual updates with Meilisearch Cloud. No credit card required.

🧰 SDKs & integration tools

Install one of our SDKs in your project for seamless integration between Meilisearch and your favorite language or framework!

Take a look at the complete Meilisearch integration list.

⚙️ Advanced usage

Experienced users will want to keep our API Reference close at hand.

We also offer a wide range of dedicated guides to all Meilisearch features, such as filtering, sorting, geosearch, API keys, and tenant tokens.

Finally, for more in-depth information, refer to our articles explaining fundamental Meilisearch concepts such as documents and indexes.

📊 Telemetry

Meilisearch collects anonymized data from users to help us improve our product. You can deactivate this whenever you want.

To request deletion of collected data, please write to us at [email protected]. Don't forget to include your Instance UID in the message, as this helps us quickly find and delete your data.

If you want to know more about the kind of data we collect and what we use it for, check the telemetry section of our documentation.

📫 Get in touch!

Meilisearch is a search engine created by Meili, a software development company based in France and with team members all over the world. Want to know more about us? Check out our blog!

🗞 Subscribe to our newsletter if you don't want to miss any updates! We promise we won't clutter your mailbox: we only send one edition every two months.

💌 Want to make a suggestion or give feedback? Here are some of the channels where you can reach us:

For feature requests, please visit our product repository
Found a bug? Open an issue!
Want to be part of our Discord community? Join us!

Thank you for your support!

👩‍💻 Contributing

Meilisearch is, and will always be, open-source! If you want to contribute to the project, please take a look at our contribution guidelines.

📦 Versioning

Meilisearch releases and their associated binaries are available in this GitHub page.

The binaries are versioned following SemVer conventions. To know more, read our versioning policy.

Differently from the binaries, crates in this repository are not currently available on crates.io and do not follow SemVer conventions.

design-team's People

Stargazers

Watchers

design-team's Issues

Organize the Figma files

Context

With the arrival of @chayaline, we decided to rework the way we organize the information on Figma. In her previous job, @chayaline set up processes and organizations to facilitate work between several designers and developers.

Goal

This issue aims to find a file structure for Figma.

Ressources

Figjam whiteboard researches

File map and explanations

Todo

Expose the possible organizations
Choose one organization with @lpinot
Apply the new organization
define and create a file template (to be used after the Beta release)
define naming conventions
define processes
list the needs in terms of covers and design helpers

Register: add a "join the cloud beta" button

Context

Some users are trying to register with emails that haven't been approved yet. Some others might access the cloud before stumbling across the cloud beta registration form. To solve that we would need a Join the cloud beta button, and add a link inside the corresponding error.

Resources

Figma mockups and flows

Tasks

add join the cloud beta CTA on the register form
add a join the cloud beta link to the Email address not allowed error

Design the new SWAG Style

Context

Now we have a new branding we need to design and command a new bunch of SWAG items—T-shirt, pullover, sweat-shirt jogging, flip-flop, socks, whatever.

We are waiting for the approval of Morgane Neff to start to prioritize this task.

Manually upgrade the cloud plan

Context

Any user who has a service that grows over time or who has underestimated his resource needs to be able to increase the size of his machine easily. We have several plans with dedicated resources per plan. We would like to allow users to upgrade their plans when they want and Instantly.

Goals

define a clear and fast flow for users to upgrade their plan

Resources

Project resources view (upgrade resources section)
Upgrade resources modal
flows

Task

define user flows
design screens

Create the new landing content

check and improve error messages

Context

Error messages should be clear, concise and helpful

Resources

Current error messages:

export const getErrorMessage = (errorCode) => {
  switch (errorCode) {
    /* User login */
    case 'user_login_invalid':
      return 'User credentials are invalid'

    case 'user_not_verified':
      return 'User email not verified'

    /* User register */
    case 'user_creation_error':
      return 'Unable to create user, please try again'

    case 'user_email_exists':
      return 'Email already exists'

    case 'user_email_invalid':
      return 'Email format is invalid'

    case 'registration_not_allowed':
      return 'Email address is not allowed to create an account'

    case 'user_name_invalid':
      return 'Name format is invalid'

    case 'user_name_unchanged':
      return 'The new name should be different from the old one'

    case 'user_password_match_error':
      return 'New password and password confirmation do not match'

    case 'user_email_match_error':
      return 'Email address and email address confirmation do not match'

    case 'user_email_unchanged':
      return 'The new email should be different from the old one'

    case 'user_password_invalid':
      return 'Password format is invalid'

    case 'user_password_unchanged':
      return 'The new password should be different from the current one'

    case 'password_token_expired':
      return "Password token doesn't exist or has expired"

    /* User deletion */
    case 'user_deletion_error':
      return 'Unable to delete user'

    case 'user_deletion_has_project':
      return 'Unable to delete user because at least one active project has been found'

    case 'user_deletion_has_item_subscription':
      return 'Unable to delete user because the subscription is not empty'

    /* Account */
    case 'user_password_error':
      return 'Password is invalid'

    case 'confirm_text_invalid':
      return 'Please type "delete my account" in the confirmation field'

    /* Projects */
    case 'project_create_name_exists':
      return 'Project name already exists'

    case 'project_name_invalid':
      return 'Project name is invalid'

    case 'project_payment_method_missing':
      return 'You need to add a payment method in the billing settings'

    case 'project_billing_address_missing':
      return 'You need to add a billing address in the billing settings'

    case 'project_version_missing':
      return 'You need to select a version'

    case 'project_create_error':
      return 'Unable to create project, please try again'

    case 'project_not_found':
      return 'Project not found'

    case 'project_update_error':
      return 'Unable to update project'

    case 'project_update_name_exists':
      return 'Project name already exists'

    case 'project_update_name_invalid':
      return 'Project name is invalid'

    case 'project_name_mismatch':
      return 'Project name does not match'

    case 'project_delete_error':
      return 'Unable to delete project'

    /* General */
    case 'unauthorized':
      return 'Unauthorized request'

    case 'not_found':
      return 'Not found'

    case 'form_invalid':
      return 'Please check the form'

    default:
      return 'Unexpected error, please try again'
  }
}

export default getErrorMessage

Clean Demo Movies file

Decline the branding in every social application

Twitter banner & logo
Dev.to logo
Instagram logo
Youtube logo

Project status

Context

The link redirects to an error page when the project is not yet created, has failed, or is updating. The status not active is not giving enough information to the users, they could think something is wrong on their side.

Goal

We want to clarify what is happening : create new statuses, and disable the url to avoid frustration

Resources

Todo

add new statuses creating, updating, failed
change inactive and not active to running and stopped

Create/import a dump flows

Context

Add a way for users to import and export dumps of their projects

Resources

Billing view: improvements from testing sessions

Context

After conducting 6 user shadowing sessions, we gathered a lot of feedback about the billing view.

Tasks

missing explanations about why users are billed for 1hr when they used the project less than 1hr
missing explanation about what the hours count is
it's not clear that it is an estimation: add explanations and put the word estimation in emphasis
add the currency symbol on the hourly cost
use only 2 digits after coma for numbers
add the server's location in the summary
add a visual cue to tell users if they have a registered working card
add a "deleted project" indicator on the summary list

Deliverable

Figma Mockups

Design a newsletter block for the landing page

Add a new newsletter block in the landing page with an input

Implement the new mini-dashboard

Todo

TODO détaillée :

Facets

Design des checkbox
Design de la sidebar visible / hidden
Stocker dans le localStorage si la modal doit être ouverte ou fermée
Implémenter les facets de type number
Design des facets de type number
Implémenter les facets de type string
Design des facets de type string

A simple interface with:

The search bar with the response time and the numbers of candidates
An optional input for the API Key
The search results, pretty view or json view with a switch
The facets results with the facet count
An optional input for manual filters (advanced mode)
No pagination, load more result (button)
liste des liens utiles (github/documentation)

Cloud v1 structure and navigation

Context

With a lot of new feature coming, we need to work on a flexible and easy to use navigation and IA

Resources

Tasks

IA
Wireframes
Tests proto low-fi
UI

Include on the cloud design the fact that a project could have multiple URLs

Context

The complete context is on the Tracking Issue https://github.com/meilisearch/product/issues/399
for now 2 urls: the old one and the new
then users could eventually have more

Final mockups

Todo

Update landing page with clients logo on the homepage

Create illustrations for v0.28 Navigate through search results guide

Create a design testers group

Context

With a new version of the cloud and a growing number of beta testers, we can take this opportunity to start testing our designs with real users.
For this an ideal way would be to constitute a group of users willing to help us improve the cloud's design.

Tasks

write NDA
collect user's agreement to participate in tests
think about an incentive for testers
recruit users: could be slack-community cloud channel, crisp/intercom database, or random paid testers from Reach
import list on reach
define rules for sending tests (for example: no more than 1 mail per 3 weeks etc)

Make some artboard for the public roadmap

Today on the roadmap, we only have text to describe the feature. Moreover, we have more and more features and it becomes complicated to find the features visually. It would be really cool to make small illustrations that represent each feature.

Create a notification center for the cloud

Context

On Meilisearch Cloud we need to provide feedback to users. Information such as an update to Meilisearch, an invoice that has just been credited, a problem with a project, etc.

Todo

UI for the cloud onboarding

Define how we display errors

Context

Define how and when to display each type of error and notification

Resources

Errors guidelines

Tasks

define contextualized errors behavior
define global errors behavior
define special cases
add missing components

Update the "why Meilisearch" block so it is more intuitive

Add some arrows or an animation around the search bar so the user knows it is clickable

Develop the new landing page

Design the movies demo

Todo

Figma

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwUUkpIROZ0r89FxAy3ttLU%2Fwireframes-movies-demo%3Fnode-id%3D0%253A1

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwUUkpIROZ0r89FxAy3ttLU%2Fwireframes-movies-demo%3Fnode-id%3D66%253A164

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwUUkpIROZ0r89FxAy3ttLU%2Fwireframes-movies-demo%3Fnode-id%3D155%253A146

Prepare all repos to the new branding

UI design for the responsive pricing helper quizz

Description

Create a block on the pricing page that will help users to choose the right plan on the cloud. This quick is like a form with the following questions:

What is your use case?
How many searches per month do you have?
What feature are you interested in?
How many documents do you have?
What is the total size of your documents?
What update frequency do you need?

At the end, the goal is to show the user the plan that fits perfectly to its needs or to tell him to contact a salesperson.

Ressource

https://www.figma.com/file/nIpVrmcFiW5LuaBhZBPxOT/Pricing?node-id=209%3A10623

Steps

Create a wireframe representing the different choices
Design the desktop version
Design the mobile and tablet version

Design the Ressource center

Branding from Unfold

Write the Design Principles

Context

Now that the design team is composed of 2 designers, we need clear design principles to follow

Goal

This issue aims to define design principles for the SaaS, that can also be used for design in general.

Ressources

Workshop on Figjam

design principles posters
design principles on notion

Todo

Create workshop template
Have a design principles workshop with 6 persons
Find the right phrasing for the principles discovered during the workshop
Create in-brand visuals to explain and expose them @lpinot
create documentation on notion

add a way to choose how to receive notifications, and which ones

Context

Now that we have notifications, we need a way to let users choose which notification they want to receive, and through which canal (in app, email, etc...)

Resources

- Figma file

Tasks

add a possibility to activate or deactivate notifications on email and in-app

Redesign the mini-dashboard

Todo

Definir la liste des composants à afficher
Faire un draft/ wireframe (1/2 journée)
Mettre en page les résultats .json/mode joli (1/2 journée)
Faire le mode Advanced (en dessous de la search bar) + Designer l'API key (1/2 journée)
Retours et modification après call team core (1 jour)
Final tuning (1 jour)

A simple interface with:

The search bar with the response time and the numbers of candidates
An optional input for the API Key (+ text)
The search results, pretty view or json view with a switch
The facets results with the facet count
An optional input for manual filters (advanced mode)
No pagination, load more result (button)
liste des liens utiles (github/documentation)

Organise Landing folder on Figma and create a SOT

Description

Create a file by page instead of having all the pages in the same file.

Steps

Separate the files
Organize and clean each file
Add a cover
Create a SOT file

Script rules

Don't return a specific movie if it has :

no provider
adult: true
vote_count < 100
popularity < 2

Design

Dark mode by default

MeiliSearch config

Primary key

id

Searchable Attributes

title (1 for movies)
name (1 for tv-shows)
overview (2)
keywords (3)
credits (4)

Facets Attributes

popularity
release_date
vote_average
providers_name
genres

Display Attributes

id
title
overview
popularity
release_date
runtime
vote_average
external_ids
poster_path
backdrop_path
providers
genres
credits
// Tv Shows specific
name
number_of_seasons
first_air_date
episode_run_time

Onboarding: improve the onboarding

Context

When first arriving on Meilisearch Cloud, people seem a bit lost, even with our current 2 steps onboarding.
From what we can see on hotjar:

they try to click everywhere, including the title of the page
they click on the open documentation first, even if it's step 2
they stop creating a project when we ask for the billing information

Proposition

present one step at a time
include the information directly in the Cloud instead of directing them to the documentation
add links to videos and documentation articles for people needing even more guidance

Resources

Figma file

#related to

Add some nice demo animation and images to the documentation.

Everything should be seen with the devrel team

Create the scaffolding

Create a UI guide for demos

Description

Create a guide to help the devrel team to create nice demos.

Context

The devrel team struggles to do demos with a clean UI that fits our branding

Steps

Explain the font system
Explain the colors
Explain the background/cards

Landing typography changed on the home pages

Context

In order to harmonize the fonts used on the home page and the prices page. @lpinot has updated last week the text styles present in the Figma Landing project. This action has unfortunately changed the fonts used on the homepage. If I understand correctly, this leads to inconsistencies between what was designed some time ago (implemented since) and what is now on the designs.

I know @lpinot and @mdubus have already talked about this privately but I wanted to create this issue to make sure that the topic would be properly addressed and prioritized.

@mdubus, @lpinot don't hesitate to update this issue with more details.

Objective

Have a consistent design system on all pages of the website.

Update the Figma files to reflect design changes directly made in the cloud

Communicate with the new branding

create a notification component

Context

We need a component to show notifications to users

Resources

Figma file

Tasks

notification component

Define the objective/message

UI design for the company page

create a notification panel

Context

We need a way for users to browse all their notifications, read or unread

Resources

Figma file

tasks

notification panel, with empty state
notification button in the nav bar
flows

Help center: changes before release

remove FAQ
remove the stickers button
add button for the helpcenter
maybe an illustration?

resource

Figma mockup

Create the wireframe

Organize the design system

Context

The goal of a design system(DS) is to have a shared library of flexible components and tokens that we can use quickly to design new mockups, and that developers can refer to when they need it.
It will help us design faster, maintain consistency throughout the SaaS and other projects, and simplify the developer's work.

Goal

Have an exhaustive and up-to-date library of UI components.

Ressources

Design System file

Todo

Organize the DS according to the atomic design methodology
Define a naming system for the variants props with the devs
Make the existing components use the variants system
Add missing variants to those components
create an inventory of components on Notion, that will allow us to see quickly what's missing on Figma or storybook
Add more typos for both the cloud and the website @lpinot
Review the colors in the design system @lpinot

Define and display user and project slug

Context

see https://github.com/meilisearch/product/issues/406

Tasks

add verification on username input, no spaces, only alphanumeric and hyphens
add full name => unique slug
prefill the name input based on the email - ex: [email protected] => name = my-name or myname, add numbers if already used