Project Info
Sarjan Health is an AI-based application that solves patient problems remotely that had a problematic user interface.
They approached us because they needed a design face-lift to make their site more modern and fresh. Also, they needed to improve UX flow and site conversions.
Due to the above, we conceptualized the project and defined to create a rather fun and quirky experience, something that stood off a bit of the typical AI app.
Because of said conceptualization, we based the user experience on vivid colors and an abundant use of illustrations.
These illustrations added a fresh appearance.
But also improved conceptual communication for each element and direct users’ eyes to the desired elements.
Since the site is aimed at both individual users and corporate users, we created 2 versions.
Once the user arrives at the site, she chooses the version she needs.
After this, the user’s journey continues according to the selected path.
Finally, we developed a wizard user interface to discover what the user’s main need is. This way, we can define the best option for her problem in two main categories: knee pain and back pain.
At a later stage, the client implemented the design on the site using WordPress on top of Bootstrap
Requirements
Design a new look that allows users to easily navigate the site.
Create user flows.
Create user interfaces to guide users and provide them with appropriate solutions based on their needs
Strategies/Techniques
Wireframing
User Flow / User Journey
Usability Testing
Competition Benchmarking
UI Design
Tools
Sketch
Ad Hoc User Survey
InVision (interactive mockups for testing)
Illustrator
Photoshop
Photo Gallery
-
Homepage wireframe made on Sketch
-
User's demonstration of path selection
-
Examples of UI instructions to developer
-
UI instructions to developer
-
Design was made on 8pt vertical rhythm approach and 12 columns for Bootstrap
-
More UI instructions to developer using grids
-
Wizard main screen
-
Inner screen example
-
Wizard inner screen example
-
Another inner screen example
-
Sarjan's wizard final screen (negative option)
-
Sarjan's final wizard final screen (positive option)