Second Act: Design Sprint & Hackathon

 
 
home spark copy.png

Project Outline

Second Act began as a solution for working adults choosing continuing education courses that would fit into their lifestyle, budget and goals.

My research and design team did an initial design sprint to build something that could solve our user’s problem. We then worked with a development team in a hackathon to create a functional product. Our product shifted vision several times, but ultimately became better with each iteration.

 

METHODS:

2 Week Design Sprint

User Interviews

User Data Synthesis

Persona Development

Journey Mapping

Design Studio

Paper Prototyping

Wireframes

Clickable Prototyping

Usability Testing

Design Handoff

Hackathon

Agile workflow

TOOLS:

Pen & Paper

Sketch

Invision

Adobe CS

Zeplin

MY ROLE:

UX Researcher

UX Designer

UI Designer

Design TEAM:

Erin Rowland

Andrew Kao

Development Team:

Christopher Duggan

Fahad Hussain

Shaniece Crumpler

 

User Research and Synthesis

second act affinity map.png
 
 
SA balancing.png
 
 

User Insights

My team interviewed 7 people hoping to make a career change within the next 5 years.

We found that people were consistently delaying enrollment and thus delaying a career change. Factors such as price, taking time off work and the relative credibility of some programs were factors that people considered when choosing a continuing education program. They spent quite a bit of time in this phase of indecision, sometimes years.

There was usually one moment of decision that led people to make the jump.

 


 
3 criteria.png
 
 
 
 

The single most important factor in a user selecting a program and enrolling was confirmation from their social network and family that this investment was worth the time and money.

social confirmation.png
 
 

Persona Development

PJ.png
 
 

Problem

PJ is ready for a career change, but is stuck weighing all of her options. How could we create a product that would facilitate her making that jump to invest in herself and further her career?

 
 
 

Ideation, Design & Testing

My team worked together to create and test designs that would help to solve PJ’s problem. After several design iterations we developed Good Apples. The webpage, designed mobile first, was simply designed so a user would take a quiz and input a variety of factors and be delivered with a filtered results with personalized recommendations. Each recommendation also featured an ‘alumni you may know’ area to encourage users to reach out to people in their network for guidance and support.

 
initial high fidelity wireframes

initial high fidelity wireframes

 

Meeting our Developers

…and going back to the drawing board.

Once we finished our initial round of high fidelity designs, we met with the development team to create a plan for the hackathon.

We needed to work with the developers to prioritize features within the scope of the hackathon, 3 days.

MSCW Copy.png
 
 

Design Studio

The design team and the development team worked together to create a rough design for the final product based on the features that we agreed were feasible within the short time frame

 
 
SECOND ACT 3.001.png
 

Paper Prototype and Testing

My UX team tested paper prototypes of the final design created with input from the development team.

We designed a progress indicator that would fill the screen with a color or texture as the user moved through the questions, like a glass filling with water.

We found that users could navigate the quiz very easily, but the progress indicator we had designed was not very clear. In the next iteration of this design we made a more familiar progress indicator more in line with UX best practices.

SECOND ACT 3.001.png
 

Wireframe Handoff to Dev Team

Following the agile development method, my team built medium fidelity wireframes and handed them off including user flows and communicating specific elements designed for usability. The development team could begin building the back end and skeleton structure of the responsive site.

After testing and finalizing our high fidelity wireframes, we handed off the designs using Zeplin so they could finish the front end development using specific interactions and design elements.

 

Final High Fidelity Mobile Wireframes

Final Hi-FI Wireframes

Final Hi-FI Wireframes