SPENDO

learning - Product Design with Sketch App

Goal To complete an in-depth practical course on Sketch App to enhance my process of creating clean and professional digital experiences (apps, web, systems).

Online course link https://www.udemy.com/sketchdesign/

INTRODUCTION

I wanted to take up an expert level UI design course to enhance my visual design skills and I found this gem on Udemy. It taught me the importance of creating and managing a design system/library. This was a hands-on course with plenty of expert techniques which helps create a professional digital experience efficiently.

The goal of the course was to create a simple web and mobile app ‘Spendo’ using Sketch App. It was a practical learning experience from the initial idea, through research and mock ups, to wire-framing, to prototyping, design and, finally, the deployment of assets to developers.

BUSINESS IDEA

One of the most common problems we encounter in any company is expense management, especially at startups. Some of the common problems with managing expenses are:

So this idea is to change the way we manage corporate expenses by using a virtual card and automate company expenses. We created a mobile app for employees to view track and manage their expenses. A dashboard for the expense team to monitor and analyze each teams spending activity. Lastly, a website for the company to sell their expense management app.

STYLEGUIDE

Like any project, in this course, we started with setting up a style guide: Defining the voice and tone of the content we create so that it accurately represents the brand of the company. We set up an initial set of guidelines for the brand colors and text, and would continuously update it as necessary.

LOGO Design and Iconography

Created a logo graphic to represent our brand. Started with the ‘S’ in spendo and took some inspiration from a lightening bolt to come up with the final logo. Created different versions to suit different backgrounds.

Designed graphic elements or icons to provide a visual key for users to know what actions are possible. They are easy to see and understand, while providing a way for users to interact with the app.

WIREFRAMES

Low fidelity wireframes to showcase the flow of the app.

PROTOTYPE

Simple and minimalistic UI design for the Spendo mobile application. Followed the style guide for colors and text. Leveraged the icons created in the beginning of the process to communicate the functionality to the users. Created symbols for all the reusable UI components such as menu and expense items to maintain consistency.

EXPENSE DASHBOARD

Designed a dashboard for the expense team to view all the expense activities within the company. Each of these expense transactions are categorized by team along with information about the spender and amount. Each item is actionable which are depicted using the icons created in the beginning to maintain consistency.

Marketing website

Designed a marketing website for the ‘Spendo’ company to represent their business. It allows new businesses to check out their business idea and sign up easily. The website showcases the benefits of automated expense reporting, flexibility that comes with using a virtual card, and highlights the positive feedback from customers using their application.

TAKEAWAYS

By the end of this course, I was proficient with using the Sketch App for visual design. Mastered the process of creating and maintaining a style guide and creating symbols for consistency and efficiency. Discovered various plug-ins for Sketch and leveraged platforms like Invision to create interactive prototypes.