Objective

A new client has asked you to build a note-taking app à la “less, but better.” This client has not worked with a UI designer before, so they haven’t prepared any of the information you normally receive regarding UX deliverables, and since the request is urgent, you’ll need to work within this constraint. The client has requested that you deliver high-fidelity wireframes for 5 screens so they can pitch the concept to their investors. They expect your wireframes to be shaped by functionalism, meaning they are clean, simple, and that you design with “less is more” in mind.

Accessibility

To ensure the app is accessible, both in content and functionality, I used the plugin Stark to check that all color contrast ratings are a minimum of AA, designed touchpoints on mobile screens to be a minimum of 40px by 40px, and included the option to create audio notes.

Tools

Figma, Adobe Illustrator

ROLE

UI Designer

Objective

Design a messenger app that reuses common components. Before diving into the design, set up a UI kit in Figma containing all the type styles and UI elements. The app should include the following screens:

• Primary screen: contains all conversation threads, similar to the screen you see when you open the Facebook Messenger app.

• Conversation screen: this screen should include the keyboard and all the different buttons/icons that let you send different kinds of content (i.e., images, gifs, emojis, voice notes, money, etc.).

• Contacts screen

Accessibility

To ensure the app is accessible, both in content and functionality, I used the plugin Stark to check that all color contrast ratings are a minimum of AA, designed touchpoints on mobile screens to be a minimum of 40px by 40px, and included a voice-to-text feature.

Tools

Figma, Adobe Illustrator

ROLE

UI Designer