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 were limited resources: one designer, one developer, one QA, and one outside agency
-
How can we leverage the existing TechBeacon traffic and audience for 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 goals, 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 them 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 is aligned with the content strategy.
Design sprint
Due to the time constraints and limited resources, I conducted 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 agreed 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 sprint activities, including sprint questions, a map, and a how-might-we note.
Sketch & decide
In the sketch phase, as a sprint master, I encouraged people to be creative, talked about their ideas, and facilitated voting on them. 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 sketches. 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 group 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 their thoughts. In addition, I asked the team to make notes on the 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 translated them into features and user needs. Before the wireframes, I researched the competitors, evaluated user flows, sketched, and validated my ideas with engineers. 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 buy-in from stakeholders.
The pictures below exemplify how I incorporated the takeaways from the design sprint into the wireframes.
Visual design
Due to time and resources constraint, the visual design work was done mainly by an outside design agency. I was responsible for managing the project and ensuring the visual design reflected the wireframes' ideas. After receiving the visual designs from the agency, I made appropriate design updates. I also reviewed the design after development.
