Chessercizes
Featured Case Study
Roles
UX/UI Designer
UI Developer
Interaction Designer
Tools
Figma
Sketch
HTML
CSS
Skills
Wireframing
IA
Presenting
Prototyping
Product Design
Task-Flow Diagrams
Website
My Process
Define
Needed website designed specifically for parents to play and learn chess with their children.
Design
Made prototypes, UI flows, and Sketch app to build wireframes.
Build
Taught myself HTML, CSS, and Bootstrap to code them.
Iterate
Frequently presented designs, elicited feedback and iterated product design.
UI Flow: Wireframes vs. Actual
Interaction Design Thinking
I made the core UI flow using paper prototypes to establish priority screens. This helped by pragmatically aligning stakeholders.
UI Flow: Wireframes vs. Actual
Home Page
First I used paper prototypes. Then I procured mockup designs in Sketch. And then I coded them using HTML, CSS and Bootstrap.
UI Flow: Wireframes vs. Actual
Sign Up Page
Originally I had created a beautiful looking page in Sketch; but later I discarded it in favor of using a more basic page for the sake of efficiency.
UI Flow: Wireframes vs. Actual – pt 1 of 2
Curriculum, Game Interface, and About Us
Once again the original designs are on the left and the actual pages are on the right. I coded the final pages using HTML, CSS and Bootstrap themes.
UI Flow: Wireframes vs. Actual – pt 2 of 2
Redesign Enhancements
Eager to showcase my skillset for job-seeking purposes, I redesigned the interaction design UI flow and marked self-instructions along the side. Then I wrote 100% of the code myself from scratch.
View all redesign enchancements in: Invision. See actual coded website: here.
Viewing Instructions
Figma Troubleshooting
Some viewers experience complications when viewing the Figma links.
- Mobile users will not be able to see the designs featured within a device; and hence viewing links on a desktop is ideal.
- Desktop users: be forewarned that some adblockers may prevent images from loading. If this occurs, copy and paste the web address into an incognito window.
- To open a incognito window: Ctrl + ⇧ + N (Windows) or ⌘ + ⇧ + N (macOS)
UX & Interaction Design Planning
Chess.com Inspiration Mockup
Figma mockups of key chess.com UI flows were created for inspiration. Additionally these mockups helped with working out Figma bugs prior to building out higher fidelity chessercizes designs for efficiency purposes.
Lessons From Experience
What I Learned
Too much time upfront on wireframing. In hindsight, the wireframes were essentially very rough drafts; not intended to be replicated perfectly. The final coded deliverable was a hybrid mix between my wireframes and the available similar bootstrap templates online.
Next Time
Sometimes it’s more practical to prioritize creating designs around what’s easier to implement. Build code for wireframes sooner rather then later. This helps with isolating and organizing priorities. This allows for better usage of time for the designer and the developer.
