Combining wireframes with UX mapping is a great way to understand why certain design decisions are being made and what metrics to track. In this community page wireframe, key elements are mapped. First, I map how each design aligns with organizational goals and vision. As a UX designer, I must advocate for the user, so mapping how this design impacts the user is also crucial. Then we need to know how this design will impact the user's emotions and how this affects behavioral change through chemical triggers. Lastly, we want to understand how these things will drive connectivity and carry our brand forward in the market, so I finish by mapping out powerful moments.
Find an Advisor Profiles
The find an advisor profile wireframes involved creating a scrollable member page, where users can filter by the type of financial advisor they want to work with. This wireframe also included advisor highlight containers for any member who wants to advertise. Clicking on any advisor leads to advisor profile pages. These profiles include member bios and types of services that they offer to clients.
I thought through a financial advisor's journey when they interact with their clients as I built this task list wireframe. To keep track of all the tasks they need to do to successfully work with their client, basic tasks lists needed to be reimagined on top of remaining compliant to industry standards. This wireframe gave stakeholders just enough information to grasp what we were trying to accomplish and allowed our dev team to provide thoughtful input before I dove into HiFi designs.
Developing the task list further, we wanted to implement this feature into a more extensive financial advisor CRM product. These wireframes displayed critical features of this product, which included the dashboard, household and client contact records, automated workflows, reports, integrations, and settings. These wireframes were stripped of many key features we wanted to see in the final project because we were solely focused on the MVP.
A market and competitive analysis also accompanied these wireframes to ensure that our product aligned with the industry and the other products that our target market was used to using.
The website revamp wireframe example was designed to create more impact on users. The current website is out of date and has an inaccurate informational hierarchy. This wireframe, paired with UX mapping, was to show how making a few updates could drastically impact user engagement and drives value and product usage. Research shows that users read website pages from left to right and top left downward first. Putting attention-grabbing messaging in the top left corner was imperative for this design for this reason.