Coffeeilmu

Client

None

Date

February - August 2022 (6 months)

Services

UI/UX, Prototyping

Tools

Figma

Team

Solo project

My role

Final assignment on my college (Thesis)

The Coffeeilmu application is one of the ideas from several applications that provide information related to coffee circulating in the form of a mobile app. This app allows people to search for knowledge about coffee from their own smartphone. Users can find out a variety of coffee-related information they need.

PROBLEM

Users have problems accessing information through the media they use.

When I gave a questionnaire to several respondents, the results obtained were that users had difficulty in finding information related to coffee, such as incomplete information. Including the difficulty of the information media used, poor interface and user experience.

THE SOLUTION

Mobile technology might be the key.

COMPETITIVE ANALYSIS + THE GAP

Competition does not provide ARTICLES

When searching for coffee app that provide information in it, I only got 5 apps. but there is only two of them that contain “Article” function which include Article / News. Rest of them only app to tracking coffee production and coffee selling app.

Otten Coffee and Bekafe is the apps which contain "Article" function.

DESIGN

Low Fidelity to High Fidelity

I spent 2 months to arrive at the prototype stage of my design. Starting from making wireframes, mockups, to prototypes that have interactions in them. Using prototypes makes users who try them feel more like the final application build on the mobile platform.

TESTING + IMPROVEMENTS

Some major improvement in my design

After doing a run as experiment to UI/UX experts, they gave lots of comments and suggestions. but only some of the feedback that I continue to be points of improvement.

Added some gradient layer to the article banner due to lack of text legibility.
Added “Skip Sign up/Log in” function, so the user can go straight to the homepage and read article but some feature may not available without account.
Added “Coffeeshop” function so user can read or view some recommended coffeeshop.
Added “Search” function that allow user to search article from the keyword that user input. So now Homepage has new overlook.

THE FINAL

The final product

You can access the full Figma file soon.

Note : The file still messy. But here the full working prototype, just click this to go to this page "Prototype".

CONCLUSION

Something that I’d do differently next time

Yeah, this is my first design that created based on Tutorial Design System 👋HaloFigma by HaloDesigner. This is the best tutorial that I ever met, completely detail designing with atomic design. As we play directly in Figma, you will learn step by step creating Style Guides and Component Libraries using advanced techniques such as Auto Layout and Variants that produce adaptive and responsive components. With Figma tips and tricks that included. It helps me a lot, designing faster than ever.
‍
And the UX aspect that I learned, I also learned from HaloDesigner with his book PetunjukUX - Petunjuk Memulai UX dari NOL. Many things on this book all about UX lesson. Really worth. This book contains 60% instructions, 30% learning resources, and 10% action items.

How ever, still many flaw in this design process, like :

‍Lack of user research. Lack of depth in digging information on users, because I did not conduct interviews directly.
‍Lack of user problem. The problem that I raised became a topic, less urgent in real life. So people can use other way to find information from anywhere like YouTube, Tik-tok, Instagram, and other good website or app.

So I’ve learned some lesson :

Design process not just draw a rectangle. This time really opened my eyes, I’ve learned design method, branding color, branding psychology, design rules, design system, user testing, user research (which I don't know much about, still have to learn), risk consideration, WCAG rules and much more.

Thanks to HaloDesigner 🎉 for the knowledge that he packed into the tutorial and the book I've mentioned before.
Focus more when digging into user problem. I thought user research is only about give questionnaire to respondents, but we have to interview directly to them, to ask more information from what is their problem.