MeetU Guidelines, UI/UX Design, and the Adventures of the Lone Designer

For the last couple of weeks particularly last week was a pretty bumpy yet ‘educational’ week. As the title would’ve said, I am the lone designer of my beloved group trying to cope in this Computer Science world with minimum knowledge on how to code based on what I designed. Which turns out, was a fun thing to do although it requires more time and energy consuming.

Guidelines

The Opening Splash-Screen

Guideline researching and improving begins with internal benchmarking with MeetU Engineers. Researched for the proper colours, philosophy, also the code eligibility with the design. In conclusion, we all agree that our App Guideline will be Semi-Flat to increase user’s readability and focus to the core object/journey of the App.

The Colour Palette

The main reason of the colour picking is to invite exciting and fresh vibes to the users because the main customer segments will be people around the productive age, mostly teenagers and early adults. To emphasize the branding of MeetU, gradients were picked to increase attractiveness of the design.

UI/UX — Design Process

After creating the guidelines, my next challenge will be creating the App’s UI and discover/research the UX of MeetU for increasing Interface Appealing and User-Friendly Application.

Discover

This application is intended for the people around the productive age, mainly are teenagers and early adults who want to create MeetUps and arrange their private events. By figuring out the target audience, research and surveys were held via convenient sampling because we don’t have much time to discover and research what user needed most of this app. The research result were mostly sampler’s uncomfortable and difficulties on finding the right schedule to arrange MeetUps without spending too many times determining the schedule.

Explore

Reflecting on the research and survey findings, I explored numerous ideas for the application’s main feature, structure, user-journey flows and kits to simplify my workload as UI/UX Designer.

Visualize

After the concept is made, I established the visual mockup started by sketching the wireframes. Along the way, Visual Guideline and Identity also the colours were created and implemented to the application mockup. Last but not least, I finalised the Visual Mockup to a high-fidelity prototype.

Deliver

Usability testing were done in this period of UI/UX Design. Reviews and Adjustments were done for the prototype to be finalised. The Prototype has undergone two iterations, the first of which are UI revamp and the second is minor feature revamps.

Mockup Example (Full Prototype here)

The Adventures of the Lone Designer

“Do or do not, there is no try “

— Yoda

My expectations was that other members of my group would’ve implemented my UI Design into coding. Naively, I picked the feature in which that the UI Coding must be implemented. I barely have any knowledge of XML Coding let alone Java Android. So, wether I like it or not, I have to study through assistance, tutorials and took some online course in order to understand the concept. It turns out that I went out a little better than I thought, at least I made significant progress.

Current Progress (Still WIP — don’t judge me ok)

First things first, I added dependencies that are required for the UI to functional in our app’s build.gradle

compile 'com.github.ittianyu:BottomNavigationViewEx:1.2.4'
compile 'com.android.support:design:26.+'

In order to prevent any unwanted errors, I’ve edited AndroidManifest.xml to add other Activities:

Setting up the colours here:

Example of Vector SVG imports

And then, create the UI via XML merging

After creating the navbars and the viewpager UI, merge it in one Activity XML:

Almost There

Last but not least, compile and run it on the View:

After the code was implemented, the preview should be like the one I’ve shown above on this article.

Conclusion

It was rocky and frustrating at first, but I’m slowly but surely progressing and want to make the best out of this roller coaster of a Semester. Hopefully I can keep my spirit and keep improving the UI until my last breath. (Hopefully.)

Luthfi Aulia Sulaiman,

Lead UI/UX Designer at MeetU Engineering