Cycling

UX Design, UI Design

LexiCode Website Design

01

Background

LexiCode, a company provides Health Information Management (HIM) solutions, came to us with an urgent need for website redesign. Their marketing team addressed the fact that since their current website is neither appealing nor understandable, they don’t have an advantage while competing with other similar service providers.
Cycling
02

To-Do List and Requirements

After 2 rounds of call with LexiCode stakeholders. The requirements are identified as follows:
  • Reconstruct and design the whole official website, make it organized and easy to navigate;
  • Design a new Logo for the brand which matches to both the brand image and parent company - EXELA;
  • Design the icon sets and other UI/graphic assets for LexiCode.
The overall style shall be:
  • Dynamic;
  • Eye-catching;
  • Inviting.
And additional features:
  • Make page dynamic and look vivid;
  • A chat box to engage with visitors;
  • Responsive across different screen size;
  • Core info is easy to access on mobile device.
03

Design Process and Deliverables

Logo Design
I begin with looking around and sketching out all the ideas in my brain on paper.
Cycling
And I turn it into digital graphic and send them to our client for review.

They mention “No techie looking”, “expertise” and “comfort”, and propose a preference for blue and green color over others. There is a lot of communication I came up with a bunch of different ideas. A long journey but it is enjoyable for me to explore and iterate.
Cycling
Finally, they were satisfied with one of the design, here is the approved final Logo set:
Cycling
Website Design
Though the structure of a company website is very standard in this case, there is a lot of things to improve. Based on the requirements we gathered and refine in the meetings, I am trying to :
  • Highlight the prior CTA;
  • Optimize navigation;
  • Assure all the content is accessible and understandable;
  • Create consistent UI and interaction;
  • Make the website light, refreshing, lively and inviting.
Here are the pages I made in Sketch:
Cycling
Icon and Graphic Design
To better illustrate the services LexiCode can provide and the differentiators that LexiCode is proud of. I sketch out icons and graphs that are used in websites and other marketing decks. They are simple but expressive.
Cycling

Cycling

Cycling
Interaction Animation
To help the clients and developers understand the dynamic components in the website, I created demo animation to show how they work. Those turned out to be very helpful to bring the team on the same page.
04

Wrap Up

As I said, it was a long journey, during which I took the full responsibility for the redesign. I enjoyed a lot during the process. from the very first stage: questioning Cindy (the VP) and business analyst and refine the requirements. all the way to closely work with the development team in India to make the website live.
Cycling