RC WEBSITE DESIGN

The company website was outdated in terms of content, design style and usability. By using an end-to-end human centered design process I worked to put together a modern, clean and visually appealing website design that would enhance the brand identity and help the company make a better impression to their target audience in the market.

ServicesUX Research, Visual Design, BrandingYear2020Linkreactivecore.com

GOAL OF REDESIGN EFFORT

FINAL SOLUTION

DESIGN PROCESS

STEP 1 - RESEARCH

The research phase began with an analysis of current website to understand the previous website design layout, effort, and intent.

First Impressions of current website

● Language is too technical, complicated
● Looks like a cybersecurity firm!
● Government war room impression
● Gives a rich villain company vibe

● No clear structure or message
● Boring! Not compelling at all!
● Content is muddled and confusing!
● Need better graphics & pictures

Principles of web design - Current Score: 2/10

✓ Responsive and Mobile friendly
✓ Easy navigation and fast loading
✘ Less is more – Keeping it simple
✘ Innovative but not distracting
✘ Visual Hierarchy and Accessibility

✘ Aesthetically appealing to the right users
✘ Consistent, Engaging, Intuitive
✘ Easy to understand and inspiring to go deeper
✘ Visual elements placed to focus user attention
✘ Emphasis on what matters most

Feedback from expert analysts

Performed analysis of the feedback received from industry experts

Competitive Analysis

Datavant – Is a good reference in terms of content and style
Ontotext – Don’t like visual style, it’s too much and not appealing to us right now
Tiger Graph – Is engaging, looks good, structure is in place, some styles are nice
Flexrule – Not appealing, business rules page is too much, too technical
Klue – Animations and motion graphics are a bad idea when they reduce page load time
Cambridge semantics – Products page detailed info is needed on a secondary page
Noodle.ai – Motion graphic around enterprise.ai is an inspiring reference
Prowler.io – Parallax effect is too much, it will grow old, does not serve our purpose
Maana – video is needed, metrics and scientific representation would be good
Stardog – Interesting tagline, icons are nice and main visual good reference point
Datarobot – Structure of content is good, graphic at the bottom is interesting

Stakeholder and User Interviews

Understanding of objectives, brand attributes, expectations from key stakeholders, Conducted individual user interviews for feedback on current site

INSIGHTS FROM INTERNAL USER INTERVIEWS

REQUIREMENTS FROM STAKEHOLDERS

● Website should help user from a business perspective and help figure out solutions
● Screens should have some simple business points that drill you in and click for more technical supporting details
● Need an analogy to explain and visualize our core differentiators
● Need real examples to illustrate industry familiar terms like AI, ML, DA
● Highlight our identity about being oriented for business solutions and enable people to understand key components of the platform
● Include interactive features like free trial, engaging videos, revenue calculator, webinars
● Giving people enough to get them interested so they contact us would be a winner website
● Come up with a simple new design that gets out the concepts that we have right now

STEP 2 - IDEATION

Persona Creation

Identification of target user personas and listing channels, goals, motivations and frustrations of each user

USER CATEGORIES

Sitemap Discussion

Mapping and analysis of the current website flow, identifying changes to make, and selecting new features and sections to be included

CHANGES TO MAKE IN CURRENT SITEMAP

● Strong Tagline, Video, News is needed
● Who we are, why choose us and about page should be improved
● Social media not needed but link to LinkedIn page should be there
● Twitter, Ontology rSupernode, 3 cores innovation should be removed
● Footer should have address, key info of company, location, and how to contact
● Better pictures and visuals are required
● Landing page should have two main sections:
○ Solutions (Healthcare, Life Science, business, product, success stories)
○ Technology (Decision Intelligence, Knowledge Graph, Platform Architecture, open source stack, capabilities)

CONTENT HEADINGS FOR NEW LAYOUT

Affinity Mapping

INSIGHTS FOR LANDING PAGE

● Start with tagline and hook – scalable knowledge graph and decision intelligence and include quick links with a catchy background visual
● Showcase 3 key technical features and advantages
● Video overview of RC + vision + recent news
● Client testimonials for credibility
● Request to follow up – Learn More, Request Demo
● Value – Market based solutions – healthcare, life sciences
● Identity for RC – visualization, colors, consistency
● High level keywords, minimal and compelling text, hover for more details
● Four boxes – Market, use cases, Knowledge Graph, Decision Intelligence

Insights Synthesis

Creating new sitemap and capturing stakeholder feedback, finalization of information architecture

STEP 3 - DESIGN

Low Fidelity Wireframes

Creating low fidelity wireframe from the information architecture to fix on structure, layout and navigation flow

Stakeholder Feedback

Incorporating stakeholder feedback on the wireframes, making changes in the sitemap and updating the wireframes

High Fidelity Prototype

Applying visual design treatment and brand colors to the wireframes, creating a high fidelity clickable prototype, receiving feedback on content and graphics

IMAGE SELECTION

● Navigation
● Laying out finalized content
● Iconography
● Color palette and design theme
● Visual assets and cosmetic treatment
● Header background and other images
● User interface components

STEP 4 - TESTING

Design Hand-off

Finalize content, visualizations, imagery, styles; Pass off style guide and final design to dev team for implementation

STYLE GUIDE

DESIGN TO DEV TRANSLATION

Internal User Testing

Perform testing with internal users to test navigation execution and content review

TEST CASE RESULT

Acceptance Testing

Perform acceptance testing to ensure developed site matches the design, content review, spell check, web accessibility test, responsiveness across different devices

ACCESSIBILITY CHECK (VOICEOVER, WAVE)

RESPONSIVENESS TEST

VISUAL & CONTENT UPDATES

Changes made after user testing

1. Not evident that logo takes to home page – added home to navigation menu
2. Contact form too small – increased size
3. Paragraph font too light – font weight was increased
4. After scrolling down, there is no direct way to get back up – Above footer, arrow added to enable
scrolling back to the top
5. Micro-interactions were added in the form of simple animations to increase engagement
6. Content changes were made to different sections and bios
7. Visual fixes were made to the layout on all the pages to match the design
8. Alt text was added to all images and heading hierarchy established for accessibility

External User Testing

Perform testing with external users to test if the content and flow makes sense

Positive Feedback

Next Steps based on External User Feedback

1. Video or demo outlining the workflow is missing – add step by step introduction
2. Example use cases of healthcare data and AI technology is missing – include solutions, product
offerings, platform details, differentiators, case studies, proof of concept papers, more clients
3. Proof of success in terms of clients, revenue, and success stories is not clear – clarify better
4. Not clear what IDNames.Services is! – everyone mentioned this, needs to be fixed
5. A very simple graphic illustration of Reactivecore’s function and “end product” potential as well as a look at what might happen without Reactivecore’s service – include a motion graphic video to explain the process and value
6. The term ‘Precision Data’ is not well known or understandable – Include more explanation for it

Links

1. XD design: https://xd.adobe.com/view/6bec91d0-0765-4cd2-bbea-f9e7823f1488-3ebf/
2. Website link: https://reactivecore.com/
3. Style guide: https://xd.adobe.com/view/43d560ca-57d7-4e66-9660-c891ccb52950-1686/

Privacy Preference Center