Mango Concept is a dedicated to app and website development through research, UI design, and business strategies. As of 2017, the company decided to focus business efforts primarily on monthly website management services. They were eager to update their company website to reflect their goals and business while also highlighting more recent works.

Together with my team, a proposal for an improved user experience was employed as part of a UX class project during the 2017 spring semester.

The Problem

After taking a look at the website itself, my team and I determined that Mango Concept’s interface had contained a myriad of issues:

  1. The homepage was comprised of an unresponsive background video that disappeared a second after the page loaded.
  2. The homepage also lacked branding and sufficient information about the company.
  3. A severely unnecessary, oversized footer made for an unpleasant visual experience.
  4. The navigation bar was confusing for the two following reasons: (1) The “Learn” link did not lead to an “About” page, but instead led to a page sponsoring a General Assembly course taught by the company; (2) The phone number was an unpleasant sight.
  5. “Products” and “Our Work” navigation links seemed to be the same thing. Wouldn’t the company’s products be classified as their work?

And these were just the issues we noticed before beginning our user research.

Humongous. A footer like that needs its own page.

Just how can a digital agency attract new customers with a glitchy, visually unappealing site? In order to find solutions to such problems, my team and I devised the following goals…

Project Goals

  1. Discover issues experienced on the user’s end of the interaction via testing.
  2. Showcase client’s work in a visually pleasing manner.
  3. Design an interface which reflected the company’s spirit.
  4. Propose solutions and validate their existence.

Mango Concept’s target market included company owners, managers, CEOs, startups, new businesses, old businesses… essentially anyone in the position of seeking aid from a digital agency.

Research Process

Before we could begin brainstorming ways to satisfy the user’s wants, we had to understand how they interact with and feel about Mango Concept’s interface.

After conducting tests with people between the ages of 20 – 43, we discovered the following underlying issues:

Main Takeaways

  1. 4/10 tested felt displeased that a fee was the only thing to welcome them to the site.
  2. 7/10 were not happy that the four sub-links under the navigation bar’s “Services” link weren’t combined into one page. Page divisions forced them to navigate through extra steps when seeking more information about what the company had to offer.
  3. 10/10 described their overall experience as static and unsatisfied.
  4. 9/10 found the “Learn” link title in the navbar confusing for the same reason my team did, as previously mentioned in the “Problem” section.

Taking note of what users regarded problematic, we formulated specific pain points and solutions.

Pain Points

Lack of user interest = Bad for business

  1. Uninviting atmosphere. Concentrating on colors, typography, images, grids, animations, a seamless user flow, and becoming empathetic to the audience provided grounds to properly design for, not only the current market, but potential ones as well. Rounds of testing made it clear people lost interest in the brand and what it had to offer post-viewing the website’s appearance. This included ditching the glitchy video on the homepage.
A screenshot of the homepage with its missing background.

2. Confusing links and user flows. Focusing on the specificity of titles (such as the “Learn” link in the navigation) and remodeling the user flow would greatly decrease confusion, thus enabling positive user experiences.

3. Bombarding users. Removing the fee and signup on the homepage would eliminate its money-hungry tone as current perception of the brand was that it was desperate for consumers to enroll into its services.

The general perception should be that the consumer is seeking out — and in need of — the service, not the other way around.

Design Process

Time to get our hands dirty.

1. Ideate

Breaking down the user, their role, and what they want/need out of Mango Concept enabled us to empathize with our audience. Based off our guerilla interviews, we created two key user and job stories to do so.

User Story

Getting to know our users & their roles.

Put yourself in the user’s shoes and it will bring you closer to satisfying their needs. Recognizing their goals and what they hope to get out of it helped my team distinguish the complexity of the users, as well as what features they would need in order to have a beneficial experience with the site.

Job Stories

Story #1: Within the first story, the user feels trust as a major qualification when working with others. Delivering a site that not only functions and displays the company’s abilities, but also speaks to the user’s wants would help build this trust. Going forward, our plan included incorporating vibrant action words into the home page as a way of speaking directly to everyone entering the site.

Story #2: The second story belongs to a user with a busy schedule due to his or her position as a business owner. According to their motivation, they would not appreciate the many steps of Mango Concept’s “Services” link’s current setup. To solve this issue, we condensed the user flow.

