“notly” гар утасны аппликейшн дизайн бүтсэн процесс

“notly” decentralized mobile app design case study

Boldmaa Solongontuya
Dev notes from teo
6 min readApr 21, 2023

--

notly mobile app

Манай Корэкс ХХК нь блокчэйн технологи суурьтай дижитал бүтээгдэхүүн хөгжүүлдэг компани бөгөөд манай компаний томоохон төслүүдийн нэг бол дижитал бичиг баримтуудыг блокчэйн сүлжээнд бичиж тухайн бичиг баримтын хуурамч болон засвар орсон үгүйг шалгадаг төсөл юм.

Энэхүү төслийн эхний бүтээгдэхүүн нь https://certify.mn/ бөгөөд их дээд сургуулиудын диплом болон сургалтын төвүүдийн гэрчилгээнүүдийн .pdf өргөтгөлтэй файлуудыг блокчэйн сүлжээнд бичиж байгаа юм.

Хоёр дахь бүтээгдэхүүн нь https://notly.mn/ бөгөөд диплом болон гэрчилгээнээс бусад бичиг баримт буюу банкны дансны хуулга болон ажилтны үнэмлэх гэх мэт бүх төрлийн бичиг баримтууд юм.

Дараагийн бүтээгдэхүүн бол notly-ийн гар утасны хувилбар бөгөөд хэрэглэгчдэд бичиг баримтуудаа гар утаснаасаа шалган хуурамч үгүйг шалгах боломжийг олгох үндсэн зорилготой юм. Энэхүү гар утасны аппликейшн нь миний хийсэн анхны тархмал бүтэцтэй блокчэйн технологи дээр суурилсан гар утасны аппликейшн юм. Олон сорилттой тулсан мөн богино хугацаанд хийх шаардлагатай болсон энэхүү төслийн ард хэрхэн гарсан талаараа сонирхуулъя.

Баг бүрэлдэхүүн:

Бүтээгдэхүүн хариуцагч (product owner), блокчэйн хөгжүүлэгч, тобайл хөгжүүлэгч, маркетингийн баг, бизнесийн баг

Миний оролцоо:

Ахлах дизайнер: бүтээгдэхүүний дизайны бүх процесст оролцсон /судалгаа, тест, дизайн/

Сорилтууд /The challenge/

  • Бизнесийн багаас ирсэн шаардлага нь маш том олон боломжуудыг багтаасан шаардлага байсан. Тэдгээр шаардлагуудыг үндэслэн аппликейшний үндсэн зорилгыг тодорхойлон эхний удаагийн хамрах хүрээг тодорхойлох
  • Тархмал бүтэцтэй болон блокчэйн технологи ашигласан бүтээгдэхүүний онцлог болон давуу талыг аппликейшндаа багтаах
  • Хэрэглэгчдэд хэрхэн тархмал бүтэцтэй аппликейшний зорилгыг ойлгуулах болон хэрэглэхэд хэрхэн хялбар байх

Хийгдсэн дараалал /The Process/

  1. Шаардлага тодорхойлох

Бизнесийн багаас тухайн бүтээгдэхүүний шаардлагыг бичгээр тодорхойлон өгдөг. Тухайн шаардлагын дагуу бизнесийн баг болон технологийн багийн хамтарсан уулзалтаар хийгдэх хугацаа болон технологийн боломжид тулгуурлан бүтээгдэхүүний шаардлагыг эцсийн байдлаар гаргадаг. Бэлэн болсон шаардлагын дагуу манай аппликейшнд ямар feature-д байхыг тодорхойлон дизайны prototype гаргахад бэлдсэн.

2. Төстэй бүтээгдэхүүнүүдийн судалгаа

Ямар төрлийн аппликейшн болох нь тодорхой болсон учраас тухайн аппликейшнтай төстэй аппликейшнуудыг судална. Манай аппликейшний үндсэн зорилго нь бичиг баримтыг блокчэйн сүлжээнд баталгаажсан файл мөн эсэхийг шалгах байсан учраас төстэй аппликейшн болох Blockcerts-г судалсан. Мөн нэмэлт боломжууд болох ангилах, эрэмбэлэх гэх мэт файлуудтай ажиллах үйлдлүүд байсан учраас Файлтай ажилладаг аппликейшнууд болох Dropbox, Google drive, iCloud drive, OneDrive-г судалсан болно.

3. Шаардлагын дагуу prototype гаргах

Аппликейшн маань үндсэн 3 цэсээс бүрдэж байгаа юм.

  1. Баримт

