The objective was to establish trust with the users through the use of familiar UI patterns, a clean and modern visual style, and an intuitive navigation and filtering system.
I based my design decisions on user testing and thorough exploration of common UI patterns used in online stores to make the shopping experience as familiar and trustworthy as possible.
Many people prefer shopping online because of the convenience it provides. They can access a broader range of products while they do not have to spend time going to the physical store. Additionally, many people get joy out of receiving a packet and the ease of returning it is a big plus.
Establish trust with the users to make sure they are comfortable buying from the online store which will increase the likelihood of them returning.
Create a modern and clean online shopping experience that utilizes familiar UI patterns for smart filtering and navigation.
In the following sections, I will dive deeper into the process of how I arrived at the final product.
I began the ideation phase and got some ideas down on paper. I wasn’t certain that I had a winner amongst the sketches however it was good to produce something and get the creative process going. For me, this is such an exciting part of the process.
I knew I needed to use industry-standard UI patterns to incite familiarity and trust. By analyzing competitors, I found common UI patterns I could utilize in my product.
I conducted the analysis so I didn’t have to reinvent the wheel and I could spend my time focusing on the areas I thought could be improved.
I knew the design would be clean and modern, and therefore I needed a font with character to create some visual excitement. Finally, I choose Bricolage Grotesque.
I ended up sketching logo variants with Bricolage Grotesque and I found that it had the sturdy quality I was looking for.
Working with the logo gave me a ton of ideas on how I could pair the logo with various color combinations.
It was important to nail the Brand Guidelines to help me steer towards a coherent visual appearance that would instill trust in the user.
We are accepting of every type of runner, and we encourage everyone to participate in the sport that we love - no matter their abilities.
Our job gives us joy and purpose because we can help runners of all levels have better running experiences.
Running is a lifestyle, and we put a lot of time and effort into it. We are experts in the field and our community expects us to give them qualified advice.
We are a part of a larger running community. We have a responsibility to supply the community of runners with the best equipment for them.
Our main goal is to supply the right equipment and advice to runners of all levels to help them get the most out of their running.
The logo consists of an underscore, the lettermark “iRun” with a capitalized “R” and a small “i”. The logo is placed inside a box.
The colors we use are energetic and vibrant, just like running. We encourage good energy and we want running to be fun. The color scheme reflects the joy of running.
We have a few vibrant and potent colors that are balanced out by a range of greys, white, and black.
Bricolage Grotesque is our main font. It has a lot of character and is a bit quirky. It is good at catching attention and making our users remember iRun. It is the font used in the logo lettermark.
DM Sans is used for body text and small headings. It combines well with Bricolage Grotesque and is easy to read in small text sizes.
We use images that inspire our audience to run. For example, runners out for a run or runners resting after a run. The runners need to look like they are dedicated to running to communicate that we cater to the very best of runners and to strengthen our positioning as a top-tier running gear specialist.
The images have to be of the highest quality. High resolution and good lighting are key.
DO NOT Show runners that look like they are trying to convince themselves that running is a good idea.
We must communicate our passion for running and speak to our community as if they are equally dedicated and excited about running.
We talk to our users as if they are members of a common community. It is a friendly, encouraging tone with a bit of humor.
Creating a user flow diagram helped me get an overview of the users’ movement around the site. It informed me about which screens to turn into wireframes.
After having looked closely at the three competitors, I had enough ideas to create wireframes that made use of common UI patterns.
I drew these sketches to quickly get ideas down onto paper without having to spend much time on it.
I turned the paper wireframes into digital wireframes which I could prototype and use for user testing in the next step of the process.
It paid off that I had studied the UI patterns previously because the feedback I got from the user testing was that the product was “very standard – in a good way”.
The user testing helped me become aware of elements that confused or frustrated the users.
I added a dropdown from the search bar with suggested items based on the search word.
I removed “Running Gear” from the navigation menu.
I renamed the “Basket” to “Cart”.
I simplified the search feature.
I added an extra slot in the header menu for Wish List.
I introduced a notification whenever the user adds an item to their Cart or Wish List.
I created a dropdown when the user hovers over a menu item in the navigation.
One step closer to creating a pleasant online shopping experience.
I updated the wireframes based on the user testing. In the process, I applied styling to the wireframes to turn them into high-fidelity mockups.
Through the project, I have learned that there is a massive upside to conducting a thorough competitor analysis before I begin designing and sketching. Knowing which UI patterns the users expect to see in a given context makes it easier for a designer to create a familiar user experience and in turn, create a positive response which is likely to enhance the users’ trust in the product and brand.
Feel free to connect if you have a relevant UI/UX or Brand Design job opening.
