Sales Center App - Dashboard

Front-end

Dashboard

SALES CENTER APP 3.0 - DASHBOARD

Redesigned the Sales Center App's customization dashboard to improve usability, scalability, and user independence. I restructured the navigation and simplified the customization UI through intuitive visual feedback. Since the beta launch, three builders have successfully deployed live kiosks utilizing the new dashboard.

ROLE

As I designed both the front-end and dashboard concurrently, I was in the same team of two developers, one QA, and one PM. After the beta release, I collaborated more with the marketing team and some Anewgo staff for gathering insights on the dashboard.

CHALLENGE

The two main challenges were designing an intuitive navigation path to access kiosk customization and enhancing the kiosk customization experience of every page in the dashboard to reduce the need for extensive training

Prior to the redesign, sales center customization was buried within a maze of confusing menus and tabs. Despite having a dedicated section for sales center app customization, related settings were scattered across the dashboard with users unaware of their existence. This fragmented experience forced Anewgo staff to act as intermediaries for even simple customization tasks.

Additionally with major updates and functions being introduced to the Sales Center App 3.0, each configuration page (Screensaver, Homepage, Gallery, Area Map, and more) would require new updates to align with the new UI.

APPROACH & IMPACT

A customization experience focused on streamlined navigation, intuitive visual feedback, proactive error prevention, and comprehensive instructional copy

First I did a navigation overhaul and restructured the customization hierarchy to three distinct levels: global app settings, kiosk settings, and page settings, in order of scale. Then I organized each customization setting under a "How Might We" HMW statement based on their shared end goals. Settings with similar goals, I reused the design patterns and UI to ensure scalability and consistency. To enhance usability, I prioritized intuitive visual feedback, with being able to see real-time previews of their edits as they would appear in a deployed kiosk, greatly reducing the guesswork for users.

Upon beta launch, three builders have deployed live sales center kiosks for field testing, successfully using the new customization dashboard to configure all customization options, media, and color themes.

mockuuups-vWxidVqsPBd2m6Fjkh64Bu (2).png

mockuuups-vWxidVqsPBd2m6Fjkh64Bu (3).png

mockuuups-vWxidVqsPBd2m6Fjkh64Bu (4).png

mockuuups-vWxidVqsPBd2m6Fjkh64Bu (5).png

mockuuups-vWxidVqsPBd2m6Fjkh64Bu (6).png

mockuuups-vWxidVqsPBd2m6Fjkh64Bu (7).png

DISCOVER

BACKGROUND

Where is the Sales Center App currently managed?

Customization of the sales center app is managed through the builder dashboard, but it is buried under the community tab, making it unintuitive for builder users. This structure creates a challenge, as this part of the dashboard is intended for builders to make quick, independent edits. Instead, Anewgo staff often acts as a middleman for these supposedly 'quick' updates.

What can be customized in the Sales Center App to fit a builders branding?

Apart from a builder's home content such as descriptions and prices which are managed by Anewgo staff, the only branding customization available to builders are the logo, banner color, menu color, gallery images, and points of interest. Because of this, Sales Center Apps for different builders tend to look identical due to similar layouts, differing only in logos, imagery, and some colors.

The image to the left shows areas that can be customized. To add to the confusion, those six editable content are customized in two different areas of the dashboard.

What were things I had to keep in mind?

When redesigning the Sales Center App dashboard, I had to consider its integration into the overarching unified dashboard, which is a consolidation of multiple analytics, content, and management dashboard into one, as I have described in this case study. This meant ensuring that the sales center dashboard aligns with the overall structure, navigation, and visual consistency of the unified platform while still addressing the specific needs of the Sales Center App.

Based on feedback over the years from builders and Anewgo staff, there were three resounding requests that were always made for the Sales Center App dashboard

Easier way for builders to navigate the dashboard to remove the staff middleman
More opportunities for branding customization (means additional settings to design)
Simple configuration tasks are too tedious

DEFINE

NAVIGATION USER FLOWS

Utilized the dashboard high-level goals to create the navigation architecture of the new dashboard and pinpointed where app customization will reside

Solving the navigation problem not only involved the sales center but also all of the Anewgo marketing and sales products home builders can subscribe to. Thus, when planning the high-level navigation, I divided the main dashboard goals into their own distinct modules. With one dedicated entirely to managing the customization of any Anewgo product.

