This Project at a Glance
Background
Cambia Grove is a health care innovation hub focused on bridging the gap between entrepreneurs and the traditional health care sectors. Their old site was outdated, hard to update, and didn’t tell the story that Cambia Grove wanted.
What I Did
I led the experience design for a new responsive website including user interviews, IA, testing, wireframing, clickable prototypes, and flows that were paired with a visual design component library as part of the final deliverable for development.
After design handoff was complete, I worked with development to finesse minor interaction and development pushback. This collaborative approach helped the project stay on schedule for a Janurary 2019 launch.
Discovery Phase
To kick off the project, I interviewed stakeholders and users as well and conducted a design competitive analysis to ensure alignment and direction.
Discovery
Research Insights
Meeting with key stakeholders helped me to understand Cambia Grove’s challenges and goals. Together we aligned on expectations and constructed a shared vision for the website.
Next, I conducted user research to ensure user needs were accounted for. These are the key insights uncovered:
User types use Cambia Grove for different goals
The primary users are moderately tech-savvy senior healthcare professionals seeking information and resources, but for a variety of reasons.
- User type 1 is a healthcare leader who wants to help others tackle big healthcare problems.
- User type 2 is a startup founder who wants funding and resources for their startup
- User type 3 wants to network with their target audience
Resources are a means to an end
Users were only interested in resources that could help them achieve their goals quicker.
Events are a way to meet the right people
User interest in events was focused on who they expected they could meet at an event. Presentation topics or learning was a lower priority. This was a major shift in thinking for Cambia Grove stakeholders.
Discovery
Design Competitive Analysis
Based on the findings from stakeholder and user interviews, I analyzed multiple indirect competitors to find established patterns and ideas for a design direction. The areas of analysis were:
- Brand Storytelling – how are brands communicating their value proposition?
- Scheduling a Room – which patterns exist that we could build on?
- Resource Library – how are organizations grouping resources and allowing users to navigate within large amounts of content?
- Events / Calendar – what’s the best way to help people find and sign up for events?
Because we weren’t reinventing the wheel, spending time evaluating indirect competitors generated a lot of ideas and helped speed up design direction.
Screenshots were grouped with an InVision board which was ideal for sharing and client collaboration.
Information Architecture
The website had evolved into a confusing web of duplicate content and navigation with a lack of information or visual hierarchy. Therefore, rethinking the IA was important before design began.
Information Architecture
Content Inventory
I began by reviewing each page of the website and took an inventory of the types of content we would need to support as well as the templates we would design to ensure they would meet the needs of Cambia Grove. Outcomes of this process were:
Information Architecture
Tree Testing
Tree testing was used to validate whether our draft sitemap and information architecture and navigation made sense for users. Prior to testing, there were disagreements between the client and our recommendations. Tree testing provided data that could help bridge the gap.
The tree testing results show success and failures percentages per task
Recommendations
Based on the learnings from Tree Testing, I presented recommendations for new navigation, taxonomy, and sitemap. At first, the client did not approve some of the taxonomy suggestions despite having clear data to support recommendations. My feeling was that this was due to a fear of making drastic changes.
As the project evolved, many of the recommendations were approved and implemented. In hindsight, I believe this was because the client simply needed more time to consider my recommendations to feel comfortable making a perceived “risky” update.
Iterative Design
After gathering requirements, my approach was to explore ideas through sketching and then prototype with Sketch and InVision to learn and pivot as needed. Because of tight timelines and budget, we chose to develop medium-fidelity prototypes that could serve for testing and for creating transparency in our design process for the client. Our “what you see is what you get” approach strengthened our relationship with our client and allowed us to gain feedback and approval from them early on.
Early sketches exploring template layouts / flows
Visit us page
Room details page
Content is applied against templates to create consistency
Scaleable components are used when possible
Resource templates
Resource template filtering
Design
Learning through Testing
To help uncover and fix usability issues, I conducted multiple rounds of user testing with an InVision prototype for three priority tasks. For each round of testing I create four key documents:
- A Study Plan created alignment on goals and objectives for testing
- The Session Script for helping to stay focused during interviews
- Interview Notes organized by tasks to make analysis easy
- Findings & Recommendations for review with the client and to determine the next steps
Signing up for an Event
A priority for the redesign was to make it easy for participants to use the calendar to find and sign up for events. Testing revealed this was simple and straightforward for users, and provided a few additional insights:
- Robust event details are important to users.
- The ability to download a calendar invite was important. Due to budget this feature was not part of the launch and was put into the backlog.
- Event tags were overkill for users and were removed.
Calendar page for events
Event details page
Booking a Room
The “Visit Us” CTA in the navigation was one of the most controversial decisions for the project. Both tree testing and prototype testing showed that the label was confusing for users. Despite the clear evidence, the client felt strongly that “Visit Us” was the most appropriate label. I was surprised by the amount of weight internal language and terms carried despite clear evidence against.
With pressure to move on to the next feature, I felt comfortable moving forward because I knew that down the road it would be easy to pivot.
Submit a Resource
Prototype testing uncovered difficulty for users in completing this task due to poor taxonomy. Once participants were in the correct spot, completing the task was easy. Due to budgets/timelines recommendations were handed off to development and visual design instead of updating the final wireframes. Recommendations included:
- Adding a CTA from the “Resources” landing page
- Add a “Submit a Resource” on the drop-down navigation
- Create a clearer differentiation between “Library” and “Data Resource”, as the user did not know the difference between the two.
Testing showed that users did not know where to go based on the navigation choices
Handoff and Launch
Working closely with our developer partners throughout design meant that handoff to development required fewer annotations and screens. We provided clickable medium-fidelity prototypes with a high-fidelity component library, which worked because developers had been involved throughout the project.
After formal handoff was complete, I worked with development to finesse minor interaction and development pushback. This collaborative approach helped us stay on track and launch on time on Jan 27, 2019.