SUNSCAPE RESORTS & SPAS
CMS MIGRATIONS & TRAVEL WEBSITE REDESIGN
CLIENT
Sunscape Resorts & Spas by AMResorts
AMResorts made the decision to migrate all of their US consumer websites from their existing content management systems to Episerver. Sunscape Resorts & Spas was chosen as the first website to be migrated of seven unique resort brands. As a part of this re-platform, the website needed a complete UX overhaul and UI redesign.
Role
UX Design + Research Lead
Skills
Competitive Analysis // Information Architecture // Content Mapping // Experience Design // Technical Writing // Quality Assurance
TASK
Overhauling an outdated information architecture with a navigation of 10+ items
Establishing an effective mobile and tablet presence
Updating brand guidelines to comply with WCAG guidelines and applying them effectively
Creating universal components in Episerver that meet the needs for the Sunscape brand, as well as the remaining six consumer brands
Ensuring that these new universal components can be effectively used by authors to build this and future sites
UX Challenges
Research Methods
Competitor Analysis
I completed an evaluation of 24 different all-inclusive resort competitors. The evaluation included information on the navigational breakdown, analytical data, site features and an overall heuristic evaluation.
Stakeholder Interviews
I met with key members of our branding team to better comprehend Sunscape’s current strengths and weaknesses as a website and as a brand. I asked questions about how they wanted the brand to be represented on the new site experience moving forward.
User Personas
Due to a lack of concrete data about Sunscape’s actual customer base, it was determined it would be best to tailor the site experience to the audience we were trying to target. Based on the established brand guidelines, our core team created 3 brand personas that broke down our demographic into more specific personalities.
Information Architecture
Alongside the UX Manager, I evaluated the current site structure and took a deep dive into what information lived on every page. After that, I documented all of the content and organized it into new buckets.
Building the Structure
From all of the information I had learned through my research, I knew there was a lot of room for improvement in how customers would use the site. I began establishing the new plans for the site, how it would function and what that mean for the user. I accomplished this through three phases.
Phase one: Sitemap
From my research, it was pretty clear we needed to get our users to our resort pages because there’s not enough at at brand level to send users straight to the booking engine. Based on my competitor analysis, I was shooting for between 6 – 8 navigation items at a resort level. It was crucial that these items hit all of the key points of the vacation experience important to our Sunscape user and they knew where to go to find what they were looking for.
Phase two: Outlines
I wanted to make each page purposeful in the customer’s journey through the site by adding relevant content to each page topic. By having fewer pages than before, it was important to me not to condense too much and cram all of the information on as few pages as possible. My intention was to design each page to be easy to skim for those quickly researching, but have the opportunity to drill down when ready to dig a little deeper.
phase three: Wireframes
Once the page outlines were completed, I had to base the start creating the wireframes. The biggest obstacle here was not having any real basis of what the content would look like, so creating these flowing page layouts proved to be a little difficult. In addition, I wasn't just designing a static blue print – I was creating reusable components to be used on this and future consumer websites. Not knowing what information I would and wouldn’t have come time to put everything together, I worked closely with our brand specialist loosely using our current site’s content to try and create the best possible solutions.
Defining Components
The intention of the universal components was to give the ability and freedom to our website authors to create custom pages, modules and other items on the site based on the ever-changing needs of the brand and resorts. Some components had to be very specific in their function (ie: accommodations, dining, galleries), so when it came to the more open-ended ones, they needed to be reusable in a variety of instances to present information.
To make sure we got exactly what we needed from our product team, I created a catalog of “component definitions” that defined how these components would work, what authors could customize and how components should interact with each other. I created a diagram of each component with notes attached for our developers to reference. There were two big challenges here:
A Tight Deadline
The timeline was out of our hands, so when I was made aware that our product team was ready to get started, I had two weeks to create 20+ component diagrams and definitions. It was difficult to provide the level of detail and clarify for this many items in 2 weeks time, plus there were additional missing pieces I had to plan ahead for.
2. A Few Missing Pieces
Our full interface design wouldn’t come until later on, and our product team wanted these definitions early on to start strategizing. So, I needed to think ahead of possible options for customization that didn’t restrict versatility, but also didn’t create too many options for authors.
Here’s a few examples of what I handed off to our development team.
Creating the Site
Once the wireframes and component definitions were complete, I handed off these pieces to our visual designer to create high-fidelity mockups that would later be uploaded to Zeplin. Zeplin would help our product team define some of those missing customization pieces from the component definitions.
After this handoff, I worked closely with our Product Manager bridging any gaps between wireframes and visual designs, and guided our content authors to writing the components that were in development.
Building Our First Site in Episerver
Once all of the pieces were put into place into Episerver, it was time to see the components in action. I helped lead a team of website authors build and customize the site to the design specifications. After a series of QA, troubleshooting with the product team, and some tweaks, Sunscape Resorts & Spas launched in February 2020.
A New Responsive Interface
For the purposes of my portfolio, I designed the UI for the graphics on this page. I was not the UI Designer for the project, but this would have been my execution.