2022-23 work experience
Smart Place
Improving Usability of Business Managing App with Heuristic Evaluations
overview
Role
Product Designer (Full-time)
Worked with 1 Product Manager, 3 Engineers.
User Research, User Flows, UI Design, Prototyping, Usability Testing, Visual Design and Design System.
About Company
The most dominant tech company in Korea with 72 million users, commanding over 80% of Korea's search market with around 5,000 employees working collaboratively.
About Product
NAVER’s business management app for local stores such as restaurants and beauty salons. It serves 2.4 million business users.
timeline
5 months (Oct 2022 - Mar 2023)
Through this project, we achieved noticeable improvements in usability, resulting in a significant increase in weekly active users and a rise in business user acquisition for Smart Place.
Current setting up process of 'NAVER Order'
To help you better understand, let me work you through the process of setting up 'NAVER Order'
Step1. Sign up for NAVER Pay and choose the type of order.
Choose the type of order
Screening
Through the NAVER Pay sign-up process, we assess whether this restaurant is qualified to use NAVER Order.
Choose the type of order
Pickup
Delivery
Table
Drive Through
Robot Delivery
Dashboard
The user selects the type of order from the restaurant.
Step2. Add menu items to sell.
Chicken Salad
18$
Lunch Combo
30$
Fried Rice
15$
Egg Bacon
18$
Menu Setting
Step3. Add time slots of opening hours.
Slot 1
10:00AM~03:30PM
Lunch
Break Time
Slot 2
05:00PM~09:00PM
Dinner
Time Setting
A decade-old product with over 4,000 accumulated user complaints.
Smart Place, originally launched as 'Partner Center' in 2014, has undergone a decade of feature expansion and business growth. However, as user interfaces were growing older, negative feedback accumulated on Appstore review. So, we have decided to embark on a comprehensive usability improvement project.
3 main pain-points the most frequently mentioned.
Non-intuitive
It’s not intuitive to understand how to use the feature, and time-consuming to learn.
Inefficient
Frequently used features are hidden, so users switch between multiple screens.
Inconsistent
The usability differ between the PC and mobile, causing confusion for users.
Determining design criteria and priorities by Heuristic Evaluations.
It is impossible to take every user’s comments into account. It was essential to set design criteria and priority. Therefore, I utilized Jakob Nielsen’s 10 Usability Heuristics Guidelines↗
4 heuristic guidelines have been identified as the most relevant based on repetitive user feedback.
I identified four specific heuristic rules that recurring pain points from app store reviews were in conflict with.
#4.
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
#7.
Flexibility and efficiency of use
A product should provide short-cuts and allow users to take customized actions.
#8
Aesthetic and minimalist design
Interfaces should not contain information that is rarely needed. Ensure that the visual elements of the interface support the user's primary goals.
#9
Help users recognize and recover from errors
Error messages should precisely indicate the problem, and constructively suggest a solution.
We evaluated each task and screen within the NAVER Order setup process.
I formulated an evaluation sheet with specific criteria based on four guides. A team of five, including the Product Manager and Product Designer, rated each screen on a scale of 1 to 5.
Project Manager
Designer
Scale
Definition
1
Significant non-compliance with evaluation criteria.
2
Partially unmet criteria in specific cases.
3
No noteworthy instances of non-compliance.
4
Fully meets all criteria satisfactorily.
5
Exceptionally well-designed experiences identified.
Based on the evaluation results, we were able to identify the design priority.
After collecting evaluations from everyone, I computed the average scores. We opted to prioritize criteria rated at 3 or below.
Dashboard
Before
The layout lacked information hierarchy, leading to user confusion regarding where to focus initially.
The most crucial function, 'Order Settings', which users use the most, is tucked away at the bottom with a small button, making it less noticeable.
The screen divided into 3 sections redefines the content hierarchy according to priority.
Users are introduced to Naver Orders at the header, and then they first identify the most important tasks with illustration cards in the middle. If necessary, users can access tutorial materials at the bottom of the screen.
Ensure that the visual elements of the interface support the user’s primary goals.
Each stage of the NAVER Pay sign-up process is displayed with a status label and a situation-appropriate button.
Through labels, users can view the crucial payment status without the need to visit the NAVER Pay homepage as before.
A Call-to-Action that can promptly restart the order is indicated with precision.
The specific states are displayed, such as closed hours, hidden orders, or unfinished order settings, and the primary button offers the functions to restart the business according to the state.
Ensure clear understanding of the current order status and provide Call-to-action for error resolution.
Outcome
Menu Setting
The Table View
Users had difficulty to intuitively recognize all the menu features because they were not grouped and instead spread out in a single row with a wide width.
The List View
Features can be grouped based on their role, making it easier for users to learn and remember the location of each feature.
Efficiently arrange features and provide quick access to the most frequently used functions.
Consistency and standards
Every devices have consistent usability and experience.
Outcome
Time Setting
Redundant tabs and layers led to a less intuitive user experience. Also, usability difference between default and custom schedule setting causes confusion.
By answering 3 sequential questions, users can finalize the default schedule, custom schedule, and days-off settings.
When operating functions of similar nature, use consistent UI components.
Also, days-off shortcuts make it easier for users to set up weekly or annual days off.
Avoid repeatitive actions and provide shortcuts.
Outcome
Menu Link
Adjusting the order of menu items for each time slot required multiple in-and-out interactions, making comprehensive control difficult.
After
Using a 2-column layout, users can arrange menus corresponding to the time slot and also switch up the order of their menus, all within a single screen.
Flexibility and efficiency of use
Avoid repetitive actions and let users control efficiently.
Component system for consistent usability
and workflow efficiency
Smart Place is a business management tool that uses numerous input fields, buttons, and labels.
Therefore, a robust design system is essential in eliminating repetitive work for designers and developers. Using uniform components according to the context creates consistent usability.
To provide a consistent experience across mobile and PC using a responsive layout design system.
Additionally, all illustrations used to aid in easy understanding were created with a consistent style.
Enhanced usability testing results
I tackled this project with a strong commitment to delivering the best quality to its users. It was a journey to make the interface user-friendly through various design tests.
This experience involved a solid design process, where we gathered feedback from users to understand their needs and used evaluation methods, such as Heuristic Evaluations and Usability Testing, to figure out which area needed improvement.
After conducting a heuristic evaluation with coworkers again following the improvements, we observed that the average scores in the 2-point range had increased to the 4-point range.
© Jeongmin Lee 2024
