Annah Amici

Know thy users

Grayscale kicked off this project with agile sessions that challenged assumptions on all sides, steeping ourselves in the hopes, fears, habits, and level of familiarity with technology of domestic helpers in Hong Kong. These sessions gave us a good base to build user journeys, grouping thoughts, actions, emotions, and information needs in the process from first considering a loan to disbursement and repayment.

Prototyping

The team's experience working with domestic helpers was very helpful in preparing for the next phase of testing prototypes on the street. My clickable Figma prototype went through multiple rounds of simplification, as many assumptions about interface design us Westerners take for granted were challenged.

Design system

As development began in earnest, I was responsible for the development of a design system to govern the app and related digital products, such as back-office tools for Good Financial staff and the Good Cash website. The design was kept deliberately simple—minimal use of colour, large font sizes, and single-function screens—to ensure it could be easily understood by all users.

Other collaterals

I was also employed on an ad-hoc basis for the production of other digital and printed collateral, such as physical & social media promotional campaigns, app store graphics, and a pitch deck for the founder's continued fundraising.

Blueprinting structural integrity

After a lengthy discussion with the board and analyses of similar academic organisations, we determined that a full overhaul of the site structure would significantly improve navigation. Specific points of focus included: drawing a clear distinction between organisation updates and hosted events (preventing double-posting) and providing a better overview of SHKS's published materials.

Collaboratively-built information architecture

A great client relationship even meant that we could hash out many of those issues directly in the comments of the information architecture document!

Branding on a budget

While project budget limited the amount of time we could spend on proper branding, thankfully the board already had a very good idea of their position, approach, identity, and image in relation to their peers in the space. Combined with the results of the always-fun Brand Deck exercise, I crafted the following statements to inform the visual design.

• Branding: SHKS is open and approachable to all with an interest in the field and shows interest in a wide variety of projects.
• Approach: Work is approached rigorously, scientifically, and rationally.
• Image: SHKS projects an image of trustworthiness, despite the relative newness of the field. The presentation should be dynamic and progressive, without being overly-modern.
• Identity: SHKS’s identity should convey professionalism within a scholarly and analytical context.

Simple stylings

After deliberation with the board, we decided to pursue a visual style leaning more modern and scientific than traditional and scholarly. A light and cool colour palette, accented with pops of bright orange and blue, gives centre stage to the text, which balances academia and modernity within the IBM Plex family's serifs and sans serifs.

Componentise all the things!

Styles, components, and templates form the core of most every project I work on, and SHKS was no different. While the site's content was not all that deep, it was dense, and I opted for a 4-point grid to keep layouts compact and consistent, re-using components wherever possible to cut down on our developer's workload.

Conference collaterals

As the society's annual conference was due to take place during the development of the website, I agreed to expand the project scope to include production of a poster and pdf guide for the conference. While remaining generally within the web styleguide, I brainstormed different ways to represent the theme of the conference before settling with the board on a venn diagram connecting local issues in the city to the rest of Asia and the world, with the stereotypical glittering skyline caught shakily in the middle.

A new corporate identity

My initial responsibility with Silverhorn was for a website redesign, which encompassed the development of a completely new corporate identity. To help the company stand out in a sea of fintech companies and much larger investment corporations, I decided early to go all-in on a dark theme with pops of bright blue in the graphics and custom iconography. Existing aerial photos of the Swiss alps, adjusted to fit the new colour scheme, continue to feature prominently.

Site redesign

The corporate site, as well as an independent product site, required massive time input to first comprehend the intricacies of their business, and then to figure out the best way to convey those complexities to their clients. I spent many a meeting together with the client at the whiteboard or sketching on paper to distil their processes down to the core and translate that to copy, graphics, page layout, and site structure.

2D and 3D graphics

In a few areas of the sites, I designed static and animated 2D & 3D graphics to explain in detail an investment process or graphically communicate a core concept. These graphics came to be though the standard process of animation: iterating on sketched storyboards with the client, blocking out a quick animation to confirm the concept, then adjusting timing and applying colour & texture, and finally compressing and exporting them for display on the site.

