NuNi

web.design
nunintroscreen

Prioritizing Growth

NuNi, a pragmatic take on website builders. Inspired by humans, NuNi is designed to be an extension, every bit intentional. Built to reduce any fragmentation, NuNi is fundamentally responsive to growth, adaptable to most scenarios. 

summary | credit

hand-img

current standards

Appropriate today. Ineffective tomorrow. Most web-design tools offer features to help create an online presence. However, what happens when such people decide to grow and scale their presence? The answer is typically fragmentation. Most people end up using multiple platforms for the same purpose, but these platforms don’t work in harmony.

person-quote.img_

Experimenting

Misused methods.
Popular Interface schemes like paging, tabbing, menus and in-app integrations that attempt to address fragmentation mostly introduce discontinuity between content.

heir-menu.img_
disclose-menu.img_

repercussions

Alotta unforgiving depatures.
Particularly at Mailchimp, the amount of fragmentation detected directly caused an increase in churn rates. This issue is later highlighted in the new company initiative, which aims to move from solely email marketing to an all-in-one marketing platform.

mail-functions.img_
crying-red-man

embracing growth

Distinctively connected, by design. In this project, I introduce the notion of Layering, an architectural spatial-metaphor, as a tool to design against fragmentation. I do so by highlighting the process by which the Mailchimp website builder (NuNi) was conceived.

sketching-unstudio
layers.nuni_.img_

by definition

I define Layering as an operation that constructs a three-dimensional space by overlapping spatial layers. Naturally, this suggests a relation between defined layers, allowing users to work at, and move between, focused and contextual bits of information.

metaphor-archi.set_

adopting methods

In replicating the effectiveness of Layering to help create a well integrated website experience, we find that there are three critical applications; the first utlizes layering as a dimensioning tool, the next as a navigation pattern and the final adopts the principle of perspective to create an editing mechanism.

layering as a dimensioning tool

Distinctly pronounced objectives.

This operation directly establishes what functions and value the product intends to provide, what relationships exist between all functions and any given priorities that may be relevant. The aim of this operation is to determine associated tasks. Each primary task is subsequently defined as a layer.

sidebar-img
research.img_

In this process, it becomes evident a website is no longer the center of a company’s world online. It exists along with social media activities, email-lists and other audience engagement tools. This belief, changes everything that pertains to website creation.

nuni-green-hero-nuni

layering as a navigation tool

Gliding Through Steps.

To illustrate relationships between features, we rely primarily on moving between focused and contextual views. Consequently, we are able to develop spatial relations within interface components, inevitably building a sense of familiarity, direction and orientation. 

choosing the appropriate interface rendering scheme

“An overview+detail interface design is characterized by the simultaneous display of both an overview and detailed view of an information space, each in a distinct presentation space. Google/Apple Maps, is a canonical example of an overview+detail interface. Due to the physical separation of the two views, users interact with the views separately, although actions in one are often immediately reflected in the other. “

ANDY COCKBURN
A review of overview+detail, zooming, and focus+context interfaces

keynote-overview-.img_
mapz-overview.img_
angles-img

Illustrating spatial relations between layers

“The second basic category of interface supporting content is based on zooming, which involves a temporal separation between views; users magnify (zoom in to focus) or demagnify (zoom out for context) a dataset in place rather than seeing both views simultaneously. When an overview + detail scheme is paired with zooming, it is known to help users assimilate the relationship between pre-and post-zoom states."

ANDY COCKBURN
A review of overview+detail, zooming, and focus+context interfaces

layering as a design tool

Editing, Layer by Layer.

Altering default pages to illustrate an idea is rather similar to solving a puzzle. There are components available, likey not arranged as desired. To be effective, you’d want to start with the edges; finding the corners, working through from the outside in. As such we begin the editing process by showcasing the page outline before indepth editing occurs

sde.img-2
sde.img_

recap

By proposing Layering as a design-operational tool, this project attempts to solve for typically fragmented workflows that produce disconnected experiences leading to increased churn. I visually outline a set of operations that effectively organize interface elements to create fluid experiences. 

2x-win

As a brand new startup, we used Mailchimp's website builder to get our story and business online quickly and easily. This intuitive builder makes trying out new ideas and adding updates straightforward and uncomplicated.”

Dr. Julie Durnan
Founder of The Ginger Agency

COPYRIGHT 2021 OLUWASEYI AMOLE DESIGNS