MyWordList UX, UI, Branding

Posted 28th August 2017, in UI / Visual

In progress. Collaborating with my brother Andrew Stelmach (developer), I learnt Sketch App, creating a full design system and symbol library, accounting for all Bootstrap 4 breakpoints, typography and UI components. I also created the logo, branding and copy. As well as the visual UI design, I created flow charts with lucidchart and user stories, managed on a Waffle board. Designs shared with InVision and Zeplin.

MyWordList screenshots

Involvement:

  • UX Design
  • UI Design
  • Branding, Logo Design
  • Copywriting
  • Full range of Bootstrap 4 breakpoints

Branding

MyWordList logo

The blue and green communicate trust, stability and calm. These are the feelings I want users to experience whilst using the application. They should trust the brand and feel calm while using the system and learning a language.

The font communicates simplicity and stability, strength. The symbol offsets this with a friendly and modern twist, with the symbol making the brand more ownable; recognisable and memorable. The symbol echoes the “M”, “W” and “List” in a handwritten form.

I established a symbol library in Sketch App, design system and guide.

Sketch Symbol Library (in progress)

This is based on Bootstrap 4 and then customised. The system took into account, responsive font sizes with rems. It accounts for different button states with nested symbols.

Sketch symbol library

Sketch Style, Design System (in progress)

sketch style guide

Responsive Designs

Designs were created at all standard Bootstrap 4 breakpoints

Large screen

Different states

Different states for form sign up, reset password etc. Currently around 21 artboards.

Example states

Flow Charts

Flow charts created with lucidchart

Flow chart

User Stories

User stories and tasks managed via Waffle.

Waffle kanban example

Conclusion

During the project I learned how to use Sketch App; create symbol libraries; living Sketch design system; emulating Bootstrap; extended responsive design skill; used Waffle board, lucidchart and Zeplin for the first time. I also experimented with making a clickable prototype with InVision. I have created many complex prototypes with Axure RP before, so learning all these new tools and methods was a great experience. As well as enjoying the UI,UX design work itself, collaborating with my developer brother Andrew Stelmach. Zeplin and InVision links can be provided on request.