From the outset, users can immediately identify where to go for customization, preventing them from getting lost in an overly complex navigation.

JOIST Research_Brainstorm Workspace (5) (1).jpg

SALES CENTER CUSTOMIZATION MAPPING

Distinguished the required user goals between customizing page-specific content vs managing specific kiosk settings

Further honing on simplifying navigation, I brainstormed and mapped the configuration settings needed at a high level based on the frontend app that I concurrently designed. The user goals were either in one of two bins: page-specific settings or kiosk-specific settings. And so I mirrored the navigation to focus on just these two sections. This clarifies the scope of changes that people make and prevents any confusion whether a change affects a singular page or the entire kiosk. This also helps reduce the leaning curve for new dashboard users.

JOIST Research_Brainstorm Workspace Half 1.jpg

JOIST Research_Brainstorm Workspace Half 2.jpg

DESIGN

In the original UI, the dashboard landing page lacks clear instructions or guidance, leaving users unsure of where to start. It only gives two potential starting points: communities and plans, which are typically the most common places a user needs to configure. This is the typical roadblock for users unfamiliar with the dashboard, leading to guesswork for the users as they start going through the multiple options in the side menu, turning a supposed-to-be self-serve task into additional support requests to the Anewgo staff.

Within the communities page, there are multiple levels of navigation as well so the Sales Center customization tab is not immediately made obvious.

In the first iteration, as I’ve stated in the dashboard unification project case study, I wanted the starting point modules to be clear with supporting copy of what can be managed in each module dashboard. When they click on the module, they can then select the product to edit under the configuration menu item. They are then taken to the page customization, where the different pages are divided between required and optional, depending on that user’s needs, which streamlines the process.

Based on team discussions, we identified that consolidating multiple customization settings on a single page, even with accordion sections, can easily overwhelm users. This raises a cognitive load issue for users as it becomes difficult to scan for relevant information. Additionally, extensive options and interactive elements (which I had planned to include) could lead to performance issues.

To address these concerns, I designed separate customization pages for each Sales Center App section. Users can now easily select the specific page they want to edit through a drop-down menu, simplifying navigation and reducing complexity.

NAVIGATION

How might we help users easily navigate to and differentiate the sections within the Sales Center App customization?

In the original front-end UI, the homepage and screen saver only had a singular layout with options to customize the logo, images, banner color, and menu color. Due to these limitations, different builder’s Sales Center apps tend to look similar.

In the current dashboard, both the homepage and screensaver customization pages are managed in different tabs of the dashboard, despite being in the same app.

The screen saver is the first impression of potential homebuyer who enter the sales center and so I wanted builders to have the opportunity to showcase the community in different media formats. Thus, aside from the different photo layouts, builders can also include videos as their screen saver. which adds to the eye-catching factor to the app.

Additionally, you can easily add multiple media from the media gallery, allowing users to reorder and randomize the images as they see fit. This brings variance, offering a fresh layout every time it goes back to the screensaver. Depending on the layout chosen, the image thumbnails change in opacity to visualize which images will be used.

combined_screenshots_with_drawing (51).png

When choosing a layout, I used a similar UI as the the screen saver to build familiarity within the dashboard. I designed three different layouts, each with differing umber of cards. They can then assign pages to the number of cards they have chosen giving them flexibility on only using pages relevant to that builder depending on their needs.

For quick visual feedback as users are customizing their homepage, I designed the UI to be interactive where users can click on each element in the preview workspace and modify the page it links to, description/copy, and card image. This removes the guesswork on what the homepage will potentially look like and allow them to easily experiment with different layouts.

PAGE SETTINGS: SCREENSAVER, HOMEPAGE, ABOUT BUILDER

How might we promote experimentation of different layouts within the dashboard in order to encapsulate a builder's identity and needs?

Out of all the dashboard customization pages, there have never been any reported usability problems for the amenity and gallery pages. The primary challenges were in the front-end side and the ability to multi-upload, which I have resolved in the new media gallery UI.

For the amenity, gallery, and lifestyle pages, I wanted to maintain a consistent UI customization as they have very similar functions and goals. As a result, key features such as category-item organization, media assignment, and copy functionalities were preserved to ensure a familiar user experience."

