Localz Configuration Platform | A UX UI Case Study

The tool where all Localz configuration will be managed by ourselves, our partners, and our direct customers.

Image for post
Image for post

Project Overview

Background

My role

Product Development Process

Image for post
Image for post

Problems

Goals

UX Research

Persona

Image for post
Image for post
Persona

User journey

Image for post
Image for post
Image for post
Image for post
User journey / Sitemap

Beta Release Design Process

Release Goal

Key deliverables

Wireframes

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
WIreframes

Design Patterns

Image for post
Image for post
Common navigation patterns and page layout
Image for post
Image for post
Set up the components as symbols in Sketch

User testing

An InVision Prototype to test navigation structure.
Image for post
Image for post
Image for post
Image for post
Internal user testing

External User Communication

Image for post
Image for post
The slide explained the roadmap, terminology, beta release plan and progress

UI Visual Design

UI Stylings

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Ideations — Style A: Firebase / Style B: Google analytics / Style C: Apple Store
Image for post
Image for post
Exploring expandability of the product

Outputs: Mockups

Image for post
Image for post
Beta release high-fidelity visual design mockups in Sketch

Communication

Consistently communicate the design outputs with the team is also a key to success.

Image for post
Image for post
Image for post
Image for post
Beta release mockups V.S. Future ideas wireframes

Design system

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Design review

It will always cost you more to redesign and reimplement after you launch the product.

What I focused on

How I did it

Image for post
Image for post
Design UAT lists in Notion
Image for post
Image for post
Image for post
Image for post
Comparison examples

Keep updating the design system

Image for post
Image for post
Added missing layout into the design system

Reflection

Thank you for reading this far! 🥰

Minor Point

UX UI 設計師的工作筆記、經驗分享、作品記錄。 A Designer’s work notes…

Thanks to Terence Huynh and Shooting Unicorns

Hsin-Ping Lin (林欣平)

Written by

Senior UX/UI Designer with a product mindset.

Minor Point

UX UI 設計師的工作筆記、經驗分享、作品記錄。 A Designer’s work notes, experience sharing, and portfolios.

Hsin-Ping Lin (林欣平)

Written by

Senior UX/UI Designer with a product mindset.

Minor Point

UX UI 設計師的工作筆記、經驗分享、作品記錄。 A Designer’s work notes, experience sharing, and portfolios.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store