mockup of website

Nikola Design & Build

Branding, Landing Page Design, and Build by & for Nikola Advanced Research Labs, Inc.

[Website Redesign Launches 4/27/2018]

Nikola.cloud

Nikola.cloud was designed to be a fully responsive, mobile-first website.

The design team at Nikola Advanced Research Labs, Inc. put together a tailored design and branding strategy to cater to the target customer and compete with top design and development shops in the market.

Research

Role: As lead designer, I put together a research strategy that included an analysis of the competitive landscape in order to strategically position the Nikola site to compete with other dev shops in the same space. I did all of the research myself (see process for more details) and presented my findings to engineers and C-level executives.

Competitive Analysis

Goal #1

Competitive Content Prioritization
What content is 1st priority (landing page content)?
What content is 2nd priority (linked content?)
What content can be scrapped?

Goal #2

Competitive UI Design
What visual/design elements are trending?
Correlation between market sector/visual design decisions

Process

Team: Designer (Carly Johnson) Timeline: 2 days

01.

Analyze
competition.

Log design elements and content of 10 competitor sites.

02.

Affinity
map.

Synthesize and compare design elements and content.

03.

Market
overview.

Categorize design elements and content by market sector to find trends.

Conclusion

Competitive Content Prioritization
Content that competitors' deemed important enough to put on the front page included: Defining Statement, Case Studies/portfolio (Examples of work), Blog posts (research & side projects), Strategy/Process Overview (design, build, market), and Team Information.
Competitive UI
UI styles varied by business type/size and market sector, as shown in the chart.

Takeaways/Next Steps

In order to use insights from the competitive analysis and compare them to Nikola's needs, the team needed to define Nikola's place in the market and their main customer base. A branding Workshop and Design Workshop were planned as next steps to move the design forward.

Workshops

Role: I designed and facilitated a day long Design Workshop, taking engineers and c-level executives through design exercises that resulted in a clear understanding of who the user of the website was, and what the pain points of the current design were. I also ran them through exercises that resulted in the company coming to a consensus on the business goals of the website, from which I was able to design a website that met both user and business goals. I presented the findings in a Design Workshop Report and presentation to the entire company.

Design Workshop

Goal #1

Come to a consensus on Business goals of the site.

Goal #2

Understand User Motivations so that we can prioritize features that meet their goals. Success for the customer = success for Nikola.

Process

Team: Designer (Carly Johnson), Nikola CEO, Stakeholders, EngineerTimeline: 1 day

01.

Define
Problem Space.

Listen to brief. Affinity map and dot vote to define a "How might we..." statement.

02.

Persona, Pain Points,
and User Journey.

Define target user and main motivations & needs.

03.

Feature Prioritization
Matrix.

Brainstorm, vote for, and map priority of features by importance to user and difficulty/cost.

"How might we...

Through listening to a brief given by the CEO of Nikola, the team collectively decided on a statement that defined the problem space of the website design.

...communicate and establish our credibility to potential clients through our landing page?""
Persona

Meet Karl.

Seniority Level

Busy

Tech Saavy

Goals:

Find a Dev Shop to update his apps, making them more appealing to users, responsive, and using a more up-to-date tech stack.

Other Motivations:

  • Price/Time

  • Establish Credibility

  • Capabilities/Integrations w current products
  • Compliance
  • 
Aesthetic
User Journey


We created a User Journey based on the current (old) version of the Nikola Website. Through walking through the website from Karl's viewpoint we found two pain points to improve upon:
1. It was unclear what product or service Nikola was offering
2. Website did not inspire confidence in competancy of Nikola

user journey
user journey
Feature Prioritiztion


In order to decide which features are highest priority to include in our first iteration, we brainstormed features, including features we found during competitive analysis. Then we plotted them on the feature prioritization matrix according to importance to user & business goals, and complexity/price.

Workshops

Role: I ran a day long Branding Workshop, taking engineers (both onsite and remote) and c-level executives through branding exercises which resulted in a consensus on brand direction. I developed branding guidelines from the findings for all future products, pitches, social media, client interaction, design, and more. I presented all findings in both a research and presentation to the full company.

Branding Workshop

Goal

One UNIFIED brand for Nikola for all marketing, social media, delivered products, pitches, client meetings, etc.

Process

Team:Designer (Carly Johnson), Nikola CEO, Stakeholders, Engineer Timeline: 1 day

01.

Define
Values.

Brainstorm, Affinity Map, and dot vote to define our values and audience.

02.

Personality
Sliders.

Define the personality of Nikola.

03.

Competitive
Landscape.

Compare Nikola's characteristics with competition to compare style choices.

Top 3 Values
Excellence + Innovation creativity icon

The team at Nikola is devoted to constantly keeping up with the latest technologies to bring the most excellent end-product possible to the customer.

Happy Employees = Better Products happy team icon

Nikola believes in building a great environment where employees can learn, grow, and be happy.

Commitment to Clients commitment to client icon

The Nikola team is in it for the long run with their clients - building a great relationship is a priority.

Personality Sliders


The team individually voted on the personality of Nikola. There was a strong consensus that Nikola was Elite, Young & Innovative, and Rebellious. These insights would later translate into building a UI that reflected these traits.

user journey
user journey
Competitive Landscape


By comparing our business and brand traits to others on the market, we can make sure our design choices compete directly with Nikola's competitors.

Takeaways/Next Steps

Using insights from the Branding Workshop, Design Workshop, and Competitive Analysis, I was able to build a UI and copywriting strategy that directly met the needs of the user and the business needs, and that visually and verbally conveyed a unified brand.

Design Sprint/Build

Role: I used Sketch to design wireframes and high-fidelity mockups. The design used all of the findings from the previous research and workshops. It was designed mobile-first, to be coded using a grid system. The UI was built around findings about competitors' websites as well as using design notes from the branding workshop (rebellious, elite, young & innovative). I rewrote all of the copy to concicesly explain our value proposition to the end user/target audience, eliminating the pain points from the previous design. I also added calls to action at key points to drive user engagement and meet the business goal of creating leads.

Mockup

Related Work