UX/UI Designer & Front-End Developer
Skyline Design System
Project Summary
Challenge
The current development platform used underwent a major upgrade and its components were significantly enhanced so the team needed a new Skyline site (2.0) to document and share all those updates effectively.
The existing Skyline site (1.0) is now outdated, contains too much redundancy and lacks clear paths to information and CTAs.
Objective
I concluded and understood that the objective was to create a modern simple site that organizes content in a logical manner and it is easy to navigate and read for various types of users: developers, designers, marketing team, and account managers.
Tools
XD
Photoshop
After Effects
Crownpeak
Timeframe
6 months
Getting started
Research
I conducted a top to bottom heuristic evaluation of the existing 1.0 site to not only determine what worked an what didn’t on the site, but also to collect all the pieces of information need to be migrated to the 2.0 site. I also inquired 5 potential users of the site about how they use the current site and what type of information they need or look for in their regular basis to assist them with their work.
Analyze
I analyzed my findings and determined the different categories that information should fall under as well as what type of information each type of users would be interested in. Furthermore, I determined that most of the information on the existing site was repetitive and it was missing a large number of actual needed assets and information that the current users are finding in external sites and resources.
Create
I outlined the AI of the site to determine all the pages needed for the site. I also sketched out lo-fi wireframes to have an idea what the frame and layout should consist of for most of the pages. Shortly after, I created a high-fi prototype, which was restricted by platform limitations and ultimately led me to two other concepts.
Ideal Layout
Ideally we would have liked to implement a dynamic vertical navigation that organized all the pages and content in the below manner. However, due to the platform and components limitations, we had to move forward with a standard horizontal navigation.
Other concepts
Due to those limitations, I explored three other layout concepts with horizontal navigations.
Concept 2
Concept 3
We moved forward with Concept 3 as it was the cleanest visually and consisted of straightforward paths to the different
sections and content on the site. It was technically also the most feasible.
I presented this particular concept to 4 developers and 2 visual designers, and 3 account managers and had them find various pieces of information within the site. 90% of them were able to find all the requested information quickly and easily while the remaining 10% struggled mostly due to not being familiar with certain type of information request as it not used in their role and were unsure how the piece of information would be categorized or look like.
Through these tests, I was able to obtain good qualitative feedback that helped me iterate and enhance the final product.
Wanna see a walkthrough?
This site still in development and currently for internal users only, but you can find a couple of the key pages to it below. If you are interested in a walkthrough or want to learn more about it, please contact me.