Copyright © Julia Wang, 2019

Case Study

TechBeacon Learn

Context

2017 is a significant change for HP Enterprise software with the spin-off/merger with Micro Focus. As a part of the new online presence for HP Enterprise Software, HP aims to create a destination that provides online education to attract an audience ranging from App Delivery, Dev, QA, and PM.

Challenges
  • There were too many stakeholders and they all had different ideas.

  • We were up against a deadline. Stakeholders only gave us two months to build the site from scratch.

  • There was limited resources: one designer, one developer, one QA, and one outside agency

  • How can we leverage the existing TechBeacon traffic and audience to the new Learn initiative?

My Role

I led the design of TechBeacon Learn from the very beginning. Since there were limited resources, I was responsible for:

DESIGN SPRINT AND IDEATION

I conducted a two-day design sprint that gathered teams and stakeholders to identify goal, brainstorm, ideate, prototype, and test with users.

 

PLANNING AND SCOPING DEFINITION

I identified pages with product managers, prioritized pages and features for MVP and beyond and created requirements based on business goals and user needs.

 

WIREFRAME EXECUTION AND DESIGN OVERSIGHT

I created all the wireframes and iterated based on feedback. Due to the timeline and resources, we hired a design agency for visual design. I oversaw the design and made design updates when appropriate.

 

LEADERSHIP

Throughout the project, I presented works to gain buy-in from stakeholders. I also work with editors to make sure the design aligned with the content strategy.

Design sprint

Due to the time constraints and limited resources, I decided to conduct a two-day design sprint workshop to create faster iterations and more efficiencies in team collaborations. I adopted and modified the Google design sprint methodology for my workshop.

Design sprint process

Design sprint preparation

As a sprint master, I spent a week in preparation. My tasks included:

assembling the team, researching competitors, creating detailed sprint agenda, and booking stakeholders' time and meeting rooms.

Design sprint activities

Explain the sprint

Most sprint participants were not familiar with design sprints. To explain the purpose and the process of a design sprint, I created the following illustration.

Map

The first activity in a design sprint is to define the long-term goal and the difficult questions that must be answered as a group. Since everyone had different backgrounds and roles, everyone had different perspectives on the long-term goal. As a sprint master, my job was to find the goal that most, if not all, team members agree with. I helped the team envision the future by asking questions like, "why are we doing this project”, and "where do we want to be six months, a year, or even five years from now?" For the sprint questions, I helped the team examine their assumptions. I asked the team questions like, "to meet our long-term goal, what has to be true?"

 

The team had the following for the long-term goal and sprint questions.

 

Long-term goal: DevOps and tech professionals come to TechBeacon for structured learnings.

 

Sprint questions

  • How might we allow different personas to find info from the homepage efficiently?

  • How might we visualize the user journey and experience to the stakeholders in TechBeacon?

This photo shows the activities in a sprint which include sprint questions, map, and how might we notes.

Sketch & decide

In the sketch phase, as a sprint master, I encouraged people to be creative, talked about their ideas and facilitated the voting on their ideas. To start, I asked the participants to share good examples they found. Then, we proceeded to the crazy 8s. Crazy 8s is the time where each participant would sketch eight ideas in eight minutes. After that, I invited people to talk about their crazy 8s. Then, we had another round of solution sketch. Participants again talked about their solution sketch, and then we had a silent vote on features. Lastly, as a team, we sketched our final storyboard.

I created the above illustration to explain the sketching activities to the team.

An example of crazy 8s in the design sprint

Prototype

In the prototyping phase, as a sprint master, I emphasized to the team the "fake it" philosophy for prototyping, assigned roles to team members and helped the team decide on the right tool for prototyping. The team decided to use Google Slides for prototyping as it allowed synchronized collaborations. 

Screenshots from the prototype

Test

In the testing phase, I interviewed our target customers, asked them to complete tasks with the prototype and asked questions to understand what they think. In addition, I asked the team to make notes on interviewees' reactions.

Picture of myself monitoring the test

Learn

After the test, I asked sprint participants to share their notes. We needed a more systematic way to organize the notes. Therefore, I created the below quadrant to synthesize our findings. I was able to incorporate the findings in my next wireframe design phase.

Wireframes

Despite the constraints, I took the takeaways from the design sprint and translate them into features and user needs. Prior to the wireframes, I researched on the competitors, evaluated user flows, sketched and validated my ideas with the developer. Before presenting wireframes to stakeholders, I laid out the assumptions, constraints, and page goals. Each wireframe took several iterations, and I socialized the wireframes to get the buy-in from stakeholders.

 

The below pictures are examples of how I incorporated the takeaways from the design sprint to the wireframes.

Visual design

Due to the time and resources constraint, the visual design work was mostly done by an outside design agency. I was responsible for managing the project and ensured the visual design reflect the ideas behind the wireframes. After receiving the visual designs from the agency, I made appropriate design updates. I also reviewed the design after development.