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

Link

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.

  1. Mobile users will not be able to see the designs featured within a device; and hence viewing links on a desktop is ideal.
  2. 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.
  3. To open a incognito window: Ctrl + ⇧ + N (Windows) or ⌘ + ⇧ + N (macOS)

UI Flow: Wireframes vs. Actual – pt 3 of 3

Chessercizes Prototype

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.

Thanks for Reading!

[email protected] Next Case Study