myStartup Workbench

A web app that streamlines the internal funding processes for client-facing offerings, referred here as “initiatives”

Background

Teams would identify client needs for which they would want to create an offering.

Think: “Running small start-ups within Accenture”

This needed leadership buy-in and funding. The process set for this was very complex and completely manual - the use of Excel, PowerPoint, Word, Email, & SharePoint lists often complicated things.

No structure or guidance, and expertise & experience lived in isolation.

I was hands-on during all stages of the product development - user research, ideation, wireframing, prototyping, and developer hand-offs.

My contribution

My Role

Design lead

Team size

3

Tools

Figma

Research

The direction from the project sponsor was to move fast and experiment.

I decided that the best course of action would be to conduct stakeholder interviews and gather as many findings as I could from the primary users involved with the manual process.

Here are some of the highlights from the process that informed our design decisions as we moved ahead:

I had to Google “business model canvas” to get a basic understanding of the concept.

This artifact was later central to the creation of the product.

Screenshot of a Google image search for "Business Model Canvas"

Team Selection

As the design lead I was responsible to put together a team that could execute this kind of a project well.

Looking at the various findings from the stakeholder interviews I put together the following team:

Great functional UX & visual design + Extrovert + Team player

Strong visual design + Differently-abled + Hard-working

Game designer turned UXer + Introvert + Unique insights

User Journey

Ideation & Wireframing

While the team was being onboarded, and as time was of the essence, I jumped right away into rapid ideation and prototyping.

Each decision was based on the findings from the stakeholder research

Research notes used as the basis for this design decision:

Based on our understanding of the business model canvas, we sketched out a basic screen which would give users an overview of all the nodes of the canvas.

We added a few more interesting things here:

Indicators on each node that cycled between ⬛ (Yet to start), 🟨 (In-progress), 🟩 (Complete), and 🟪 (Reviewed & approved)
A progress indicator below the canvas that filled as users completed details in each node
A present button on the top-right that would by used to present the canvas in fullscreen

✅ What worked

❌ What didn’t work

Detailed Wireframing + Protoyping

At this stage we were quite clear about the general direction things were heading in.

I took a decision to start using the organization’s style guide and to start fleshing out details in some of the major screens.

Creating a Design System

Once our direction was determined, we turned our attention to creating a Design System.

To move quickly and produce something tangible, we compiled a list of elements we knew the team would need, and began putting together an initial design system.

UI Design

With basic components of a design system in place, we started working on the final UI design.

During this phase, I set three guiding principles that acted like a North-star for all design decisions.

Our North-star

Simplify the breakdown of objectives
Make core functions available upfront
Minimize the number of clicks required

Clutter-free, objective-driven

Use a layered approach to support navigation
Use shadows to denote the hierarchy of elements
Reduce the number of pages needed to display information

Thinking on the Z-axis

Use colours inspired by the brand guidelines to create high contrast layouts and CTAs
Support multiple colour modes light/dark/dim for users with a preferred style of use

Distinct contrast

Hero Section Motion Design

In order to make a breath-taking first impression we decided to bank on some scroll controlled motion design.

Combined with the organization’s guidelines on using impactful photography, we were able to create something unique, yet recognizable.

Main Landing Page

We divided the landing page into clearly defined sections that provided a clear call-to-action, and at the same time educated users about the initiative, and related tools.

Extensive prototyping

We created some extremely intricate prototypes to communicate the vision to the stakeholders as well as developers who would need to build some of these complex elements.