3ADVANCE Case study

———————————————————————————————

Client

3Advance is an app development agency based in Washington, D.C. They develop mobile, web, and data-management applications for startups, businesses, and non-profit organizations.

Goal

To create a landing page that bolsters the brand, speaks to agency’s values, and positions 3Advance as an innovative solution for aspiring business leaders.

Project Type, Duration, Tools, Deliverables

Third assigned project (solo) | Two weeks of Visual Design and Coding | Paper, Pen, Sketch, HTML, CSS, Codepen | A Mockup and Coded Page, Style Guide, Research Findings, Competitive Analysis

Role & Skills

UI/Visual Designer | Competitive Analysis, Branding, Wireframing, Prototyping, Usability Testing, HTML, CSS

———————————————————————————————

Research & Competitive Analysis

I kickstarted the design process with a competitive analysis of other websites with similar product and service offerings. The main features that I took note of were the landing page strengths: the industry reports, eBooks, press releases, client testimonials, awards, emerging technologies, and "We're different" sections.

Competitors’ Websites

Overall Observation

I also analyzed 3Advance's current website from a new user’s perspective.

·      Pros: Page is concise and simple, tone is honest and direct, and team seems passionate and hardworking.

·      Cons: Embedded links are hard to find, and the services section is dense--requires effort to read.

Persona Types

The three given personas from the project brief were also taken into account for the design process. These are well-informed and educated clients who know what they want but need software development support.

·      A retired, successful lawyer turned entrepreneur who wants to bring his startup idea to life.

·      An IT leader from a non-profit organization who wants a development partner for his ideas.

·      A passionate small business owner who wants efficient IT solutions to scale her business.

Problem & Solution

Based on research and the project objectives, I set out to solve the problems below.

Solution

  • Use storytelling and visuals to focus on the value proposition and help clients envision their own potential.

  • Focus on dynamic content and key words to increase search rankings.

  • Optimize user flows and calls-to-action to increase traffic, tractions, and sales conversions.

Problem

  • The landing page lacks focus on storytelling and engagement.

  • Content is static, which is prohibitive for SEO rankings.

  • Traffic is very minimal, which affects sales conversions.

Branding

·     Mission: “Our mission is to empower entrepreneurial leaders, and with our passion for tech, bring their vision to life.”

·      Vision: “You have the vision. We are your team. Let’s get together.”

·      Personality: Sincere, reliable, cheerful, hardworking, spirited, competent, relatable, affordable, honest, efficient, passionate, knowledgeable, modern, nimble, innovative, imaginative

·      Culture: Laidback, open vacation policy, fun but can be intense

·      Values: Honesty, transparency, team work, passion, empowerment, diversity, respect, trust, growth

·      Landing Page Content: Hero page, Services, Portfolio, Team, Blog, Testimonials, Contact

·      Calls-to-Action: Let’s Connect; Let’s Chat; Let’s Collaborate; Let’s Talk

Ideate & Prototype

With this data and research-backed insights, I proceeded to sketch and wireframe 3Advance’s landing page.

Current Landing Page & New Sketches of Landing Page

Usability Testing / Class feedback

The first design was then tested and critiqued by fellow classmates. I received mixed reviews.

I took this feedback and incorporated it into the final design.

Final Mockup

Header Section

-       Converted the initial logo colors to white to keep brand fresh and updated

Hero Section

-       Used dark blue and turquoise colors to convey trust, credibility, energy, and creativity

-       Incorporated the words “purpose” and “vision” into the landing page statement to support the brand’s values and mission

-       Added “How can we help you make a positive impact?” question and call-to-action box to engage potential clients and help them envision possibilities

Services Section

-       Simplified the application services section into three visual icons for easier comprehension and user flow

-       Reshuffled service description text for SEO purposes

-       Placed previous clients at the bottom of section for lesser visibility and to place focus on the landing page mission

Portfolio Section

-       Placed more focus on recent mobile apps to showcase innovation

-       Added more colors and white space to show the brand personality

 Mission, Team & Culture, Core Values, Product & Approach

-       Added the company’s mission statement to highlight value proposition

-       Listed keywords to showcase essence of the team, company culture, their core values, and products and approach

-       Added photos for visual representation of the section’s message

Testimonials

-       Included testimonials to display social proof, liking, and reputation

Blog

-       Added blog posts to keep users updated and engaged and for SEO

Contact Form

-       Included a contact form as the last attempt to convert visitors

Footer Section

-       Kept content and hierarchy in place for intuitive navigation

HTML & CSS

For the second part of the project, we were tasked with coding our own website design. I attempted to code the full page using HTML and CSS but wasn't able to complete it due to time constraints.

Deliverables

After two weeks, I delivered a mockup and coded version of 3Advance's landing page through research, testing, iteration, design, and coding.

The landing page now has more brand personality, value propositions, key words for SEO, a better user flow, calls-to-action, and is updated with relevant visuals.

———————————————————————————————

Next Steps

With more time to reflect on feedback after the Bootcamp, the following are what I would implement as the next steps for the 3Advance website landing page:

  • Change “How can we help you make a positive impact?” to “How can we help bring your vision to life?”

  • Visually communicate 3Advance’s design-to-development process in the Services section

  • Highlight client testimonials and incorporate their feedback into the design

  • Include previous web and data applications in the Portfolio section to show the client’s full-service offerings

  • Delete or rethink the Team, Product, and Values sections

  • Move the previous client names to the hero image to showcase client relations and credibility

Takeaway

The key takeaway for this project is to design with the company's vision, mission, values, personality, services, and users in mind.

3Advance is a thriving app development agency, and I wish them all the best in their mission to empower leaders and make a difference in their ecosystem.