valor: designing mobile web experience
overview.
Company
Timeline
May 2023 - Jun 2023
Team
— Me (Product Designer)
— Saurabh Parashar (PM, Co-Founder)
— Harshit Garg (Co-Founder)
— Gouse Mohammed (Senior Designer)
— Aakriti Mehra (Front-end Developer)
opportunity.
As our initial platforms started going live we realized that most of our audience and especially stakeholders were majorly on the move.
It was showtime!
I started working on making the whole website responsive and adaptable for the mobile web.
​
​
Note: This project was under NDA. To comply I have omitted certain parts. The screens presented are just a small part of my work at Valor.
design system.
The first thing I set out to do was to draft a sturdy design system adapted to the mobile experience. At the same time, I made sure I did not skew from the one we had around the web platform. The goal was to keep consistency while prioritizing adaptability.
making screens
responsive.
Valor is heavy on data visualization and branches out into different platforms.
I had to come up with an approach toward representing data-heavy tables and charts in adaptable ways.
I researched for better ways esp to represent tables, but the result was not what I expected. I iterated on a few ways but wasn’t sure if it made browsing information any better.
Disappointed, I reached out to my senior. After he validated my approach whilst adding his nuggets of wisdom, I was back on track.
the challenge &
the process.
The biggest challenge was to accommodate several nav bars while keeping the designs intuitive.
I made several iterations but then decided the best approach would be to use one of the most common mental models- Floating Action Buttons.
Thanks to Google services a lot of our target audience might have some kind of familiarity around them.
Rest is history.
accessibility.
1.
I added descriptions to alleviate the learning curve and clear labels for interactive elements that can be read by screen readers.
3.
Clear cues were presented to the user through text ornaments (like stars), icons, and color psychology.
2.
I used landmarks to help users navigate the site, including users who rely on assistive technologies.
4.
I used headings with different-sized text for a clear visual hierarchy.
5.
Used overlays to dictate attention and avoid distractions.
reflections.
The user is the Boss.
I learned that even a small design change can greatly impact the user experience. The most important takeaway for me is to always focus on the user's real needs when coming up with design ideas and solutions.
​
— Document as much of the work process as possible.
During the internship, I wasn’t documenting my process so much, which made working on the final presentation, and this case study more difficult.
— It’s okay to ask for help.
Ask for help when stuck. By talking openly and frequently I was able to avoid major hiccups and stay on track.
​
— User testing could have helped.
We are a small-scale start-up, which made user testing a far-fetched dream. However, we still managed to come up with ways to better our user experience. However, when designing for a mobile web experience a little user testing could have gone a long way. So next time maybe I'll ask someone in the team to test it with me.