FIRST FINANCIAL BANKING PROTOTYPE OPTIMIZATION
Solo UX Designer
FINAL PROTOTYPE EXAMPLE
Beavercreek Marketing creates animations, click-through demos, and Money IQ videos for their clients within the financial industry.
The development team found that spending their time identifying their client's user stories for their click-through demos to be time and cost-consuming.
They struggled to identify user journeys through their client's apps, especially identifying call-outs and important edge cases which resulted in them re-working these projects, minimizing their time, and costing their business money.
MEASUREMENT FOR SUCCESS
Track the development team's time through task tracking to ensure that creating new projects and re-work was cut by at least 60% when using my prototypes to create their click-through demos.
ROLES & RESPONSIBILITIES
As a solo UX Designer for Beavercreek, my job was to assist the developers to identify the user journey and edge cases of an existing app so they accurately and efficiently portray the user experience for their client's click-through demos.
Defining project goals
Understanding problem space
Forming a schedule
Weekly Feedback & Testing
UNDERSTANDING THE PROBLEM SPACE
Before I started designing, I aimed to understand what developers value to know what to focus on for my interactive prototype.
I interviewed 5 developers on the Beavercreek team and created an affinity map. These were the results:
Building it once and minimizing rework.
My job is to ensure they understand all the used and edge cases upfront.
My job is to focus on creating a frictionless UX experience
Understanding the effort involved.
My job is to communicate the value for the users or business
To organize my thoughts and process, I created a site map for myself that includes the steps and flow the developers would take through the prototype and the content those steps would include.
First Major Improvement
From Linear to Non-Linear
To keep the developer's process efficient, one of the first re-designs I made was changing the sitemap from only being accessed from 'Step One' to being available anywhere within the flow.
Second Major Improvement
A Screen Index page
To minimize the work for the development team, the second improvement I made to the prototype was to include an index icon they could click to access the screen index page.
This page includes the various screens used throughout the flow and clickable links to view the different routes the user could take from that screen to accomplish their goal.
Third Major Improvement
Adding Important Call-Outs throughout the Steps when Needed
To help minimize the work and increase efficiency for developers, I included important call-outs where their client's users could get lost in a step - thus ensuring that developers include it in their demo. While this creates more work for them, I communicated the value this adds to their client's users and they agreed to include it in their animation.
FEEDBACK & CHANGES
Designing the Meeting
Due to time constraints, I could not apply standard UX usability testing to this project. Instead, I made sure my weekly meetings with the head developer included having him walk through each prototype user flow and provide feedback.
An overview of what my meetings looked like:
Stated the goal: Reminded him what our previously agreed-upon goal was for the project
Summarized the last meeting: Briefly reminded him of the last discussion we had last time or the decisions we made together
Showed a timeline: To help create a visual of where I was in the design process
Specified on the feedback I needed: Whether it was on layout, concept, or content - I would ask and ensure I was covering all my bases.
Key Findings from Developers after using my User Journey Prototypes for Two Weeks
Based on tracking what tasks the developers were working on and for how long, Beavercreek presented me with the statistics:
Developers' time spent re-working projects were cut down by 90%
The time it took for developers to create new demos cut down by 70%