This phase was about learning the product, interviewing stakeholders, customers as well as internal product customer management team in regard to a 15-year history of the product.
Current existing major screens:
Activities:
Create Customer Journey maps
Review current user surveys and recorded wish lists
Creating Personas
Use Cases
Conceptual Wires
After reviewing previous documentation, I’ve met with key stakeholders individually to gather each of their business requirements and gained insights into the current friction points. At this point, I’ve clearly documented project goals, objectives, and restrictions. I’ve begun a few deliverables that lead to a more complete, clear picture of project vision and strategy.
Activities:
Document interviews, and other findings.
Project Brief
UX Strategy
Roadmap
Confluence Product requirements
Most of the work in both Phases 3 and 4 (structure and design) happens within learning loops of 5 steps. These are Empathize, Define, Ideate, Prototype, and Test.
We started by breaking up the platform into large epics that could be explored separately. Each epic would go through multiple loops each being pushed through all the way to User Testing a clickable prototype.
Activities:
Wireframing main screens
Mobile first explorations of certain epics
Creating user flows
Medium fidelity prototyping
Setting up usability sessions and testing flows with users
Library Epic (UX loop D) Presentation
Throughout the process we’ve been readjusting the strategy based on what we were understanding would be first Epics to be worked on by engeneering. We started breaking up platform into large epics that would be explored separately. Each epic would go through multiple loops being pushed through all the way to User Testing.
Here I show a single epic’s few loops to demonstrate process.
Uploader Epic (UX loop A)
Uploader Epic (UX loop C)
Uploader Epic (UX loop H)
This stage is really a continuation of the same learning loops but here are some epics transitioning to High Fidelity prototyping. But first, we created mood boards collecting various assets across the web from agencies and Pinterest boards into the InVision environment to indicate the visual direction we want to take, and also examine some modern patterns solving the same issues. So this phase includes:
Moodboard exploration
UI patterns exploration
Responsive design explorations
Exploring UI redesign in stages
High fidelity prototyping
Usability sessions
Here I'd like to finish with an example of the above Epic continued in the Visual Design phase:
Uploader Epic (UI loop B)
Here are some permutations within one of the most used screens within Library Epic.
Here are sample prototype screens we’ve used to gather key insights in high fidelity.
From top to bottom starting with first image on the left 768x1024, 1024x768, 1440x900, 1920x1200, and 2560x1440