Finding Mango's fit in the evolving agency space

UX/UI Design for startup Mango Concept. 2018.

This was a personal initiative, one I implored with the Director of Ops and Owner to allot me the time and resources to complete. Our firm was competing against the top agencies in the world, being in the heart of New York City, and our brand and digital presence were failing us. A site that screamed outdated web practices wasn’t garnering any new leads, and was even cited as a reason some deals fell through. As the head of product, I saw the need, and so I sat to redefine our digital image.

Old-Mango-Website

The preexisiting landing page, from before my tenure. Bold, but brash, too forcefully pushing for a conversion before explaining why. 

Discover

Research and insight into the problem

In light of the bevy of pain points with our old site, it might be quicker to point out the lone strength: an abundance of explanation concerning our process and the importance of what we do. Well-written, certainly, but far from concise and further from our visitor’s eyes. The architecture of the old site held information deep within the hierarchy, and the odds of any visitor coming to face them were minuscule at best. Our visitors’ average sessions were under 45 seconds, and we needed them to see the main points, so that there would be time for the important stuff: our work.

Acknowledging these initial observations, I dove into research, pulling together lists of potential competitors, reexamining our business plan, and working to identify the trends that matched our mission. I compiled our competitors into a moodboard, and took time identifying pleasure points and their counterpart pain points. With some thoughts in mind, I moved into defining our areas for focus.

Define

Synthesis of research and identifying focus areas

Our competition had clear visual superiority, with sites that left no doubt of their capability and expertise for any of my test visitors. My goal was to determine just how that message was delivered, and clear patterns emerged: brief mission statements, minimal distance to case studies, concise copy in common language, and letting your visual work breathe. With main goals in mind, I moved on to the design stage.

mango-wireframes

Grayscale wireframes for the one-pager, desktop and mobile. I try to use close to precise copy whenever possible to be ready for the final product. 

Design

Ideation and brainstorming solutions

Being concise was one of our keys, but we had over ten pages, and close to twenty projects in our portfolio! We couldn’t keep it all, and I was leaning towards wiping the slate clean. Instead, after some insightful stakeholder conversations, I led them through defining their most essential parts, and letting me rework those parts to fit our necessity of brevity. My content was now structurally defined, and I could work towards the interface.

Out came the sketchpads, and I was off exploring potential hierarchies. The recurring theme in my research-led sketches was to get to the meat of it quickly, and so I made sure our case studies were positioned as high as possible while retaining a structure that could contextualize them to our company and its mission. After another stakeholder confirmation, I had my layout and I moved towards the final product.

mango-gradients

Playing with gradients. Giving space to breathe and express was immensely important to the mission of the design. 

Deliver

Finalizing the solution and overseeing development

Sketches became wires, and wires became specs. The ideas behind my design were then screened by my developer for any potential complications, and after review they were pushed to to redline documentation.

As a PM, and not just the designer, I oversaw development and kept us on course to deliver our proposed solution, making copy edits, designing solutions for unexpected complications, and creating some needed assets. Quality Assurance and stakeholder testing followed, and finally, we pushed it live.

Mango Website Preview 2

The final site, shown sectionally in gif form for promotional purposes. I was really pleased with how the scrolling effect turned out, especially on mobile devices. 

Retrospective

Looking back and looking ahead

My goal was to bring our web presence up to par with our competitors in a way that satisfied our stakeholders and aided our conversion. With a heartily happy response from our stakeholders, and a two-fold improvement on our digital conversions (not to mention the number of clients who mentioned the website as a sell during pitches), I can confidently say that the mission was a success. The main growing points for our team during this process revolved around the transition from design to development. I learned how to better prepare our redline documentation for responsiveness, and followed through with those improvements throughout following projects.

Mango Concept

Team credits

Designer — Zach Dorsett
Developer — Vic Lam

See the website at www.mangoconcept.com

Copyright © 2019 Zach Dorsett