Peña Station NEXT
Peña Station NEXT is a new vision of community. Something extraordinary happens when you combine an integrated and connected community, smart grid clean energy, and enhanced mobility. Welcome to Peña Station NEXT, an entirely new kind of community and a global showcase for integrating innovation into the fabric of cities
MY ROLE
• Userflows
• User Testing
• Information Architecture
• Wireframing
MY ROLE
• Prototyping
• UI Design
• Visual Design
THE CHALLENGE
The challenge with Peña Station NEXT(PSN) is to create a website as innovative as the real estate development itself. When complete, PSN will lead the country in smart-grid, clean energy, autonomous vehicles, enhanced mobility, and technology-enabled wellness. With Panasonic as one of the primary partners, Peña Station NEXT truly is a new vision of what community can look like.
THE PROCESS
Research
From the initial research, I found PSN’s website—which was built on a free template and noticeably clunky—didn’t inspire visitors. It didn’t conjure the vision the client wanted. Simply put, it underwhelmed. I was approached to rediscover what this community could be with new personas, information architecture, and all-new UX/UI that would inspire its visitors and, more importantly, its investors.
Stakeholder Interviews
Not only did I learned that the previous website was clunky, it also had broken links, and unusable navigation for consumers. This was not ideal as they wanted to launch their website and a bad user experience is bad for business before they start taking on developer deals. They needed this app and site to showcase what PSN could be in the future so it was easier for developers and retail real estate investors to buy into the concept.
Personas
After getting acquainted with research previously conducted by the Peña Station NEXT team and the various support documentation, I created the personas to focus the real estate and retail developers and focus around user needs and solutions for current pain points.
Information Architecture
The IA is organized around the new user’s needs and wants while visiting the site and their major features. While I kept the existing major features (or what I consider the essential features on the page), I added minor features that would help the user get the most out of the development information with easy to navigate menus and helpful links.
Ideation & Wireframes
While almost every Peña Station NEXT web experience was due for a UX and visual overhaul, the client experience was currently in the midst of a complete redesign and would be applying the design system first.
After researching several different design system models, I decided to structure our system after Google’s Material Designs but with our own little flare.
Prototyping
I decided to proceed with usability testing with the strongest set of wireframes, which maintained the original one-column design with small sidebars for call-outs because of space and information that it allowed. I conducted user testing on my low-fidelity prototype in InVision to see how users would complete certain tasks once they were given some context. I conducted my testing with individuals similar to my personas that have used some variation of an investor portal before.
High Fidelity Designs
Scaling the design system to streamline the high fidelity design process was very important in this site. Once the first iteration of the design system was complete, I quickly spread a unified look-and-feel across every new product initiative and touchpoint.
While the master XD file was great for copying and pasting assets, the interaction rules and best practices for each component were still knowledge in my own mind. Soon, the engineering and product team encountered many questions around small implementation details, which required every use case to be accounted for.
Visual Design & Style Guide
To help design more efficiently with engineering, I began working on the new version of the design system. The new version has more detailed documentation for each UI pattern and micro-interactions. After much back and forth with development, I landed on a cohesive system for implementation.
RESULTS
A “smart website” for Denver’s first “smart city”
After thoroughly assessing, communicating, building and testing, we were proud to deliver a custom fresh and easy-to-navigate product for Peña Station NEXT. The new simple designs were paired with a robust internal platform that allows admins to easily make updates and visitors to navigate quickly throughout the site, allowing PSN to offer an enhanced online experience to their visitors.
A seamless mobile experience
Part of the process included flushing out all of the mobile designs and really dialing in that experience. I ended up going with a floating call to actions along the bottom to prevent the user from needing to scroll for days in order to finally have an interaction. I also cleaned up the “form section” so that everything was pixel perfect and beautiful.