I started by finding real-world examples of account management interfaces; I researched copy choices, design trends, UI patterns, and common layouts.

I next defined the user journey and defined the touch points. This was to ensure the team collectively understood which backend systems the users interacted with and when those interactions would occur. This also helped us outline what the user could and couldn’t do in the initial MVP (minimum viable product) release, referred to internally as Phase 1.

Mobile and desktop lo-fi design explorations were next. As I designed I had to keep in mind that account management would be released on BloomNation's main marketplace as well as across hundreds of custom “premium sites” for florists; whatever solution I came up with had to work for both.

After reviewing my sketches with the team, I rendered the designs in a lo-fidelity wireframe to start fleshing out the full experience. I also built a prototype in Invision to share with the team.

View Lo-fi Prototype

One of the challenges I faced was how to incorporate account management into the premium site design framework. Premium sites all had the same HTML/CSS framework, but most heavily relied on custom CSS to modify their individual interfaces and visual designs. As a result of all of this custom CSS, I had to keep in mind that any major structure changes that I proposed would likely break across hundreds of sites—it would greatly impact the success of the release and implementation.

Using the project stakeholders’ feedback on the lo-fi prototypes to inform my decisions, I continued on to finish the high-fidelity mocks. I worked with engineering to answer any questions and ensure the project was implemented as designed.

View Hi-fi Prototype

For premium sites, I modified the existing the shopping cart area in the template and added an account dropdown link. I also instructed that we add the ability to set and use primary/secondary theme colors in premium sites. This allowed us to use CSS to make the new account management feature, as well as any future projects, feel natural no matter the premium site’s visual design.

Prior to the account management project, BloomNation’s mobile site relied on a hamburger menu for navigation. I opted to redesign the site header, using a tabbed navigation instead of hiding the navigation options.

View Hi-fi mobile Prototype

For mobile, the premium sites all use the same template. It only has color variations, so adding the account links to the existing mobile menu was an easy decision to make.

Because BloomNation did not have any design documentation, I took this opportunity to start building a design system. In order to bring visual cohesion to the BloomNation experience, I started with a style guide to define styling and usage for form fields, buttons, icons, etc.

This project allowed me to transition off of the free icon set BloomNation had been using and create icons that were modern and cohesive. I also started to transition BloomNation to using scalable images during this project, providing all assets as SVG. I designed nearly all of the assets in Account Management, with the exception being many of the occasion icons and some illustrations; some of the specific occasion icons were from an icon set and some of the illustrations were previously created for email marketing campaigns by our graphic designer.
 

View Full Icon Guide