In the refreshed UI, users are able to:

Add an amenity category with the ability to rename and delete
Reorder the amenity category as it will appear in the frontend, added a numbering system
Assign and reorder images to each amenity, where I added helper text to show total count of images without crowding the card.

The background color of the panel is mapped to a chosen color theme customized by the user.

combined_screenshots_with_drawing (52).png

combined_screenshots_with_drawing (53).png

combined_screenshots_with_drawing (54).png

This is a new page that I added where builders can explicitly describe that community’s culture, values, and everyday activities. This is vital for communities catered to specific demographics like 55+, luxury buyers, or new homeowners.

This has similar functionalities with the amenity and gallery customization pages with the main difference being able to only assign one photo and adding a more substantial description/explanation for each lifestyle slide.

combined_screenshots_with_drawing (61).png

combined_screenshots_with_drawing (60).png

PAGE SETTINGS: AMENITIES, GALLERY, AND LIFESTYLE

How might we improve efficiency in media management/assignment while still maintaining familiar features?

This tends to be the most tedious customization step when setting up a new Sales Center App. Users constantly go back and forth between an online map and the dashboard as users reference the latitude and longitude when adding points of interest. Another key issue is that users are unable to add POIs that the map provider’s geocoding service doesn’t know about. Thus, upcoming constructions of upcoming POIs are unable to be added.

Knowing this, I focused on a design direction that integrates an interactive map, allowing users to visually select key locations and add custom POIs

The changes I made focused on efficiency and visual feedback when adding points of interest.

Added suggested categories to kickstart POI organization
Ability to add, rename, and delete POI categories (list of POIs)
Retained ability to add a specific icon for every category. Added image thumbnail of how this icon will appear on the map
When adding POIs, users can either
- search for names or addresses in the map which will automatically place the marker
- click on any point in the map to add a marker
- retained manual addition through lat, long

combined_screenshots_with_drawing (62).png

combined_screenshots_with_drawing (63).png

combined_screenshots_with_drawing (64).png

AREA MAP

How might we enhance efficiency and streamline the process of adding and organizing points of interest?

In the original UI, there are only two areas you can edit the color: the homepage banner color and the menu color, with the former only appearing once throughout the entire app.

Despite simply having two areas for color customization, the way to modify these two colors are far from simple. The menu color is hidden beneath the “Admin” page which does not live in the same area as the Sales Center customization. Secondly, users would need to contact the account manager assigned to that customer just to change the background banner color.

The initial ideas was to design a color theme assignment UI for each Anewgo sales product. However, for customers subscribed to multiple products, repeatedly assigning color themes, especially with very specific color hex codes, proved to be a tedious process. After consulting with the team and account managers, we decided that a global color theme management system will be more efficient for builders. Thus, they would only need to assign colors once, eliminating the need for repeated adjustments.

I also introduced the function to create and save multiple color themes, enabling builders to experiment with different designs and easily switch between themes as needed.

combined_screenshots_with_drawing (65).png

When creating a new color theme, I wanted users to quickly visualize how their branding colors appear in the front-end both in terms of aesthetics and contrast. To achieve this, I added thumbnails that show the mapping of these colors, with helper text to explicitly state how these colors will appear in the UI.

Once a theme is created, it will be displayed in a list where each theme can be managed. Each theme is represented by a color bar element to provide a quick overview of the colors and their proportional usage in the app.

combined_screenshots_with_drawing (66).png

Assigning color themes to an Anewgo product is as simple as going to that specific product’s configuration page and selecting from the list of color themes users have created under that builder. The assigned color theme is displayed, together with thumbnail previews of the app.

Users can just as easily switch it out and has a quick link to go back to the management page if they wish to modify the colors in the theme.

combined_screenshots_with_drawing (67).png

combined_screenshots_with_drawing (68).png

COLOR THEME CUSTOMIZATION

How might we streamline color customization across multiple products, enabling users to set branding colors once and apply them effortlessly?

In the original UI, general settings relating to the app itself are scattered in different areas of the dashboard, making it difficult for users to determine which settings affected specific aspects of the app.

