Let's talk design!

Send me a hello, and I'll get back to you!

Name *
Name
           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

thumb.png

HPE.com | UX + Web + Mobile + UI

HPE.com : Cloud

 

Last year, HP split into 2 companies, spawning a $50B startup called Hewlett Packard Enterprise in need to revamp their brand, website, and mobile site. To haul the massive project, I was brought onboard at Razorfish working as an associate UX designer but under UX Intern title. I was involved in content strategy, ideation, wireframing, light prototyping, creating visual mockups, and quality assurance.

 
 
 
 

The old website was hard to navigate and information on the cloud products was really disorganized. Our goal was to get viewer to quickly understand what specific cloud products they need to discuss with a HPE representative, and have pages ready for development to meet the launch date.

 
 

OLD INFORMATION ARCHITECTURE FOR CLOUD

 

PAGE STRUCTURE 

 

How do we structure the pages so it’s easy for users to navigate to solutions they need?

After discussing with the business analysts and subject matter experts from HPE to grasp the field of HPE cloud offerings, we learned that we have two main target audiences that require different strategies to sell the products.

The final site map for cloud includes a landing page for C-suite executive to quickly understand the need of cloud, and 3 child pages for technical leaders to efficiently understand the specific products they need in their situation.

 
 

NEW INFORMATION STRUCTURE FOR CLOUD

 
 

To keep the information architecture consistent through out the website, we inherit the templates from other pages at the same level as a structure for wireframing.

With the template in mind, we worked closely with other functions to define strategies to builds trust in the cloud products. We created rounds and rounds of iterations with different combinations of text and images to emphasize the need of product, HPE's leadership in Cloud computing, and customer success stories.

Click below to view some full page wireframe iterations, including website page and mobile.

 
 
 
 

Components

The client provided us with a set of use cases for their products, so we decided to utilize them to sort the products so users can find what they need more efficiently. We went back and fourth with clients to reduce redundancy in use cases to simplify the effort for users.

We tried to avoid introducing new components to development for launch, so we explored the existing components and evaluated their pros and cons, and decided to modify an existing tab component to suit our need.

At the end, we made a trade off for visibility of options with a tabbed system to a modified accordion to allow our components be flexible to adapt to contents in multiple languages as accordion has more horizontal allowance for text.

 
 
 

VISUALS

 

I took the initiative to take the wireframes and turn them into visual mockups in Photoshop according to HPE's style guide. And ended up helping the creative team with a few more pages.

Meanwhile, I designed the call-to-action banner so it is more actionable.

 
 
 

SUCCESS

 

We had a successful and smooth launch! Just one day after launch, there were 57,000 unique visitors, 6,600 video views, 1,700 asset downloads, and averaging 4 minute long visits.

We thought the design of cloud pages was successful as the pages fits well with the rest of the website, with simplified click path and user journey, consistent information architecture, and cohesive visual language, all ready for launch.

The successful smooth experience relied on testing the pages ourselves. We helped QA pages that were freshly pushed out of development, checking if components behave correctly with each interaction, and visual consistency with specifications.

Ideally we would participate in running more usability test, but that's some sacrifice we had to make as we were racing with time to get the first website close to launching.