the
Amplify

Responsive Web App

ROLES
UX   –   UI   –   DESIGN SYSTEM

THE CHALLENGE 

While I worked at Very, theAmplify came to us with a need for an update to their existing product called Reach. In a nutshell, Reach is a web app that allows social media influencers who represent products a way to collaborate and push out content for various, well-known brands, (such as Levi's) and benefit both monetarily and through new followers. theAmplify already had a working web app complete with a dashboard for brands, as well as a mobile app for influencers to manage their campaigns and push out content for review by the brand.

Before starting wireframes of the new platform, we conducted a full UX Audit of their current app. This included all user flows (log in/sign up, manage content, etc.), UI elements, styles, layout, and interactions.

During this audit we were able to identify UX issues relating to things like multi-nested tables with scrollers inside scrollers, tiny delete icon buttons on the ends of tables right next to other important buttons that would be easily clicked and important information would be removed, and UI issues like randomly aligned and alternating forms.

THE OUTCOME

I updated their visual language and created a new design system for their engineers to implement through UI components to make the process easier, faster, and much better to make changes and add new sections in the future. This was about a 3 week engagement and I did everything from an initial UX audit, See|Dos (what we essentially call user flows at Very), wireframes, to hi-fi designs in Sketch. When setting up the hi-fi designs in Sketch, we utilized symbols, symbol overrides, and text styles to create many responsive components that could seemlessly translate between mobile, web, and desktop.

Once the See|Dos had been completed we were able to begin wireframing from mobile first up. I started with just a few main template screens and then broke out components from those screens to be used throughout the rest of the app.

MOBILE PROTOTYPE

TRY IT OUT

DESKTOP PROTOTYPE

[unex_ce_button id="content_flhov01sw,column_content_gqy13vnzo" button_text_color="#ffffff" button_font="custom_one" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="#7ed321" button_padding="15px 30px 15px 30px" button_border_width="0px" button_border_color="#7ed321" button_border_radius="30px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#4a90e2" button_border_hover_color="#4a90e2" button_link="https://very.invisionapp.com/share/V3DXJZ5WF" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]TRY IT OUT[/ce_button]

SELECTED DESKTOP SCREENS