Thus, going into the redesign, I wanted to centralize general settings relating to the Sales Center App but also differentiate it from the actual page content customization.

GENERAL CONFIGURATION

How might we aid users to differentiate the various elements they are customizing within the dashboard?

CONCLUSION

NEXT STEPS

Test user comprehension and develop instructional resources for the dashboard

Conduct tests with dashboard users evaluating task completion rates and time on task to evaluate effectiveness of the navigation.
Evaluate the user’s comprehension of various staging environments, specifically the differences between saved and published states.
Collaborate with the customer specialists to write instructional copy and assets for a resource section.

mockuuups-man-interacting-with-iphone-11-mockup (1).jpeg

KEY TAKEAWAYS

It's okay to step back and reevaluate

Familiarity ≠ Ease of use. I have encountered significant feedback, primarily from in-house users, who are satisfied with the existing dashboard design. Learning a new layout is a big barrier for adopting new ways and so it's important to pitch ideas and visualize these ideas often.
Designing in high-fidelity immediately after a concern is raised can OFTEN (not always) improve buy-in and users become more open to change.
Real-time visual feedback is vital especially in dashboard design.

There have been many instances of builder users, who are unfamiliar with the dashboard, accidentally changing a setting or deleting content, wherein oftentimes are destructive. This is because, if a user changes a setting, there is no confirmation or indication that changes are immediately made. This is exacerbated by the lack of a preview or staging environment functionality so users tend to go back and forth the production app and the dashboard.

From talking with Anewgo staff and some customers, sometimes they just wish to double-check on certain copy, settings, colors, or media. They don’t intend to change any content most of the time. To account for this common behavior safely, I added an Edit button and so users cannot make any modifications unless they click on the button, reducing human error factors when interacting with the dashboard.

SALES CENTER APP 3.0 - DASHBOARD

ROLE

As I designed both the front-end and dashboard concurrently, I was in the same team of two developers, one QA, and one PM. After the beta release, I collaborated more with the marketing team and some Anewgo staff for gathering insights on the dashboard.

CHALLENGE

The two main challenges were designing an intuitive navigation path to access kiosk customization and enhancing the kiosk customization experience of every page in the dashboard to reduce the need for extensive training

APPROACH & IMPACT

A customization experience focused on streamlined navigation, intuitive visual feedback, proactive error prevention, and comprehensive instructional copy

DISCOVER

BACKGROUND

Where is the Sales Center App currently managed?

What can be customized in the Sales Center App to fit a builders branding?

What were things I had to keep in mind?

Based on feedback over the years from builders and Anewgo staff, there were three resounding requests that were always made for the Sales Center App dashboard

Easier way for builders to navigate the dashboard to remove the staff middleman

​More opportunities for branding customization (means additional settings to design)

​Simple configuration tasks are too tedious

DEFINE

NAVIGATION USER FLOWS

Utilized the dashboard high-level goals to create the navigation architecture of the new dashboard and pinpointed where app customization will reside

SALES CENTER CUSTOMIZATION MAPPING

Distinguished the required user goals between customizing page-specific content vs managing specific kiosk settings

DESIGN

NAVIGATION

How might we help users easily navigate to and differentiate the sections within the Sales Center App customization?

PAGE SETTINGS: SCREENSAVER, HOMEPAGE, ABOUT BUILDER

How might we promote experimentation of different layouts within the dashboard in order to encapsulate a builder's identity and needs?

PAGE SETTINGS: AMENITIES, GALLERY, AND LIFESTYLE

How might we improve efficiency in media management/assignment while still maintaining familiar features?

AREA MAP

How might we enhance efficiency and streamline the process of adding and organizing points of interest?

COLOR THEME CUSTOMIZATION

How might we streamline color customization across multiple products, enabling users to set branding colors once and apply them effortlessly?

GENERAL CONFIGURATION

How might we aid users to differentiate the various elements they are customizing within the dashboard?

CONCLUSION

NEXT STEPS

Test user comprehension and develop instructional resources for the dashboard

KEY TAKEAWAYS

It's okay to step back and reevaluate

ERROR PREVENTION

How might we empower users to make changes confidently and prevent accidental or destructive modifications?

More opportunities for branding customization (means additional settings to design)

Simple configuration tasks are too tedious