2019년 9월에 저는 Spot Educação 에서 일할 UX/UI 디자이너로 고용되었습니다 .

저에게 할당된 프로젝트는 영어 학습 불안에 대한 완벽한 솔루션을 찾는 저예산 학교를 대상으로 하는 B2B 제품이었습니다. Go Bilingual 의 주요 목표는 저렴한 비용으로 영어 학습에 관한 전문 지식을 제공하여 교사와 관리자를 대상으로 하는 친숙한 응용 프로그램으로 학교에 접근하는 것이었습니다.

이 개념은 많은 기능을 약속했습니다. 그러나 그것은 정말로 무엇 이었습니까? 사용자, 그들의 여정은 무엇이었습니까? 그렇게 짧은 시간 안에 실제로 얼마나 많은 것을 개발할 수 있을까요?

여기서는 지금까지의 여정, 제품 개발 및 디자인에서 배운 모든 것과 우리가 구상하는 미래에 대해 설명합니다.

1. 발견

Spot Education 에서 일 하기 시작하자마자 모든 것이 암울해 보였습니다. 개념에 대한 아이디어가 있었지만 여전히 존재하지 않았습니다. 우리는 그것에 대해 몇 가지 기능이 필요하다는 사실 외에는 아무것도 몰랐지만 그것조차 순조롭지 않았습니다. 길은 안개가 자욱했고 불확실성으로 가득 차 있었습니다. 최종 사용자가 누구인지 몰랐습니다. 많은 기능이 실제로 MVP 에서 실행 가능한지 여부는 알 수 없었습니다 . 우리는 제품이 처음부터 완전히 새로운 아키텍처로 작성될 것인지, 아니면 Edify 라는 회사의 이미 작동 중인 제품에서 기존 제품을 복제하고 거기에서 시작할 것인지조차 알지 못했습니다.

우리 제품이 무엇인지 발견하는 것이 정말 중요했습니다. 그래서 우리 회사는 Grito.cc 형태로 외부 도움을 고용했습니다 .

Grito 는 브라질 리우데자네이루의 디지털 디자인 에이전시입니다. 그들의 초점은 우리의 문제에 대한 훌륭하고 민첩한 솔루션을 제공하는 것이 었습니다. 그들은 교사 및 교수들과 약간의 연구를 수행했으며 디자인 스프린트 를 위한 모든 것을 설정했습니다 . 그들은 또한 이 연습과 우리 고유의 디자인 정신 및 방향을 기반으로 데스크톱 및 모바일 애플리케이션 모두에 대해 6개의 화면을 제공할 것입니다.

처음부터 우리는 우리 제품에 무엇이 있어야 하고, 있어야 하며, 없어야 할 것과 없어야 할 것이 무엇인지에 대해 논의하기 시작했습니다. 우리는 서로 다른 배경, 연령 및 사회적 지위를 가진 4명의 페르소나를 작성했습니다. 모두 교사였습니다. 우리의 연구와 공감 운동이 우리에게 보여준 주요 사실은 교사들의 주요 고충 중 하나는 그들이 더 많은 전문적인 지원을 받을 필요성을 느꼈고 또한 그들의 교육 요구를 겨냥한 중요하고 관련 있는 콘텐츠에 더 많이 접촉해야 한다는 것이었습니다. 그들은 전문가로서 자신을 향상시키고 싶었습니다.

내부적으로는 학교 관리자와 관리자의 고충도 고려해야 할 필요성을 느꼈습니다. 그래서 우리는 자체 조사를 수행하고 내부적으로 우리 응용 프로그램을 사용하고 직원을 관리하고 예약 주문 등을 수행할 사람인 고유한 페르소나를 생각해 냈습니다.

그래서 기본적으로 우리는 하나에 두 가지 제품을 가지고 있었습니다. 교사와 궁극적으로 학생이 사용하는 교사 포털. 그래서 우리는 둘 다 디자인하고 개발했습니다.

2. 정의

그렇다면 애플리케이션을 어떻게 개발하고 디자인할까요? 어떤 기술이 사용될까요? 디자인은 어땠을까? 디자인 스프린트, 자체 연구 및 비즈니스 요구 사항이 끝나면 제품을 어떻게 정의할 수 있습니까?