Энэхүү хэсэгт хэрэглэгчийн нэмсэн болон төлөвийг шалгасан бичиг баримтууд харагдах бөгөөд тухайн бичиг баримтуудыг ангилах, эрэмбэлэх гэх мэт нэмэлт үйлдлүүдийг хийх боломжтой байх юм.

  • Баримт бичгүүдийн харагдах хэсэг, ангилах болон эрэмбэлэх хэсгүүдийг харуулсан prototype.
File tab
File tab prototype from Figma
  • Баримт бичгүүд дээр хийгдэх боломжтой нэмэлт үйлдлүүд — Шалгах, Хуваалцах, Дэлгэрэнгүй, Ангилал, Нэр өөрчлөх, Устгах
File tab with actions prototype from Figma

2. Шалгах

Хэрэглэгч бичиг баримтын төлөвийг шалгаж байгаа үед харагдах prototype. Бичиг баримтыг шалгасны дараа хэрэглэгчээс тухайн бичиг баримтыг хадгалах үгүйг асууна.

Verify tab prototype from Figma

3. Бичиг баримт нэмэх

Энэ хэсэгт хэрэглэгч өөрийн утсан дахь Файлтай холбоотой аппликейшнуудыг (Google drive, Dropbox etc.) холбох боломжтой. Ингэснээр бичиг баримтуудыг нэмэхэд хялбар байх юм.

Browse tab prototype from Figma

4. Prototype туршилт

Бэлэн болсон prototype-г бизнес болон маркетингийн багийнханд туршуулан нэмэлт санал хүсэлтийг авч аппликейшний эцсийн prototype-г гаргасан.

5. Moodboard

Бүтээгдэхүүний дизайн гаргахад moodboard нь чухал үүрэгтэй байдаг. Тухайн бүтээгдэхүүнийг илэрхийлэх өнгө төрхийг moodboard бэлдэн бусад багийн гишүүдтэйгээ ярилцсаны үндсэн дээр гаргах нь цаг хэмнэх болон дизайны үл ойлголцол үүсэхээс сэргийлдэг болно. Багийн гишүүд өөр өөрийн төсөөллөөр бүтээгдэхүүнийг төсөөлсөн байдаг учраас энэхүү алхам нь бүх гишүүдийн ойлголтыг нэгтгэдэг. Хэдий дизайны өнгө төрхийг багаараа сонгосон ч гэсэн мэдээж аппликейшн ямар дизайнтай байх нь үндсэн дизайнерын гарт байдаг. 😃

6. UI дизайн

UI дизайн гаргахын өмнө маркетингийн багаас аппликейшний лого болон өнгийг авч тухайн аппликейшний брандингийг UI дизайнд багтааж өгсөн болно.

notly logo
notly logo

Дээр гаргасан prototype -н дагуу өгөгдсөн өнгөний дагуу UI дизайныг гаргасан. Хуудас болгон өөрийн гэсэн тусгай нэмэлт боломжуудтай байх бөгөөд үйлдэл хийгдэх болгонд гарах үр дүн, алдааны мэдээлэл, хоосон үе, их мэдээлэлтэй үе болон төлөв болгонд харагдах дизайнуудыг тооцоолон зурах хэрэгтэй байдаг учраас шаардлагын дагуу нөхцөл болгоныг тооцоолон зурсан болно. Зураг болгоны дээр тайлбарлан орууллаа.

  1. Эхлэл

Хэрэглэгч анх удаа аппликейшнийн татан хэрэглэхэд тухайн аппликейшн нь ямар зорилготой аппликейшн болох талаарх мэдээлэл өгөх хуудаснууд.

Intro — UI design from Figma

2. Баримт

Баримт цэсийн UI дизайн — 3 хуудас байгаа бөгөөд гарч болох хувилбаруудыг тооцоолон гаргасан болно. Бичиг баримт байгаа үе, бичиг баримт байхгүй хоосон үе, Ангилал хэсгийн төлвүүд өөрчлөгдөн сонгогдсон үе гэж байна.

File tab — UI design from Figma

Ангилал болон эрэмбэлэх сонголтууд хэрхэн харагдах хэсэг. Тухайн ангиллын сонголтууд сонгогдоогүй, сонгогдсон, сонголт хоосон байгаа, сонголт их мэдээлэлтэй байгаа гэсэн бүх төрлийн хувилбаруудыг тооцоолон гаргасан хуудаснууд.

File tab — Filters from Figma

