Overview
In the UXR phase for client Vesta Fitness (details provided in the UX Vesta Fitness Research Project), participants’ thoughts and feelings helped me to gage what Client was lacking, and additionally drove me to identify ways to improve the design of the web pages.
Especially since Client is a new start-up, it is still seeking to create a new user base, for which reason there are many potential channels to take, in order to improve the design and appeal to more current and potential customers.
Stakeholders
1 Founder/C-Suite
My Roles
UX Designer
UI Designer
My Roles
Adobe XD
Adobe Illustrator
Duration
60 hours
Note: Within the rest of this page, I will use “Client” to refer to Vesta Fitness.
UX Research Recap
[Already provided at the end of the UXR page, but just recapping the summary of UXR]
Based on the data and insight that I gathered during my research phase, I had a clear idea of how to create redesigned pages, in addition to brand new pages.
Key Highlights From UX Research
Research-Backed Findings/Suggestions, based on the competitor analysis, and participant interviews:
Add text to the carousel images, to either describe the product, mention any sales, or highlight new products.
Explanation: Interviewed participants wished to more easily understand what Client is selling; felt that the product images on the Home page carousel were generic pics.
Add more sections with diverse categories of the products on the Home page.
Explanation: Interviewed participants wanted to see more of a selection of products on the Home page, to more invited to determine if their tastes were similar to what Client was selling.
Add customer success stories easily viewable for visitors on the Home page.
Explanation: Interviewed participants wanted to be given sufficient information about a company and the quality of the products, before they chose to look further into the available products.
Add an “Add to Cart” button that is always viewable underneath each product image.
Explanation: Interviewed participants voiced that it wasn’t immediately clear how to add a product to their cart; they only saw the “Add to Cart” buttons pop up, on top of the item image, once they hovered over it.
UX Design Process
UX Design
An entire UX project contains both research and design, each of which has two sub-phases.
The research content mostly consists of components in the research and define phases, whereas the design phase consists of the design and test phases.
Note: This deliverable was created with Adobe XD.
3. Design
Mid-Fi Wireframes | UI Kit | Brand/Styling Revisions | Hi-Fi Wireframes
The key pages that I will highlight on my portfolio, are the Home page, Shop page, and the newly created page, About Us (I designed all of those three page on desktop, however, I only designed Home page and About Us on mobile).
Note: If you’d like to see the redesigns for their other pages, you can find them within the prototypes at the bottom of the page.
Mid-Fi Wireframes
Desktop
Home pages are always very important to modify according to expectations of potential customers, and participants’ thoughts during the research phase provided much.
Please see below for the desktop mid-fi wireframes for Home, Shop, and About Us.
Note: This deliverable was created with Adobe XD.
Home Page
About Us Page
Shop Page
Mid-Fi Wireframes
Mobile
I had mentioned to Client that I was going to redesign the desktop shop pages, but I unfortunately didn’t have time to redesign the mobile shop pages.
Please see below for the mobile mid-fi wireframes for Home, and About Us.
Note: This deliverable was created with Adobe XD.
Home Page
Shop Page
Branding and Styling Revisions
It is important to compare the changes to the pre-existing designs, to enable Client to better understand the redesigned pages.
Note: This deliverable was created with Adobe XD.
UI Kit
To keep the future revisions consistent with pre-determined content, colors, icons, forms, and typography, it's best to create a UI Kit.
Note: This deliverable was created with Adobe XD.
Hi-Fi Wireframes
Desktop
Please see below for the desktop hi-fi wireframes for Home, Shop, and About Us.
Note: This deliverable was created with Adobe XD.
Home Page
About Us Page
Shop Page
Hi-Fi Wireframes
Mobile
As I had already stated above, I had mentioned to Client that I was going to redesign the desktop shop pages, but I unfortunately didn’t have time to redesign the mobile shop pages.
Please see below for the mobile hi-fi wireframes for Home, and About Us.
Note: This deliverable was created with Adobe XD.
Home Page
About Us Page
4. Test
Usability Testing | Final Product
Upon completion of the desktop and mobile prototypes, it is important to perform usability testing with the participants, along with planned usability questions, which would enable them to weigh in on how much the prototypes satisfy their wants and expectations.
Usability Testing
Usability Testing Goals –
1. Understand how the placement/order of the tabs on the nav bar aligns with participants' expectations.
2. Understand if the layout of the pages correctly conveys what exactly the client is both selling, and conveying to the public.
3. Hear how much of an impact that the additional new web pages have on the redesign.
Subject –
Desktop and mobile prototypes of the redesign of Client's website, in Adobe XD.
Participants –
All of the five participants in the research phase.
Tasks For Participants –
Participants were asked to review the redesigned prototypes, and also asked to ascertain if both of the prototypes display the information/imagery/design in the way that satisfies each of their expectations.
Final Product
Please see below for the final prototypes (desktop and mobile).
Note: To identify which parts of the page are clickable, go ahead and click anywhere on the page. The clickable areas will immediately light up after each click.
Conclusion of UX Design
For Client - Vesta Fitness
Retrospective
I understand that Client’s business model has been very-much needed in the past year, due to the global pandemic, which was preventing all of us from working out at the nearby gym.
Because Client is a new workout product company, it is very important to add designs and components that appeal to a wider user base.
Challenges
Because I was short on time, from the very beginning, I notified Client that although I would redesign almost all of the already-existing pages on desktop and mobile, the only pages that I wasn’t going to redesign on mobile were the Shop page, and the Checkout page.
However, I was very confident with all of my redesigns, which I delivered to Client.
Final Outlook
I am very delighted to have worked with a workout company, to help them understand the best avenues to take when redesigning their web pages. Once the web pages both maintain their pre-existing user base, in addition to attracting more potential customers, their ROI will increase.
Thank you!
for being engaged!
Feel free to connect with me, if you either want to learn more about my background/experience, or have any opportunities for me!