Design Highlights | Pyke Relucio

top of page

Frame 15137 (1).jpg

ANEWGO - DESIGN HIGHLIGHTS

This is a collection of smaller-scale supplementary interfaces I designed for the various Anewgo products, which are now live in production. Project timelines ranged from a few days to several months.

ROLE

As the first and only in-house UI/UX designer in Anewgo, I have collaborated across all teams from sales & marketing, QA, production (home rendering designers), and development. Because of this cross-functional aspect, I was involved in designing all visual aspects such as email templates, web pages, and marketing content.

CHALLENGE

As all Anewgo products transition from version 2.0 to 3.0, all auxiliary elements will also require a refresh to ensure consistency with the updated design

Because of this, layout and styling were inconsistent. Over the years, the company have stitched it together into a design journey in the My Home App, leading to an inconsistent UI and confusing user flow with poor optimization for smaller viewports.

My initial observation about the challenges of the slider UI is corroborated by customers who have reported difficulty in controlling the slider UI.

To address these concerns, I replaced the sliders for the down payment and interest rate with input fields where users can easily type in their desired interest rate or down payment. For the term length, I used a button group which is more more suitable for discrete values.

Calculator Modal Desktop.jpg

Based on quick feedback from my team, our product manager highlighted the need for easier value adjustments without reentering the values. To address this, I added arrows as a quick way to change the values. Additionally, I separated the home price from the monthly price, emphasizing each value to improve the overall visual hierarchy.

Currently, this updated calculator is used in multiple Anewgo products such as the Sales Center App and the Anewgo Marketplace.

Harper-A-by-Shenandoah-Homes-Anewgo-Marketplace-11-25-2024_02_58_PM.png

Current mobile screen.jpg

My initial observation focused on the use of sliders, especially in the context of very specific interest values. Sliders can be difficult to control especially when selecting specific interest rates. The same problem is seen in the the term length, which typically falls within fixed intervals (e.g., 10 to 30 years in 5-year steps). Since these are discrete values, a slider may not be the most appropriate input method to use.

Another observation is the poor visual hierarchy in the text. It's unclear to users where to begin and the labels also suffer from low contrast against the background, making them difficult to read.

calculator-solid 1 (1).png

INTERACTIVE CALCULATOR

How might we enhance the overall usability and precision of the interactive calculator within the Anewgo apps?

From talking with builders, I learned that their clients and even sales agents sometimes mistake the email as spam due to its messy format, wrong grammar, and overly simplistic UI.

For this design, I applied standard best practices for professional emails. Additionally, the email lacks substantive info in the other than the name of the plan. Thus, including additional elements like an image, price, and home specs will not only enhance the professionalism but also provide relevant information to the homebuyer.

Frame 15134 (1).jpg

In addition to enhancing the aesthetics, I also scoped out various use cases for the brochure to create a unified layout that works across all Anewgo products.

For instance, if the brochure is downloaded from the My Home App or Sales Center App, which provide the entire home design experiences, it includes a thumbnail of the user’s selected exterior. However, if downloaded from the standalone design tools, where the exterior may not match the user’s selections, the thumbnail is omitted from the email template.

This layout is now used in email templates across all Anewgo products and can be customized to feature the builder’s logo.

Frame 1833.jpg

Frame 14985.jpg

Frame 15023 (1).jpg

combined_screenshots_with_drawing (74).png

This email is sent to prospective homebuyers who request a copy of the brochure containing their customized home options, allowing them to save it or share it with others. At first glance, it is a skeletal layout for an email that's supposed to visualize and inform a user.

envelope-open-text-solid 1.png

BROCHURE EMAIL TEMPLATE

How might we improve the professionalism of the brochure email template to ensure recipients don’t mistake the email as spam?

Frame 15132.jpg

Users get to the unauthorized access page if they arrive at a page in the Anewgo Console dashboard where they don’t have the proper permissions. From initial observations, this unauthorized access page is purely static, lacking any actionable guidance for the user on what to do.

lock-solid 1.png

UNAUTHORIZED ACCESS PAGE

How might we improve the unauthorized access page in the dashboard to provide users with actionable guidance when they lack the necessary permissions?

file-lines-solid 1.png

CUSTOMIZED HOME BROCHURE

How might we enhance the brochure to provide a more contextual and comprehensive overview of a homebuyer's design options, floor plans, and community details?

I conducted a review of the current brochure pages, identifying gaps and compiling a list of additional pages needed based on builder feedback and requests. I also mapped out page variants to accommodate different use cases such as incomplete builder info and empty states.

Moreover, some builders expressed additional customization options beyond adding their logo. To address this, I explored opportunities to incorporate subtle branding elements, such as customizable dividers or headers to better align with each builder's unique identity.

JOIST Research_Brainstorm Workspace (8).jpg

For the layout, I retained the header elements but enhanced it by adding a page title and subtext to provide context about the content. I also placed key information at the forefront by featuring the home price and mortgage price. Additionally, I introduced subtle branding customization options for the divider and cover elements.

In terms of content, I focused beyond just the homebuyer's design options but also the overall plan and community to give them a high-level overview of their home, so I designed a designated Plan page and Community page. We also moved forward with the divided floor plan page, allowing users to view both their selected options and the full floor plan side by side without needing to toggle between pages.

This brochure layout is currently used by multiple Anewgo products such as in the Anewgo Marketplace, Sales Center App, and the upcoming Anewgo Home Designer.

Frame 1578.jpg

Frame 14924.jpg

Frame 1581.jpg

Frame 1579.jpg

Frame 14999.jpg

Frame 1619.jpg

Frame 1621.jpg

Frame 1616.jpg

Frame 1580.jpg

Frame 14989.jpg

Frame 14990.jpg

Frame 1617.jpg

Screenshot 2024-11-27 101702.jpg

Brochures are a summarized document of the potential homebuyer’s plan and customization options. The document also includes the home builder company and the assigned sales agent. The brochure includes:

homepage - home exterior, sales agent, homesite lot
exterior - exterior colors and materials
floor plan - full-page image of floor plan (all floors)
interior - interior options, colors, and materials
site plan - lot details
summary - itemized list of options
disclaimer

bottom of page