RED
RED, or Reno Experience District, is a multi-use development that boasts multiple apartments, retail, and hotel in an up-and-coming area in Nevada. As one of the biggest projects completed by Lyon Living, our team decided to custom design the project’s website in-house.
INTRODUCTION
Responsible for designing the information architecture, user flows, design deliverables, prototype, shareholder presentations, and auditing developer progress.
MY ROLE
Jen Bonina - UX/UI Designer
Dana Duong - Project Coordinator
Shelby McKenna - Creative Director
Apartment SEO - Development Team
TEAM
• Photoshop
• Invision
• Canva
• Illustrator
TOOLS
Project scope
& limitations
At Lyon, our marketing team was quite small, so I was responsible for making all the designs and spearheading the project. Luckily, I had two other team members to review my work and manage other aspects of the project. RED was a big development and needed a website that would help people view apartments for rent, learn about community events/amenities, get details about retail shops on campus, and provide a gateway for booking a hotel room.
We had limited resources (I was the only designer available), no existing designs to work off of, and a timeline of 6 months from concept to live site. Lastly, the name and branding of the project was changed halfway through!
Initials steps
In order to be best informed when working on such a large project, I decided to take an online course through Cousera and University of Michigan to learn some UX principles. This is where I learned about basics like Nielsen’s 10 heuristics of usability design. Unfortunately, the course did not mention much about user research or design programs like Figma. This left a gap in my design process, but I know better now ;)
Team Huddle
Because this website was being built from scratch with all new branding, I did some initial research to see how other companies balanced the complexity of one website providing a lot of services (rentals, retail, events, etc) to several audiences. One website that did this well was Irvine Company’s Spectrum Center site. RED had ambition to be similar to Spectrum (live, dine, shop in one place vibe), so I emulated their information architecture for RED.
Competitive Analysis
As mentioned before, our team was really small, so we had to be strategic about the established roles. Shelby, the Creative Director, set the branding for this project and was tasked with approving my designs. Dana, the Project Manager, helped create the timeline and milestones, as well as coordinated design hand off with the development vendor. We checked in weekly to make sure our goals were aligned and we were on track with our set deadline.
Further Education
Mood board
This was the first time that Lyon allowed someone to make a property website in-house, and so with the brand standards in hand, I set off to compile inspiration from resources like Pinterest and Behance to create a mood board for the new site.
While the name of the project changed, much of the approved visual design remained the same. We put a focus on bold text, grid structure, and stunning photography that aimed to bridge together nature and urban city.
Sketching
Sketching out designs was an incredibly time-saving exercise! I was able to problem-solve and layout the basic design of site quickly. By having all the needed pages sketched out as notecards, I was able to rearrange and move around pages until the final IA was solidified with the help of the team.
Leasing out apartments was the top priority for stakeholders, so during the sketching process, I spent the most amount of time sorting out the user flows for future residents.
Looking back, I would have liked to have moved forward with a mobile-first approach.
Iteration & rebranding
We were definitely thrown a curve ball when we found out that the name of the project was going to change! The logo design and brand guide were updated to reflect to new name. This change was around the time when my supervisor went on maternity leave, so I ended up taking over the final logo design iterations + brand guide, in addition to the web design! At this point in the design process, I skipped mid-fidelity screens (mostly because I didn’t even know that was a thing) and went straight into making high-fidelity designs in Photoshop (I’m queasy just thinking about that).
INITIAL DESIGN
During our presentations with stakeholders, we reviewed edits and I applied the feedback into the next few rounds of changes. As you can see below, some of the bigger changes include a cleaner design systen, with simplified buttons, typography, and more intentional use of secondary colors. How desperately I wish I had known about Figma to design this site! While I am more than proficient at Photoshop, designing and editing all the screens in that program was less than ideal and insanely time consuming.
REITERATED DESIGN
Collaboration and prototyping
Collaboration was absolutely crucial for this project due to the amount of moving targets and changes that seemed to occur on a weekly basis. By continuing to have open communication with stakeholders and team members, and by remaining flexible, we were able to deliver designs within the set time frame that met the needs of both investors, stakeholders, and the future residents who would be utilizing the site.
Once the designs were nearing the end of iterations, I plugged them into Invision in order to have a working prototype to show higher ups the functionality (before anything was coded). This prototype was also used as a reference during developer handoff so they could see specific interactions and interfaces, such as a menu pop-up, button hover/selection, clickable elements, etc.
Handing off the work
For RED, Lyon partnered with Apartment SEO to develop and code the site design and integrate the backend system for apartment leasing. Leading up to project completion, Dana and I had several meetings with their team to better understand the needs and goals from a frontend and backend standpoint. These meetings gave me the chance to better understand their preferences for packaging design files and web assets for handoff.
Once everything was passed onto the developers, the last stage of the project took form. I spent the remainder of our timeframe auditing the website to make sure that it held the same integrity of the original design.
Let’s see the final result!
Takeaways and reflection
Despite being a huge undertaking, it was actually THIS project that made me realize my passion for UX/UI and want to pursue it as a more specialized career path. Looking back, I would have loved a chance to test out the design and perform more UX research with the live site, but another path revealed itself. It’s my hope to one day revisit with project and expand on it with Lyon to address areas of friction and make improvements to the UI.
This project gave me the opportunity to stretch my wings and learn how to manage my time in order to complete all tasks in a timely manner. It was also a fantastic opportunity to improve my presentations to investors/stakeholders, and integrate feedback from the team in order to foster a lasting quality product and team collaboration!