제품이 이미 판매되었으므로 처음부터 완전히 새로운 아키텍처를 설계하거나 회사 제품 중 하나인 Edify 에서 이미 사용하고 있는 기존 아키텍처를 복제하는 것이 수익성이 있는지 논의하기 시작했습니다 . 의사 결정권자들은 우리가 빡빡한 일정에 있고 최대한 빨리 엑스트라넷을 제공해야 했기 때문에 후자를 결정했습니다.

동시에 우리는 Teacher's Portal이 어떤 것인지 정의하기 시작했습니다. 교사를 위한 웹 반응형 솔루션으로 교사로부터 전문적인 지도와 멘토링을 받을 수 있습니다.

따라서 기본적으로 이러한 모든 현명한 결정과 정의를 통해 양방향 방식으로 제품을 개발 및 설계할 수 있었고 스프린트 및 제품 주기를 시작할 수 있었습니다. 내가 제품 전체를 설계하고 큰 그림을 보는 일을 담당했다면 개발자들은 우리의 결정에 따라 기초부터 구축하는 일을 맡았습니다.

3. 디자인

이것은 긴 것이 될 것이기 때문에 버클을 채우십시오.

제품 개발 및 설계를 시작할 수 있는 승인을 받자마자 " Go Bilingual Design System "이라는 Figma 파일 을 만들었습니다 . 처음에는 할 일이 많지 않았습니다. 우리 디자인 시스템의 컨셉은 무엇일까요? 상기 시스템을 개발하는 우리의 목표는 무엇이었습니까?

Atomic Design 에서 힌트를 얻어 아이콘 부터 시작하기로 결정했습니다. 아이콘 은 우리 제품에 필요한 가장 작은 요소이기 때문입니다. 약간의 조사 끝에 저는 Akveo , Eva 의 뛰어난 디자인 시스템을 발견했습니다 . 이 디자인 시스템의 아이콘은 우리가 찾고 있던 둥글고 가독성이 좋았기 때문에 완벽하게 일치했습니다. 그러나 유일한 차이점은 아이콘을 사용할 때 기본 규칙을 설정했다는 것입니다. 두 세트의 아이콘을 사용하는 대신 한 세트는 사용 가능하고 다른 세트는 상호 작용 세트로 만들기로 결정했습니다. 즉, 특정 방식으로 아이콘과 상호 작용할 때마다 가능한 두 번째 아이콘이 사용자에게 표시됩니다.

아이콘이 무엇인지 결정한 후(처음부터 다시 디자인할 필요가 없기 때문에) 다음 단계는 브랜드, 로고, 가치 및 시각적 정체성을 살펴보는 것입니다. 브랜드 개발 및 디자인에 대한 보다 개방적이고 유연한 접근 방식.

Go Bilingual의 비주얼 아이덴티티는 Quintal 의 사람들이 처음 디자인했습니다 . 그들이 우리에게 제공한 설명서에는 로고와 몇 가지 응용 프로그램, 색상 팔레트, 기본 및 보조 옵션 및 타이포그래피가 포함되어 있으며 Panton이 기본 옵션이고 Open Sans가 보조 옵션입니다. 그러나 비즈니스 팀은 그들의 접근 방식이 너무 "행복"하고 "젊고" "다채롭다"고 느꼈고 우리 제품의 주요 사용자가 학교 관리자와 교사이기 때문에 반드시 우리의 목표는 아니었습니다. 우리는 사용자가 오랜 시간 동안 제품을 사용하면서 더 편안하고 편안함을 느낄 수 있는 보다 냉정한 시각적 아이덴티티가 필요했습니다. 우리는 또한 디지털 제품이 시스템과 관련하여 보다 유연하고 유동적이어야 하며 시각적 정체성이 이를 반영해야 한다고 생각했습니다.

우리는 프로젝트의 색상을 확장하기로 결정했습니다. 세 가지 주요 색상만 훌륭한 인쇄 디자인 프로젝트에 적합할 수 있지만 적어도 내 경험으로는 디지털 프로젝트가 포함해야 하는 뉘앙스에 관해서는 충분하지 않습니다. 그래서 우리는 메인 컬러 하나하나를 바탕으로 3가지 음영을 만들고 메인 톤과 보조 톤의 수를 늘렸습니다. 우리가 정의한 또 다른 규칙은 우리 세트의 두 색상 사이에 그라데이션이 얼마든지 가능하여 디자인을 유동적이고 매우 다양하게 만들 수 있다는 것입니다.

