TRANSLATING DESKTOP TO MOBILE
HEWLETT PACKARD ENTERPRISE
INTRO
Hewlett Packard Enterprise (HPE)'s cloud storage platform is designed for the desktop because its users are primarily desktop users.
But, its mobile interface was lackluster and unusable. It was time to start responding to the mobile world.
Due to the confidentiality agreement with HPE, this case study showcases the overall design process without disclosing sensitive information.
RESEARCH
Understanding the User Story
Traditional user research was limited. But, to ensure that all designs were user-centered, a user journey map was created, with the help of interaction designers.
The user journey map revealed that a mobile product would most likely serve users who needed urgent access to HPE's product.
IDEATION
Attempting to Translate
The attempt to convert HPE's desktop screens to mobile screens was a rough start. Each page featured complex patterns that were unfit for the mobile environment.
There was a need to design responsive versions of components in HPE's design system.
DESIGN
Staying Faithful to the Original Language
While re-imagining the mobile version of the components, the following guidelines were used.
Visual Similarity
Components should look similar, so users connect different versions.
Interactive Integrity
Components should fulfill the same user goals across devices.
Seamless Transition
Components should fluidly respond to different screen sizes.
This process also involved proposing new breakpoints and grid systems into HPE's design system and introducing tablet design into this project.
PROTOTYPING
Putting Everything in Context
After designing the components, it was time to figure out content layout. With HPE's complex desktop interface, the mobile interface needed its own unique content layout.
The mobile content layout was inspired by the journey map. Elements that provided critical information and functions had greater priority. Users would be greeted with these elements first when on smaller screens.
HANDOFF
Sharing the Final Work
As the end drew near, documentation was integrated into the final design file to ensure that future designers and developers are adequately informed about the research, design, and process.
REFLECTION
Critiquing the Translation
Asking for Help
So many questions. But, having a design team fosters collaboration and communication to find answers.
Growing Pains
With each new iteration, new problems and questions arose. A designer's job is to keep iterating to the solution while accepting the inevitable constraints.
Rationalizing the Design Decisions
When presenting the work to others, there is great value in explaining why a certain design approach was taken.