# Aligning around a core experience vision

Our first step was to align all of the stakeholders around the product’s vision. It’s common for stakeholders to be on the same page at a general level, but diving a level deeper often exposes subtle, but important misalignments. We facilitated a guiding principles activity with stakeholders to understand each stakeholder’s perspective and drive consensus on the high level design goals. 

# User research, personas, and user stories

With a clear set of  guiding principles, we began the user research phase of the project. The newness of the FlashRay technology created an early challenge with determining the appropriate target audience to study since nobody had actually used this technology en masse. We decided to focus on current NetApp enterprise storage administrators, but focused on where these users’ needs were not being met by their current tools. The primary output of our research involved personas and a prioritized list of user-centric use cases. These served as the basis for our designs as well as usability testing later in the project.

# Transitioning from research to design - conceptual model

The first step of transitioning from research to design involved creating the conceptual model for the new FlashRay experience. An effective conceptual model is critical to creating a usable experience because it serves as the foundation for the design and we expended significant effort working with the FlashRay product team to get it right before moving into more detailed UI design.


![ConceptualModel.png](https://echouser-api-media.s3.us-west-1.amazonaws.com/Conceptual_Model_3c57f7f379.png)

# Wire-framing, iterative design, and user testing

With the conceptual model defined, we started to generate wireframes. This was a highly iterative process where we worked closely with the FlashRay product team. We employed a process of regularly generating design drafts, reviewing them with the FlashRay team, and updating the designs based on feedback. With each iteration, we increased both the scope and depth of the designs. At strategic points in the process, we also built interactive prototypes to conduct usability tests with target users to also drive design changes.

# Creating the visual design

Another large component of our design effort was to create a look and feel that reflected a specific product personality. NetApp knew they had a groundbreaking product and it was paramount that users would get that impression. In conjunction with the conceptual and wireframe design activities, we applied our branding process to identify and create a look and feel that would capture the FlashRay team’s goals. We held an internal branding workshop to identify the product traits and personality that NetApp wanted from the FlashRay project. We generated moodboards to hone in on the visual style and tone that the NetApp team wanted and then iterated on detailed visual designs to arrive at a specific UI look and feel. After defining an overall visual design direction, we crafted a style guide and library of assets to bring it to life.

![netapp-body3.jpg](https://echouser-api-media.s3.us-west-1.amazonaws.com/netapp_body3_b6da70dcb1.jpg)

![netapp-body2.jpg](https://echouser-api-media.s3.us-west-1.amazonaws.com/netapp_body2_30914b789d.jpg)

![netapp-body1.jpg](https://echouser-api-media.s3.us-west-1.amazonaws.com/netapp_body1_8c8eb780c6.jpg)

# Impact

NetApp was thrilled with the final outcome. They felt it captured the unique power of the new system and would enable the new users of the system to easily and effectively operate it. Even before FlashRay was released, NetApp used prototypes based on the new UI to tout the benefits of their new technology.


Applying a comprehensive user-centered design approach from research to high fidelity design to a highly complex, technical system. 



User Research and Design 

NetApp was building a brand new flash storage solution based on a revolutionary leap in enterprise storage technology performance. This new system, named FlashRay, needed a new user experience that would enable administrator users to fully harness the power of the new technology, so NetApp turned to EchoUser to help them create the new experience. 

In an end-to-end engagement involving foundational user research, conceptual design, iterative UI design based on user testing, and visual branding, we delivered a modern, simple to use, administrator user experience that reflected the game-changing performance of FlashRay.

FlashRay Full-Service UX

# The design system as a means to harmonize design and engineering

Besides enabling a consistent user experience across TriNet’s products, we wanted the new design system to improve how designers collaborated with engineers. The inconsistent, contradictory style guides had helped to break down the design-engineering collaboration and encouraged engineers to work independently of the design team. Our work on the new design system would therefore require winning over the engineering team by showing that the design system would also benefit them by making their own jobs easier and improving the quality of their output.

# A multi-faceted approach to untangle the maze

Untangling the mishmash of style guides required a purposeful, multi-pronged approach. The first step was to decide on a foundational design system that would serve as the basis for the new design system. We conducted a brief competitive analysis of existing design systems, and along with the TriNet design team, concluded that Material Design should be the basis for the new design system.

At the same time, we completed a detailed audit of all of the existing internal Trinet style guides. We identified what the style guides actually covered, where there were overlaps, where there were contradictions within overlaps, and where the style guides had gaps in coverage for TriNet’s existing products. 

Finally, we began creating the new design system. This involved re-skinning the applicable existing Material Design elements into the TriNet look and feel. We resolved the UI contradictions specified in the previous style guides by determining the preferred design and rendering it in the Material Design/TriNet style. And finally, we created new UI designs for design elements that weren’t covered by previous TriNet style guides or Material Design.

# Collaboration as a key to acceptance

There were a lot of interested stakeholders as the design system would be affecting all of TriNet’s products. We worked directly with the designers, product owners, and engineers  from as many of the product areas as possible. We created a cadence to review and iterate key design decisions with all of the stakeholders to ensure their concerns and needs were accounted for in the final designs. 

# A unified design system put to use, immediately

We successfully created a useful design system that would serve the existing TriNet products as well as new products and functionality in their pipeline. The VP of engineering was so happy with the new design system that he mandated that going forward, the engineering team would be required to use the design system immediately. 

![trinet_ds_body.png](https://echouser-api-media.s3.us-west-1.amazonaws.com/trinet_ds_body_dab25a768c.png)

We unified multiple design guides and patterns into a single design system to serve as the single source of truth for the TriNet product family.


Setting a unified design framework

TriNet asked EchoUser to create a unified design system to support its design and engineering teams. At the time, TriNet had multiple internal style guides, created by different entities and at different times. They were inconsistent, overlapped coverage in some areas, and didn’t have coverage in other areas. The style guides’ ineffectiveness caused the engineering teams to ignore them and create their own custom UI elements without regard to what others were doing elsewhere. As a result, TriNet’s products suffered from numerous UI inconsistencies that compromised the platform’s usability. 


TriNet  - Design System

# Challenge

Castlight is a healthcare portal that helps employees make better healthcare decisions, such as finding a healthcare provider. EchoUser was brought in to improve on various sections on the site to drive user engagement and retention.  

Rewards Program  

At the time, the Rewards Program lacked recurring feedback to keep users motivated enough to return and earn points. Additionally, there were usability issues that impeded the performance of the program, such as clarifying the concept of how the points are converted to HSA dollars.  

First-Time User Experience (FTUX)  

At first, site design that catered to first-time users was limited. Employees were led into a colossal system without clear instructions or context. As a result, the site experienced a high dropout rate from users who did not understand its value.

![castlight-body1.jpg](https://echouser-api-media.s3.us-west-1.amazonaws.com/castlight_body1_24abecf023.jpg)

# Approach  

Since the design of the first-time UX (FTUX) could impact many parts of the site, we involved relevant stakeholders early in the process to utilize their feedback. We started with a design jam with the Castlight team, a brainstorming session for different specialists to share their perspectives, conceptualize possible solutions, and establish one promising direction for the designer to move forward with.  

After exploring and assessing the advantages and disadvantages of each FTUX model, we honed on an unobtrusive, flexible approach, which was intended to give users contextual instructions without getting in their way as they navigated the site. We then worked with developers to create an interactive prototype in the real-app environment.  

![castlight-body2.jpg](https://echouser-api-media.s3.us-west-1.amazonaws.com/castlight_body2_3c3778ee08.jpg)

# Impact  

The final usability test for the Rewards Program suggested that both “ease of understanding the concept” and “ease of taking actions” received positive response from users (5.67 and 6 respectively on a scale of 1-7; 1 being the hardest and 7 being the easiest). We then corrected further minor issues and worked with the developer to create production-ready specs and assets.  

Ongoing efforts will be to validate more concepts via A/B testing to enhance the users’ motivation of revisiting the Rewards Program. With regard towards first-time UX, we’ll also continue to validate the design through rounds of usability tests.  

![castlight-body3.jpg](https://echouser-api-media.s3.us-west-1.amazonaws.com/castlight_body3_d931621fea.jpg)


Redesigning Castlight’s Employee Rewards Program for higher user engagement and increased user retention.


User retention

EchoUser helped healthcare portal Castlight improve user engagement and retention by addressing issues with their Rewards Program and first-time user experience. By involving stakeholders and utilizing feedback, EchoUser created an effective approach for FTUX resulting in positive user responses to the Rewards Program, and ongoing efforts include validating concepts through testing.


Castlight Health

**We thrive in requirements** – A defining aspect of enterprise UX. It is not uncommon that we are brought in when progress has become confused & stalled. We regularly start projects with a thorough heuristic review – **We clarify a UX path forward.** 

- Cisco runs the second-largest e-commerce platform globally; **vital to business, but faced severe UX problems**. [We conducted a detailed heuristic assessment, comprehensive redesign, and tackled trouble areas such as error messages.](/cases/multi-phase-cisco-e-commerce-ux)

- We worked for 6 months just on a single dropdown design, for a (confidential) internet ad platform. The most UI widget dependency complexity we’ve ever seen.   

- We understand that **UX is critical for transitioning** to the cloud. [Informatica hired us to conduct a large heuristic analysis and map personas](/cases/informatica-cloud-conversion) for their cloud onboarding. 


ccw-hier.png

Harness Depth & Complexity

We have worked for over two decades on enterprise user experience. **Always with a focus on building real products.** While we utilize great visual design, a conceptual model and matching interaction design for complex products is where real experts shine. 

- **We replaced larger design firms multiple times** who pattern matched instead of problem solved, including at Qualcomm, Yodlee, and a major phone manufacturer.

- We have a long-standing partnership with a major phone manufacturer, working on multiple **large-scale UX design projects**, **global research studies**, **ideation workshops**, and **statistical user tests** from eye-tracking to watermarks.

popple.jpg

Experience, Process, and Skill 

large_rack-2.png

medium_rack-2.png

small_rack-2.png

thumbnail_rack-2.png

rack-2.png

Global companies need UX that can harness depth & complexity.


Enterprise

Vast entities, products, and systems need UX that can harness depth & complexity. 

We wield experience, process, and skill that transcends complexity to clarity.

Domains

Methods