AWS & Accenture

Shared Repository

A personalized repository of shared AWS (Amazon Web Services) & Accenture resources.
Scope
Build a prototype for Phase 1 of the project and plan for the next phases.


‍

‍
‍
Role on team
Defining scope
Visual Design
UX Design
‍
‍
Design Team
1 Design Lead
2 UX/UI Designers (Me)
‍
Duration
8 weeks
‍
Tools
‍Figma
Figjam
‍
Background

Accenture has a joint partnership with AWS called AABG. They work together to help clients find solutions using AWS.

Users

AWS and Accenture employees whose job roles range from Account Leadership and Offering Development to Sales and Delivery.

Problem

How can all team members, current and new, easily find AABG assets in one place rather than across multiple channels?

Solution

Curate all pertinent information and assets within the AABG Showcase, enabling team members to quickly locate what they need.

Final Designs
Home Page

Phase 1 of the AABG Showcase features all primary content on the home page and access to the Asset Library.

Jump links allow users to navigate to each section of the home page effortlessly.

The sections include the top banner, recommended assets, success stories, leadership, and branding.

Top Banner

When users land on the home page, the top banner sets the tone for the site. The background image of the top banner transforms when a user clicks through the carousel. This feature catches the user's attention to the featured content.

The top banner includes:
1. Access to the Asset Library page and sign-out button
2. A welcome message
3. A carousel with featured content
4. Links to access frequently needed content

Recommended Assets

Whenever users revisit the page, they will discover fresh recommendations based on their onboarding quiz responses.

Users have the freedom to change their preferences whenever they like, allowing them to adjust the industries and technologies they are interested. These changes are reflected in the assets that are recommended to them.

Success Stories

This section highlights top customer success stories. When selling AWS to a client the users can utilize these success stories to paint a picture.

Users can click a card to read the full story or view all success stories to find one that is relevant to their client.

Leadership

This Leadership section features the main leaders in the AABG partnership.

In future phases, this section will be expanded to include all team leaders in the group. Users will be able to find an expert in the area they are interested in.

Branding

Users can download branding assets to make sure the materials they produce are consistent with the AABG brand.

Final Designs
Asset Library

All assets that are created by the AABG team (Accenture and AWS employees) can be found in the Asset Library.

Having a central place for assets enhances productivity, reduces confusion, and improves collaboration across teams by providing easy access to necessary resources.

Finding assets

Users have multiple ways to find an asset:
1. Searching directly for an asset in the search bar at the top.
2. Using the filters on the side panel to narrow down assets.
3. Select the "favorites" button to view only assets they favorited.


4. On the default view, before filters are applied, assets are grouped by type such as Stage 0 Decks and Success Stories. The assets shown are based on what the user has indicated they are interested in.

Asset preview

When a user selects an asset they are brought to the asset preview page.

The hierarchy of content makes it simple for the user to scan the page for the information they need.

The focal point is the content preview window where users can click through to review the asset.

The most relevant information is next to the content preview window: Name, date, description, size, number of views & downloads, and download and favorite buttons.

On the lower part of the page is additional information the user may be interested in: the contacts for this asset and related assets.

Final Designs
Personalization

The onboarding quiz and "update preferences" modal allow the site to provide personalized content that users will find relevant.

Onboarding Quiz

To curate content that is relevant to the user, there are 3 simple questions the user is asked.

1. What is your primary role?
2. What are your industries of interest?
3. What topics are you interested in?
‍

Understanding the user helps the site in 2 main ways:

1. Providing recommended content.
2. Tracking user interest to guide content making.

Update Your Preferences modal

Users have the autonomy to refine the content they are recommended by updating their preferences. The "update preferences" button is found in the "Top Picks" section.

Project Process
Information Architecture
Creating Blockframes

I created a set of blockframes: The first to illustrate what we heard from the client and the second to propose our streamlined version.

Blockframe based on the initial requirements for Phase 1.

Blockframe for proposed simplified two page design.

Visualizing the requirements

Dividing the requirements into phases posed a challenge for the client in understanding the site's direction. Rather than using a text-based diagram, we chose a blockframe approach. This method visually presents the requirements in an easy-to-understand way.

Client Management
Homepage Workshop

I created a workshop with the client to prioritize the features on the homepage to make sure it was feasible for the MVP.

Learning Moment

When working with a client who is pushing a tight timeline but expects the original outcome, it is extremely important to have clear documentation on what has been agreed upon. Rather than just talking through the prioritized features we could all refer to a visual that we built together.

Design & Dev Estimation
Phase Planning & Estimations

I created a framework for the design and dev leads to see what features were in each Epic and Phase of the project. Based on the hours the cards are marked green, yellow, and red.

Workflow Musing

This format helped the team and client negotiate how many features could feasibly be design and developed in each phase. It was rewarding using my design skills to problem solve how to help get everyone on the same page.

Visual Design
Visual Design Process

Once the designs were completed and approved for each of the 7 Epics, I uploaded the screens to Zeplin and created screen flow diagrams to handoff to the developers on the team. At the beginning of each development sprint I would walk the developers through each screen in the Epic and answer any questions.

Iteration 1: Visual style based on the current branding elements the team was already using.

Iteration 2: Evolving the style based on the feedback of "make it look more futuristic and innovative" while matching the current style.

Iteration 3: Exploration of making the design more "futuristic and innovative"

Iteration 4: Exploration of making the design more "futuristic and innovative". Closest to the final visual design.

Workflow Musing

Using Figma for this project would have made the design hand-off process smoother. At the time, I created the designs in Sketch and synced it with Zeplin with every update. Using Miro I imported pngs of the screens and created the screen flows.

Keep exploring

TD Bank

Self-Serve Banking

A payment assistance portal to help customers self-serve their delinquent accounts.
View project

Jackie Koon   --   Product Designer    --   Résumé