Further design and training

Slowly establishing ourself as Silverhorn's design partner, my responsibilities expanded to include taking care of ad-hoc design tasks and the production of documents, reports, and presentations for use internally or to send out to their own clients. Due to later budgetary constraints, I even ended up training their marketing associate in Figma and InDesign, allowing him to take over simple design tasks in-house.

On-site research

It's always a good client that sees the value of user research. To begin the project, Lanson Place arranged for Grayscale to visit their three locations in Hong Kong and organised over-the-phone interviews with staff and guests at their locations elsewhere in Asia. From these, I learned not only what guests expect from the site, but also how internal staff use the site.

Laying out a system

Despite a final output of 12 sites, in reality only 2 full site designs were needed—one corporate and one property. And since we proposed a design system, the property site designs generally followed the corporate site designs, further reducing the amount of unique screens I needed to design.

Expanding the brand

I worked alongside branding agency Eight to translate Lanson's new look into a cohesive digital design system. From Eight's initial concepts, I expanded upon the design language to produce a complete digital system, incorporating small but important tweaks like upping text contrast to conform to WCAG standards to the creation of a full icon set for the properties.

Ongoing adaptation and content input

This project is still ongoing, as we constantly adapt and tweak our design system to fit the steady stream of incoming content from the different properties. Additionally, in the interest of accessibility, I developed guidelines for the best ways of compressing the photos and images for the site—I developed guidelines for the brand agency to compress the floorplans and photography before uploading them to the CMS.

Seeing what we have to work with

To provide a base for our designs, we performed in-person and over-the-phone user interviews with staff across Asia. In addition to allowing us to develop a detailed information architecture and in-depth user flows, these interviews also gave us a good look at the state of thyssenkrupp's presentations across their different markets, some of whose quality even came as a surprise to the marketing team in Hong Kong!

Working closely with developers

At every stage of design, from most basic wireframes to final visuals, I collaborated closely with and presented jointly with our development partner. While I worked in Figma to produce the core screens, they built out the entirety of the app in Balsamiq. This dual-design tool process allowed us to identify issues on both a micro/interaction level and also on a macro/logic level.

Discovering a lack of brand

Though a very established name in its field, thyssenkrupp's internal design consistency was severely lacking. This was only complicated by the fact that, midway through this project, thyssenkrupp Elevator was split off from the mother company, eventually becoming TKE (fortunately, we would later work on a design system for TKE)! At the time, though, I needed to analyse a wide array of existing tools and outputs to distill thyssenkrupp's digital branding and develop a visual design for the internal tool, as well as for the brochures and presentations it produced.

Content analysis

In order for this tool to really replace salespeople's current workflow, thyssenkrupp needed to map and analyse their existing content to identify any gaps in their photography and copywriting. I worked with our content strategist to look at brochures and presentations across all markets and summarise the results in an Airtable. For the final output, I produced and presented a keynote presentation on everything they needed to update, replace, or create in order to properly launch this new tool.

User research

Before beginning our redesign, I worked with another designer to conduct focus group sessions and one-on-one interviews with students and staff. Feedback from these sessions informed the rest of the design process and even helped to identify a previously overlooked stakeholder category: non-English speaking parents of undergrads.

Information architecture

With multiple stakeholders at different levels within the university, my process for structuring the content was more in-depth than usual. To show hierarchy, connections, and elements shared between all of the constituent sites, I laid out the structure visually, which also let the project team print out and mark up these documents during our frequent check-ins.

Visual design

While the school had an existing brand book, it contained no up-to-date digital guidelines. I initially proposed a look influenced by the colour and structure of the logo, incorporating rounded corners and rich purples into the design, as well as a system of graphics to help differentiate the different programmes. However, in order to reach consensus among stakeholders, the design needed to shift a bit more traditional, and we ended up using existing graphics from their printed material for the programme cards.

Pattern library

With a five sites initially designed under the same style, I naturally worked with our developer to create a live pattern library that has since informed the development of further sites commissioned by the Business School.