BCorp empowers companies - and creatives - to advance environmental & female social change through future-forward design.
BCorp Design Agency
Creating the perfect landing page for an up-and-coming design agency.
Problem
An up-and-coming agency, BCorp was looking a well-designed landing page. Their goals were twofold: to gain clientele and to create conversions. Their main request for this project was to create 3 test pages, evaluate which one worked best and revise as needed.
Solution
Create 3 landing page designs and evaluate user preference through testing. Understand which design worked best based upon usability, comprehension, ease of use and nomenclature. Pages were designed on Wix with current template trends and structures in mind.
Tools
-
Figma
-
Miro
-
Sprig
-
Maze
My Role
-
3 UX/UI Designers
-
1 Project Manager
-
1 Virtual Assistant
Specifically, I focused on the competitive analysis research, heuristic evaluation, as well as the sitemap, style guide and UX/UI design.
Timeline
-
Overall: 4 Weeks
(Full breakdown below)
Design Process
Competitive Research
I conducted research on competitor behaviors, product and clientele through heuristic evaluation. Using the JTBD framework, I evaluated outcomes rather than features to identify successes and customer engagement timelines.
Evaluated products: Yoyo, Man Over Board, Naked Ideas, Something Familiar.
Let's find a solution!
I wanted to form a deeper understanding of the users' goals, needs, experiences, and behaviors. These observations and ideas were based on the perspectives of parents that were interviewed and participated in the research process.
Competitive Research Findings
In addition to the heuristic evaluation and user testing, we utilized the Jobs-To-Be-Done framework.
Competitors have generally high marks, between 4.5/5.0, meaning their presentation is clear and easy to navigate. We identified pain points and strengths for each.
Among some competitors, user landing page scrolling was short and held attention, potentially generating conversions. Some pain points included issues with graphic design principles, typography, hierarchy and illogical text and image positioning.
All issues were taken into consideration.
Jobs-To-Be-Done Goals
What types of progress do consumers want to make?
Because this is the landing page for a design agency, the main goal is to offer great services through a portfolio, which is the main focus of the website, its experience, and overall ease of access.
Jobs-To-Be-Done Constraints
What blocks the consumer from achieving or maintaining their goals?
Scrolling for so long is a time waster . The longer the landing page is, the sooner the user will abandon the task.
Findings
•When asked to buy a ticket, users said that there was some confusion when buying. She expressed that it’d be more helpful to have a micro copy that reads “buy tickets to the best attractions”
•When asked to share the calendar with their child, the user didn’t really know which login to use. He mentioned it’d be better to put the child’s email, rather than a login name.
Usability Testing
Initially, I created the sketches thinking of the kid user, however, as I kept developing the idea, I thought it would also be interesting to explore the product from the parent point of view, because they’re the ones who are able to purchase and make the big decisions.
Style Guide
A style guide was created with considerations that included: natural, earthy tones and reference from the Starbucks color palette.
Font and typography are a combinations of Serif and Sans Serif fonts Nunito and Playfair. Contrast and accessibility were considered.
Sketches
By creating these sketches, we were able to communicate visually to have consistency on what we wanted to deliver and enough ideas to make it diverse.
User Testing
Based upon our personals and ideal customer, we conducted a focused survey using two testing companies and two questionnaires for each.
Testing Overview
#29 Participants (woman>men)
#20 from Prolific
#9 from Respondent.io
#17 willing to participate future study
Key Findings
"Solution Areas" is very odd lingo that I don't think clients would understand.”
“The solution area cards give the most information on what the agency did for these brands.”
“There feels like there is more interaction with this website, which is intuitive, but I would prefer all the information on one page and just scroll up/down, not have to necessarily interact.”
“I feel dismayed and confused. Make it less complicated with not so many columns.”
“Methodology and expertise stand out favorably”
Design A
Positive feedback:
Layout, color palette and flow well-received.
Negative feedback:
Issues with CTA's imagery, and lack of bolder colors.
Preference test: 11 votes
Descriptors:
bland, boring, clean, simple, green, earthy, open friendly
Recommendations
Content
General content only what is necessary, and easy to navigate,
in order to keep potential client's attention.
Clearer, simpler wording.
Avoid cliches to stand apart.
Reevaluate content flow to create and increase engagement and conversion.
Design
Use more modern font, perhaps exploring combinations. If choosing Serif, go with a more modern iteration such as Geared Slab or Sedwick.
Rethink color palette as green was not a favorite, though combination of dark brown and green was well received. If we go dark, we should go all the way.
Less information, more navigation within sections to engage customers.
As parts of these recommendations,
we designed a sitemap to streamline navigation.
Thank you for reading my case study!
Want to work with me? Feel free to contact me! ...or just say hello on my social media.
Personas
Per the CEO, their primary desired users are decision-makers from benefit corporations based in the US, Australia and Europe with a revenue of $10 million. From this description personas were created.
Affinity map
We created an affinity to sort the responses, understand the trends and see what the user tends to do when it comes to the layout
Designs
For the UI inspiration I wanted something simple and playful. Because TakeOff is an app for families, I wanted it to be clean but kid-friendly .
I fleshed out this direction with illustrations because they inspire kids to explore it.
Design B
Positive feedback:
Flow well received and darker color scheme is trendier. Cohesive.
Negative feedback:
Issues with contrast and color palette.
Preference test: 9 votes
Descriptors:
serious, corporate, bold, strong, aggressive, comprehensive, sleek, modern, heavy, unattractive
Design C
Positive feedback:
Right angles of the design. Methodology we best received of the three designs.
Negative feedback:
The "Solution Areas" received negatively.
Preference test: 10 votes
Descriptors:
balances, contrast, environment, recycling, neutral, simple, neat, eco
Learnings
This was my first opportunity to work as a team member in a product design team, and put one of my designs into “a real life” field. Getting feedback and positive critiques about my work is nerve racking, even more so when people dislike the designs.
Growing a thick skin to receive these comments is very important, but it is also important to work as a team, and find solutions to them. Also working, presenting
information and updates, and receiving feedback from stakeholders was really great.
The time crunch was also a challenge, but it was a great training session to see how things actually flow.
Next Steps
I would love to continue working with the next iterations of this landing page. Having created the recommendations for the company makes it more interesting, knowing what are the possibilities provided by the real users.