Angela Zhu MBCS
Creative Portfolio
Image Description: KeyKai, an accessible vocal synthesizer program. Interface overview introducing application layout with labels and key features.
Click the title or image to access the live prototype! You can switch scenes manually to access all the different views. Please note some features like the "Speak Response" are not available on Protopie web yet.
An interactive, high-fidelity prototype, created as an initial proof of concept. Part of a wider project on the design of an accessible singing vocal synthesis (SVS) desktop application, created for a module assignment. It was designed following accessibility guidelines and UX design standards such as WCAG 2.2 and ISO 9241; the concept was based on my existing understanding of user pain-points (such as low contrast scroll bars that are too small) and barriers informed by further research, class learnings and inspired by existing SVS interfaces.
Examples of main improvements relate to more diverse and dynamic interactions; hovering over graphical icon buttons visible focus indicators for buttons, triggers a Speak Response that dictates the label and purpose of the icon, which is particularly supportive for new users, blind/partially sighted users or users with cognitive conditions. KeyKai would offer multiple modes of input and navigation methods as well as in-app guidance and resources to enhance learnability.
Other requirements of the project were: background research, competitor analysis, a user persona, an ideate phase, a mood board, a style guide and wireframe designs to go with the high-fidelity prototype.
Elements of the prototype that are interactive include: switching event views, switching singers via search bar and vertical swiping, input fields, toggling Mute and Solo buttons on, opening an example project file through the file menu with play button activation of a sample audio file, horizontal scrolling in the track editor, opening the parameter menu in the far right and toggling the first parameter.
Concept and interface designed by myself, graphic assets sourced from or made in Canva. Made with ProtoPie.
WEB DESIGN
A preliminary mock-up homepage design for a branded online resource marketplace, designed, edited and put together myself using Photoshop and stock images, plus my own graphic icon additions excluding the premade graphic icons in the "Why Us?" section. Copywriting is also my own.
The final completed website homepage result, coded and refined by senior colleagues.
The preliminary mock-up for the Contributor information page, with a rough placeholder sketch of the final illustration graphic.
The final information page for Contributor users.
A preliminary mock-up for the Referrer information page. The stock image was later switched out for the illustration seen on the final version.
The final information page for Referrer users.
Both illustration elements made using Adobe Illustrator.
 Photoshop mock-up for a landing page, targeting audiences that want more free time to go on holidays or take part in leisure activities/hobbies. Concept, design, edit and title copy by myself, excluding company information, testimonials and stock assets. |  Photoshop mock-up for a landing page, targeting audiences focusing on single parents. Concept, design, and edit by myself, excluding company information, testimonials and stock assets. |  A mock-up design made using Photoshop for a sign-up page, targeted at busy working parents who may want to spend more time with their children. Concept, copy, design and edit by myself. |
|---|
Landing Page DESIGN
EMAIL DESIGN
 Password Reset emailFor these four email templates, the logo and footer elements were provided to me and the templates coded and designed by myself for the purpose of being sent to would-be applicants and customers. All copy written by myself. |  Application confirmation email |  Card expiration notification email |
|---|---|---|
 Order Confirmation emailExtra icons created by myself using royalty free image elements and Photoshop. |