우리의 새로운 로고는 사내에서 개발되었습니다. 그래디언트와 아웃라인에 더 중점을 두어 브랜드에 보다 현대적인 시각 효과를 가져오는 기존 제품을 재해석한 것일 뿐입니다. 우리는 또한 로고를 살펴보면서 전체 디자인 시스템 의 개념을 연결했으며 이때 "격자" 아이디어가 탄생했습니다. 우리의 모든 시스템은 구축하기 쉽고 관리가 용이해야 했기 때문에 아이디어를 자유롭게 배치하고 개발 및 설계하고 끊임없이 진화할 수 있는 격자, 개방형 그리드를 생각했습니다.

우리는 유동적인 디자인과 시스템, 끊임없이 변화하는 환경을 진정으로 믿습니다.

디자인 시스템 테마 세트를 사용 하여 구성 요소와 디지털 애플리케이션에 존재할 모든 단일 비트를 디자인하기 시작했습니다. 우리는 디자인 스프린트 에서 배운 것과 지금까지 생산된 모든 것을 취하여 생산을 시작했고, 응집력을 갖고 지침 세트를 중심으로 작업했습니다. 나는 제품 디자인과 개발이 모두 응집력과 테마에 관한 것이라고 믿습니다. 제가 게임 디자이너이자 아트 디렉터로 일하던 시절부터 오늘날까지 이어지고 있는 것입니다. 회사로서 우리가 같은 전제를 따른다는 것이 기쁩니다.

4. 배달

그래서 긴 설계 및 개발 주기를 거쳐 제품을 제공할 때가 되었습니다. 우리 제품의 최종 기능은 정확히 무엇이며 어떻게 작동합니까?

우리 제품은 백엔드에 Ruby 를 사용하고 프런트엔드에 React 를 사용하여 개발되었으며 개발자는 교사 포털 을 구현하기 위해 디자인 시스템에서 수립한 지침을 사용했습니다 .

우리의 MVP 는 우리 제품의 가치와 사명, 그리고 우리가 달성하고자 하는 것을 보여주는 랜딩 페이지 를 가질 것입니다. 사용자가 교사, 교육자 및 교수에게만 맞춤화된 콘텐츠를 보고, 보고, 읽고, 들을 수 있는 트렌드 페이지 교육자가 만든 전체 콘텐츠를 찾을 수 있는 리소스 페이지; 교사가 전문 과정을 수강하여 더 나은 전문가가 되는 방법을 배울 수 있는 개발 경로 페이지 같은 사용자가 우리에게 연락하여 질문과 불안을 해결할 수 있는 대화 페이지.

많은 기능을 가지고 있기 때문에 전체 제품을 개발하는 데 시간이 좀 걸렸지 만 결국 모든 것이 잘 작동하고 여기에 있습니다. 이중 언어의 교사 포털 로 이동하십시오.

비즈니스 요구 사항은 끊임없이 변화하고 있으며 Go Bilingual 은 Spot Educação 가 Edify Education 이 되면서 중단 되었습니다 . 그러나 그것에 투입된 모든 작업과 노력이 여기에 표시되었으며 우리는 우리가 제공한 것을 정말 자랑스럽게 생각합니다. 우리의 MVP는 제작하기가 정말 어려웠고 그 과정에서 수많은 도전이 있었지만 그것이 제품 디자인과 개발의 방식이라고 생각하고 전문적으로 꽤 재미있고 열광했습니다. 뿐만 아니라 이 프로젝트는 회사 내부의 많은 제품에 대한 기반을 구축합니다.

Go Bilingual 의 메인 웹사이트는 http://www.gobilingual.com.br/ 이었지만 제품이 더 이상 존재하지 않기 때문에 현재 오프라인 상태입니다. http://teachersportal.gobilingual.com.br/ 에서 여전히 교사 포털에 액세스할 수 있습니다 . 읽어 주셔서 감사합니다!