Background
​
I had no experience with coding nor using the command line. Just like other projects, I started with user research- learning about developers- to create a template library developers and designers are willing to use.
​
Hydra project is a meaningful project for me. It helped me learn about the developer's workflow and the most critical bridge between designers and developers.
​
​
I. Intro
​
Hydra Mobile Lib is an open library containing the most common mobile UI templates for iOS and Android with Google Material Design. The goal is to help developers to create good-looking APP MVPs.
​
All the UI templates are available as NPM packages. The developers can use the command line to download the template.
​
Instead of creating UI from scratch, the developers can use the template to showcase the wireframes and main features. Hydra is a shortcut for both developers and designers to communicate with clients or users.
My Role
​
-
User Research: learn about developers' workflow.
-
Understand Flutter and Material Design.
-
Create a user flow for most shared pages on an APP.
-
Create UI templates with Flutter and Material Design.
Challenge
​
1. The Library should be able to use as a developer without designer's help.
2. Keep the library updated.
3. Keep the flexibility: the designers can redesign and make changes anytime.
II. User Research- A Conversation between Designer and Developers
​
Unlike formal user interviews, I had a unformal conversation with my developer friend, and here are some of our key conversations.
Developers Work Flow for Front-End Development
​
Usually, the UI designers will provide lo-fi mockups for user testing and hi-fi mockups for final product.
.jpg)
IV. Learn about CLI vs. GUI
​
CLI, or Command Line Interface, is a text-based interface used to interact with software and operating system by typing commands into the interface and receive a response in the same way.
​
Commend line is a language developers are comfortable with. It is goal-orientated, direct, and easy to build.
​
Why CLI:
​
-
Text-based Interface
-
Interact with command language
-
Users will not receive the feedback quickly
-
Less destructions, faster to the goal
​
CLI Flow:
​
-
Based on the standing of user flow,
-
Our team created this CLI Flow.
​
​
​
V. Design a User Friendly CLI for Developers
​
The design matters even more because the display and interaction is all rely on type in one font. The key of user friendly CLI needs
​
1. Formatting:
our reading habit is from left to right and up to down.
​
2. grouping:
like information (which means your users won’t have to scan as much to find relevant information) and giving your user’s eyes room to rest (which allows your users to take a moment to absorb what they just read).
VI. Create the Templates Using Material Design on XD
​
Following the menu we created early, I created UI templates for this project with a basic design system.
Click the picture to see the XD pre-view.
