Art of War App
-
Introduction
Brief: Turn Sun Tzu’s Art of War into an interactive mobile app for modern users.
Challenge: Make 2500-year-old strategy approachable, visual, and practical.
Goals: Blend ancient wisdom with engaging, hands-on learning.
-
Discovery Phase
Stakeholder interviews: Faculty and classmates weighed in on the concept.
Business requirements: Educational, modern, and easy to use.
User needs: Quick lessons, relatable examples, and a casual, not stuffy, vibe.
-
Problem Framing
Problem: Most users find classic texts boring or confusing—especially on mobile.
Success: Users finish a lesson and feel ready to apply what they learned.
Constraints: Solo project, limited dev resources, must work for non-academic users.
-
User Research
User interviews: Strategy fans and casual learners shared what makes learning stick.
Competitive analysis: Most “classic” apps are either dry e-books or too gamified.
Market research: Visuals, practical examples, and interaction drive engagement.
-
Synthesis
Personas: The “Busy Learner,” “Curious Strategist,” and “Practical Professional.”
Journey mapping: From app open to completing a lesson and using a principle IRL.
Key insights: Users want a clean UI, bite-sized content, and actionable takeaways.
-
Solution Development
Info architecture: Split content into lessons, examples, and exercises.
Wireframes & prototypes: Sketched flows on paper and iPad; iterated on navigation and card layouts.
Visual design: Clean, modern, and a little playful—kept the focus on content, not decoration.
-
Testing
Usability testing: Ran quick sessions with peers and mentors.
User feedback: Simplified navigation, added more practical examples, and balanced the tone.
Iterations: Refined microcopy, tweaked illustrations, and polished layouts for clarity.
-
Implementation
Handoff: Built final mockups and assets for dev handoff.
Dev collab: Solo build, so iteration was fast—pixel perfection was the rule.
Go-to-market: Released as a portfolio project, shared with peers and faculty.
-
Results & Impact
Metrics: High lesson completion, positive peer feedback, and strong portfolio addition.
User adoption: Users said it helped them actually use Art of War principles.
Business impact: Showcased as a feature project in my UX portfolio.
Lessons learned: Modern design + classic wisdom = sticky learning. Keep it practical, visual, and approachable.
The concept for The Art of War App lingered persistently in my mind, stemming from the requirement of an end-of-year project during my Masters program at Dublin Institute of Technology.
The app aimed to present Sun Tzu's ancient strategic principles in a dynamic and accessible manner through an interactive mobile platform.
The idea involved a unique approach of translating the intricate 2500-year-old Chinese poetry into contemporary teachings, utilizing modern educational tools such as practical examples, engaging illustrations, and interactive exercises to help users comprehend and apply the time-tested wisdom extolled in The Art of War.
I prioritize sketching at the onset of every project, and this was no different for the Redesign of the App. Extending considerable effort, I meticulously crafted the app's interface using the traditional yet reliable tools of pencil and paper alongside the digital capabilities of the 53 Paper app.
This method allowed me the freedom to explore myriad design flows and interaction options with great ease, enabling me to refine ideas until only the most effective ones remained.
I aimed for a design that struck a balance between a clean aesthetic and a casual feel, steering clear of both overly serious and excessively playful tones. It was crucial for the app's interface to complement rather than overshadow the book's content.
As a designer, I frequently encounter situations where compromises are inevitable during product development. There are instances where engineers integrate features sans design, or where designs are realized but lack thorough refinement. Given my ownership of this app, I prioritized achieving pixel-perfection in all implementations.