Бичиг баримтууд дээр хийх боломжтой үйлдлүүд

  • Бичиг баримтуудын үйлдлүүдийг харах — Бичиг баримтуудын нэр урт болон богино байх боломжтой.
  • Шалгах — Бичиг баримтын блокчэйн дээрх төлөвүүд нь Хүчинтэй (Valid), Хүчингүй (InValid), Хугацаа дууссан (Expired) болон Баталгаажаагүй (not verified) гэсэн төлөвүүдтэй байна. Төлөв болгоныг илэрхийлсэн өнгө бүхий хуудас байхаас гадна шалгаж байгаа болон алдаа гарсан үед хэрхэн харагдахыг тооцоолон зурсан.
  • Хуваалцах — Android болон IOS үйлдлийн системүүдийн хуваалцах функцийг ашигласан.
  • Дэлгэрэнгүй — Харагдах мэдээллийн хэмжээнээс хамааруулан зурсан.
  • Ангилал — Ангилал сонгогдсон байгаа, харагдах байдал болон шинэ ангилал нэмэх гэсэн хуудаснуудыг зурсан.
  • Нэр өөрчлөх — Бичиг баримтын нэр өөрчлөх.
  • Устгах — Бичиг баримт устгах, амжилттай үед өгөх сануулга.
File tab — Actions from Figma

Тухайн бичиг баримтыг бүтнээр нь орж харах хуудас

File tab — File detail from Figma

3. Шалгах

Бичиг баримтыг шалгах хэсгийг 2 газраас хийж болж байгаа бөгөөд өмнөх зурганд төлөвүүдийг харуулсан байгаа болно. Энэ хэсэгт бичиг баримтын төлөвийг шалгасны дараа харагдах хуудаснуудыг харуулсан ба хэрэглэгчдэд өгөх сануулгын төрлүүдийг харуулсан байна.

Verify tab — UI design from Figma

4. Бичиг баримт нэмэх

Утсанд байгаа бичиг баримтуудаа аппликейшн руу нэмэх хэсэг ба нэмэлт файлтай ажилладаг аппликейшнуудыг нэмсэн байгаа, нэмээгүй байгаа, нэмж байгаа хуудаснуудыг тус тусад нь зурсан байгаа болно.

Browse tab — UI design from Figma

7. Мобайл хөгжүүлэгчид хүлээлгэн өгөх

UI/UX дизайн дууссаны дараа мобайл хөгжүүлэгчид дизайны файлаа хүлээлгэн өгсөн бөгөөд хөгжүүлэх явцад дутуу тооцоолсон нөхцөл гэх мэт асуудал гарсан үед тухай бүрд нь дизайны асуудлуудыг нь шийдэн явсан болно.

8. Үр дүн

notly аппликейшний эхний хувилбар маань багийн гишүүдийн хүчин чармайлтаар хугацаандаа амжилттай дуусаж “Welcome to Teo” үйл ажиллагаанд ашиглагдсан болно.

9. Бүтээгдэхүүний судалгаа

Аппликейшний эхний хувилбар хэрэглэгчдэд хүрсний дараа бид алдаа оноогоо дүгнэхийн тулд бүтээгдэхүүн хэрэглэгчдэд хүрсний дараах судалгааг хийсэн болно. Энэхүү судалгаа нь 10 хүн хамруулсан томоохон судалгаа болсон бөгөөд тусдаа том сэдэв болох болохоор дараагийн бичвэрээрээ дэлгэрэнгүй хүргэе.

Дүгнэлт

Бүтээгдэхүүний эхний хувилбар маань амжилттай гарсан ч цаашид сайжруулах зүйлсүүд их байгаа болно. Хэрэглэгчийн шаардлага болон бизнесийн шаардлагын дагуу бүтээгдэхүүний чиг хандлага болон хэрэглэгдэх байдал нилээн өөрчлөгдөх судалгаа гарсан бөгөөд гэвч эхний хувилбараа амжилттай гаргасандаа миний бие баяртай байгаа болно.

  • Дизайны баримтлах ёстой процессыг яс баримтлан явсан маань шинэ бүтээгдэхүүн гаргаж байгаа үед маш зөв алхам болсон. Ганцаараа дизайн талаас нь ажилласан гэхэд богино хугацаанд дуусгаж чадсан.
  • Тархмал биш болон тархмал бүтэцтэй бүтээгдэхүүнүүдийн ялгааг маш сайн ойлгож дараагийн удаа анхаарах хэрэгтэй зүйлсүүдийг суралцан том туршлага хуримтлуулсан.

Манай аппликейшнийг татан хэрэглэж үзээрэй.

IOS — https://apps.apple.com/mn/app/notly-mn/id6443554928

Android — https://play.google.com/store/apps/details?id=mn.corex.notly

Энэ хүртэл уншсанд баярлалаа. ^_^

--

--