Process Blogs Contact Us

Got An Idea?

Let’s work together to create some really cool stuff.

Let’s talk

Project Brief

Successive technologies was revamping & expanding its digital transformation capabilities and was therefore looking to build a new website that would work for the company’s new goals & vision.

successive_Technology

Goals of the project

1

Increase the number of business enquiries through the website

2

Showcase the company’s deep market expertise in digital transformation

Technology Used

figma

miro

html

Zeplin

CSS

FlowMapp

After Effects

Our timeline

We were given a 10-week period in which to understand the
problem, explore ideas, create wireframes and designs, and then
begin development.

DISCOVER

Understanding the problem space.

Defining users, tasks and environments. Learning from the current market.

CONCEPTUALISE

Developing design alternatives.

Generating solutions using informed brainstorming sessions.

PROTOTYPE

Converge and build one design solution.

Plan evaluation methods and usability specifications.

DEVELOPMENT

Discount evaluation of the prototype.

Understand user interaction and lay out design improvements.

Discover & Explore

Before diving into possible solutions, we reviewed multiple other successful
competitors in their industry to be abreast with the rapidly changing
technology consulting industry. We initiated with secondary research

secondary research

On a whiteboard, we looked at a variety of competitors' designs, styles, and positioning to get a better
understanding of what they were doing.

journey mapping

We invited everyone, as well as several important members of the Successive team, to learn more about our Target Audience. This
allowed us to gain insight from all aspects of the business as well as our clients.

Our goal with journey mapping was to better understand the stages of the customer experience and to have them describe their pain
points while seeking for a technology consulting firm.

The Top Voted ‘How Might We‘s that came
after voting on the painpoints of the site
vistors

How Might We

“I really loved doing this exercise! We all listed great
points from multiple perspectives in such a short
time. Would love to do more of these at in our own
team”

Sid

Founder & CEO, Successive Tech

Strategies & Conceptualise

Problem Statement 1

How might we convincingly communicate our expertise & market presence.

Research

To effectively communicate our expertise & trust, we
found that we need to communicate a few of the
below mentioned aspects from our internal research.

  • Years of Experience
  • Showcase big clients
  • Authentic testimonials from our clients
  • Total number of projects executed
  • Years of expertise
  • Results & outcomes of successful projects
  • Range of Industries worked with

Ideation

We explored ideas and produced wireframe blocks internally to come up
with ways for communicating our expertise.

Problem Statement 2

How might we create casestudies that are more effective in getting users to read them.

Research

We discovered that we needed to discuss a few of the
following aspects from our internal research to make
our clients read and communicate our expertise and trust.

  • Emphasize on the project Goals & Outcomes
  • What was your approach behind the solution?
  • Showcase Benefits , not features.
  • What was different in our solution
  • Don’t add large paragraphs
  • Reveal the tools & technology Used
  • Use metrics to quantify key results

Ideation

We internally brainstormed ideas & created wireframe blocks to ideate for
solutions around the above mentioned concepts that need to be
communicated.

Information Architecture

While generating new ideas we also started working out the layout of the website & its multiple
services & offering. We got together on Miro to work on creating the below information architecture.

Lo-Fi Wireframing/ Paper Sketches

We started designing the website after organising all of ideas from the Ideation phase. To begin,
we sketched some of the site's main screens, following the user flows as a guide. This allowed us to
swiftly test a variety of website layout ideas. We then put it to the test with three people to see if
these solutions met both user and business needs.

Hi-Fi Wireframing

We started designing my initial wireframes in Figma based on the feedback and personal insights
we gained during the drawing phase. Throughout the website, we took sure to prioritise the
features that would best meet the demands of the users.

Lo-Fi Wireframing/ Paper Sketches

We started designing the website after organising all of ideas from the Ideation phase. To begin, we sketched some of the site's main screens, following the user flows as a guide. This allowed us to swiftly test a variety of website layout ideas. We then put it to the test with three people to see if these solutions met both user and business needs.

Hi-Fi Wireframing

We started designing my initial wireframes in Figma based on the feedback and personal insights we gained during the drawing phase. Throughout the website, we took sure to prioritise the features that would best meet the demands of the users.

UI Style Guidelines

Primary Colors

Eerie Black

#1F1F1F

Vivid Red

#F30E0E

Secondary Colors

Electric Orange

#F73706

Dark Tangerine

#FCA013

Complimentary Colors

Black

#000000

Quick Silver

#A4A4A4

Bright Gray

#EFEFEF

White

#FFFFFF

Typefaces

Gordita

Google Font

Medium

Regular

Open Sans

Google Font

Medium

Regular

Text Hierarchy

Grid

Hi-Fi UI Design

On the basis of all the User research & analysis, We created the final UI Design
prototype. Below you can find my initial explorations into how this visual style might
look. It Is a MVP( Minimum Viable Product). I wanted the visual design to emphasise
these core values: simplicity, creativity, and tradition. !created a Mobile Responsive versus.
as well to keep in track with the current Design Trends

Mobile Design

In the process, I also created a Bookista Mobile Application. It is a MVP(minimum Viable
Product). According to statistics, about 60% of traffic comes from mobile devices.

Impact

Mobile conversion rate increased by

2.4X

Bounce rate reduced to

46%

Average orders up by

124%

Thank You
Back to top