THE STORY
Designing new Android UI from nothing to implementation
“Start from nothing”, that is what our team was told from top leadership at LG. Since LG was in entry position of smartphone market. This is my 1 year journey how we created LG’s Android UI foundation from nothing to design implementation for the first Optimus UI smartphone.
MY ROLE
I led the design of LG’s first Android UI from end to end experience. I led efforts to synthesize and analyze pain-points and idea generation at the concept generation phase. And then, in the production phase, I build Human Interface Guideline for LG Android UI.
CUSTOMER INSIGHTS & IDEATION
All of our team members actively participated uncovering insights and translate concepts into philosophy and features after few days of discussion.
DESIGN EXCUTION & VALIDATION
I designed homescreen and in-touch widget experience. I excuted journeys, wireframes, prototypes and design specs.
I partnered with scientific UI validation team and conducted validation session.
MADE LG HUMAN INTERFACE GUIDELINE
I made LG human interface guideline that addresses all Android UI component with specs, GUI and API for centralized communication throughout stakeholders.
THE CHALLENGE
FORGET THE LEGACY, START FRESH
LG was one of the top mobile manufacturer until 2009 before smartphone era has come. However, our company was in critical situation since we were far behind on smartphone market.
So, leadership team organized a team from multiple discipline, include UX designer, Hardware engineer, Software engineer and Researcher with a vague mission — ‘Build LG’s identity through Android UI. Forget about legacy’.
THE APPROACH
INITIAL RESEARCH
At the first time, leadership team only gave us 4 weeks to find compelling Android UI concept. I know, it’s very tight schedule and challenging. But we worked hard and here was the result we have came up.
– Found 15 potential opportunity
– Found three UI principles
– Made 4 user scenarios
– Analyzed core technology that can support user scenarios
– Designed 64 screens
– 6 patents filed
Our team asked leadership team to extend project time, and it became one year project at the end of the day.
THE APPROACH
DISCOVERY PHASE, 2ND ROUND IN THE FIELD
We decided to analyze Android’s pain point. From JOBS method, we acknowledged users don’t satisfy with their Android smartphone. Our goal was to gather as much information as possible about what make user unhappy with their phone. My team went field trip with 15 tasks we had to complete.
The following are the detailed process of pain point analysis.
– Diary/ Try tasks in the field
– Daily debrief
– Select initial pain points
– Fact/ insight/ initial idea grouping
– Keywords mind-mapping
THE DISCOVERY
CUSTOMER INSIGHTS
Designing entire smartphone applications was a huge challenge. Since it is really hard to set a specific target and usage. Everyone use a smartphone every day almost everytime. But our team needed targeted focus on and what customer desire. Here our team nailed down to six focus areas as stated below.
THE VISION
Designed to be mine, which guides me through in the most optimized way
Designed to be mine means: One simple glance and a click gets me what I want. It is genuinely easy, intuitively smart and naturally entertaining.
Guides me through represents: It feels like my phone understands the way I think and guides me to whatever I want to do next.
And, In optimized way means: It is such a delightful surprise to know there is always a better and creative way to do things.
Our philosophy is naturally melted in our UI Design and it is represented as “Cognitive Design”, “Fluidic Integration”, and “Practical Creativity.”
Cognitive Design
One step contents activation in locked state
Maximized homescreen utilization
Fun and entertaining widgets
Maximized homescreen utilization
Fun and entertaining widgets
Fluidic integration
Suggestive feature to feature control
Smartly integrated multi-functions and data
Smartly integrated multi-functions and data
Practical creativity
Pinch List
Categorized main menus & category edits (add/ delete/ rename/ reorder)
Less steps to complete tasks
Categorized main menus & category edits (add/ delete/ rename/ reorder)
Less steps to complete tasks
THE EXECUTION
From the concept to detailed design
Our initial UI concept has got approved by top management and got support engineering resources along with other design teams interest. At this point, this project’s scope became massive to entire design organization. To direct design team to a path, we needed clear communication method. And it has to be shared across engineering teams. This led us to write style guideline. Below screenshots are example of style guideline. It describes general UI framework along with API for engineers.
THE EXECUTION
ground rule for ui design
Based on consumer insights and benchmarking 18 ground rules set on UX in general. This depicts general rules that are applicable to overall UI. These rules have been shared to entire design organization in order to keep this rules in LG’s entire smartphone UI. Images below are examples of Ground Rule we have set.
Comfort screen size for one-hand operation
Display Possible Actions to Take
Visualize Key Functions with GUI
THE FINAL
introducing optimus ui 2.0
This is a whole new UI design with three pillars, Fluidic integration, Practical creativity and cognitive design.
LOCK SCREEN
one step contents activation from locked state
TOP MENU
Categorized main menus & category edits
HOMESCREEN WIDGET
Maximized homescreen utilization
Sharp Edges
Lorem ipsum dolor sit sodales, augue velit cursus nunc.
Sharp Edges
Lorem ipsum dolor sit sodales, augue velit cursus nunc.
Maximize homescreen utilization
Weather widget with realistic animation
One step away for important notification from lock screen
Rich multimedia homescreen widget experience
Easy multimedia browsing and viewing experience that collects all of your media files in your phone
Contact app
One place to manage your contact list, not only phone number but also social context
Enhanced widgets
Seamless connection between widget and application
THE LAUNCH
first launch of optimus 2.0 — optimus black
Since this project, every LG’s smartphone has been shipped with Optimus UI 2.0. The launch went off without a hitch — an amazing achievement considering the scale and complexity of the project.
THE EVOLUTION
foundation of lg’s android ui… and there is room for improvement
This was foundation of LG’s new UI design language, and this will be improved for years in the future along with Android’s evolution.