Formulating User Personas

Restructuring the User Flow

With this relayout, users would now be able to see the services Mango Concept offers on one page. To see the categories that once occupied separate pages, all they would have to do is click the category and the page would automatically scroll down to the selected information.

Now that we are clear on the user flow, let’s get down to business.

2. Build

We began putting our ideas to the test via paper and digital styles. Sure it’s one thing to brainstorm and write down what you’ll do, but it’s another thing to see your ideas in form.


Sketching allowed us the freedom to explore layouts, forego them, and then try new ones. It was the stage of experimentation.


The wireframing process helped clean our designs and prepare them for the user testing phase.

We renamed the “Our Work” page as “Products”. On this page, we opted for a grid to display all of Mango Concept’s previous and future releases. The company had three products when we began this project, and were in the process of releasing two more. In this grid, all projects would be positioned amongst each other and information about each would be located in a second grid. Also on the page was the newly organized showcasing of past brands Mango Concept partnered with.

The redesigned “Services” page is condensed and much more interactive for users. Everyone would be able to click an option and automatically be scrolled down the page to information about their selection.

3. Test

We printed our wireframes to guerilla test with eight people. Each were given certain tasks to complete and we asked them to narrate their process as they did so.

Sample scenario: You are the owner of a small business needing to revamp your online presence. You’re looking for someone with the expertise to help you with web design and user experience. You’ve heard about Mango Concept, and you want to find out if they can help you with your business’s web and UX areas.

Conducting tests with high fidelity wireframes

(We let them know we were testing the website, not them! Users can be so self-conscious sometimes.)

Overall, this testing phase was quite the learning process. We found that participants were able to complete the tasks seamlessly depending on the assigned scenario. User curiosity to explore certain aspects of the redesign was sometimes blocked due to the limited capabilities of our flat prototype, such as wanting to explore other subscription prices that were not provided by the flat design.

Although our participants were still able to complete their tasks, my team and I knew that the user flows were not as absolute as we knew they could be.

As a result, we took note of these issues so as to not repeat the same mistakes during our future endeavors.

Main issues discovered during test:

  1. Paper prototype did not portray all features.
  2. Users were confused about the difference between “Products” and “Projects”.

Our solutions:

  1. Ensuring that our prototypes had extendable features (i.e., paper to pullout as a representation of dropdown menus or of a change in different options selected) would make future tests smoother.
  2. Remove the “Projects” page and place its information under the “Products” page.

4. Iterate


Keeping our previous issues and their solutions in mind during iteration, we created mockups. It was exciting to see our ideas being brought to life.

We experimented continuously with colors and graphics while keeping true to Mango Concept’s current color scheme. Because a mango was the logo, we wanted to have fun with its fruitiness. It was our job to breathe energy into its once lifeless theme.

Redesign of the “Services” page
New “Company” page — featuring fun bitmojis!

The inclusion of trustworthy, humanlike phrases such as “Incubate your ideas,” “Let’s get you social,” “Talk to us,” and “We got you” on the homepage acted as greetings to users.

Feedback from re-test:

We found that 7/7 of users tested felt attracted to the brand due to the phrases and bitmoji squad images!

“It feels very personable, like they’re willing to work with me instead of for me… for my money.” — User statement

5. Constraints

During the entirety of this project, the technical constraints involved designing for desktop sizes, incorporating motion, and designing clear CTAs. Using Adobe Illustrator, Adobe color wheel, Sketch, and InVision we were able to deliver a clickable prototype that was ready for user feedback. Surpassing these constraints required consulting with our client, following web design conventions, and conducting user tests.

6. Retrospective

I am slowly but surely becoming more comfortable with the sketching process of UX. I’m not the best artist, but replicating my ideas into physical form through sketches helped me realize which aspects of the ideas are doable and which ones aren’t. The entire sketching and prototyping process was a fun way to experiment with designs and see everything come to fruition.

Communicating with a real client about their wants and needs for this website assisted me with understanding the flexibilities and restrictions I was allowed to work with. I have designed and coded websites before, but never from a UX perspective. It was usually designed with my own wants in mind whereas this project wasn’t. This project certainly presented a challenge that helped me approach designing differently. (Composed 2017.)

Source link


Please enter your comment!
Please enter your name here