Overview
Role: UX Designer
Industry: Fashion
Category: Mobile Application
​
Methodology: Goal-Directed Design (GDD)
Project Length: 3 months
​
Team Members:
-
Leo Serres (Team Lead)
-
Muhammad Bilal (UX Designer)
-
Lina Davis (Visual Designer)
About Moda
Moda is more than just your typical online clothing store. It is a platform made for individuals looking to buy clothing items from different stores, all within a single application.
Moda allows users to enhance their fashion knowledge by reading articles about trends, fashion tips and providing them with an overview of recent fashion shows. This helps users keep up with what's trending, helping them make an informed decision when it comes to shopping for clothes.
Design Process
To create Moda, Goal-Directed Design (GDD) process was followed, which is an interaction design methodology created by Alan Cooper. Following GDD process helped us ensure we were on the right track, keeping user's needs and goals in mind throughout. In chronological order, our timeline looked like the following:
1. Literature Review
2. Competitive Audit
3. Subject Matter Expert (SME) Interviews
4. User Research
5. Building Personas
6. Context Scenario
7. Low Fidelity Prototype
8. High Fidelity Prototype I
9. Usability Testing
10. High Fidelity Prototype II
_svg.png)
_svg.png)
Homepage and search page layout
Challenges
As the UX designer for Moda, it was important to be inclusive of all user needs, while following standard guidelines. To accomplish that, I faced a few challenges,
some of which were:
-
Provide a suitable navigation style to the user.
-
Ensure content layout does not compromise readability.
-
Have frequently used features easily accessible.
-
Design app layout for both new and returning users.
-
Reduce steps to purchase items.
-
Provide a detailed breakdown of each outfit.
User Problems
To better understand the problems that our users face on other applications, we conducted user interviews. I focused on getting user feedback regarding interfaces. Some inconveniences that were similar between our interviewees for shopping apps were:
-
Inconsistent app layout.
-
Large learning curve for new users.
-
Not having important features easily accessible.
Affinity Map
Based on the feedback from users, I focused on adding features to the affinity map that relate to the interface like the ability to save outfits, suitable navigation styles, menu layout, sorting options, and quick links. Feedback from our visual designer Ms. Davis was important during this phase as she will be creating and collecting assets that will consist of the interface. I recommended the type of icons, images and color scheme I had in mind and based on that, she created Moda's branding guidelines.
Affinity Map of Moda
Low Fidelity Prototype
Low Fidelity Prototype of Moda
A low fidelity prototype helped us make sure we were on the right track. We created the key path users would take to purchase an outfit, along with layouts of each one of the pages. The basic interface for the menu was decided as well as the categories we wanted to include in the navigation menu.
​
We struggled to choose what features to include within the navigation as there were a lot of options to choose from the affinity map. Our team leader Leo explained his vision to include a pull-up menu as the main navigation. I explained to him how his idea might work against the user's schema, making it difficult for them to navigate through the application. This was later confirmed in our usability test and we reverted back to a conventional bottom navigation bar.
​
I failed to convince my team to conduct a proper usability test at this stage, as a result of which I had to make a few major changes to our high fidelity prototype. This cost me quite a bit of time as high fidelity prototypes are sensitive when it comes to alteration due to all the links.
High Fidelity Prototype
_svg.png)
_svg.png)
High Fidelity Prototype of Moda
As the UX designer for Moda, it was my responsibility to create a high fidelity prototype based on all the user research and competitive audit we had done. The prototype was designed for the needs of both our primary and secondary personas. This initial iteration of high fidelity prototype included the pull-up menu and included our understanding of what features were important to the user. This was a good starting point as it helped us have a skeleton for the application and visualize its interface.
​
More importantly, it helped us conduct user testing which gave us valuable insight into what features were missing or implemented improperly. We had three participants come in and they particularly struggled finding the pull-up menu, something we later changed in our second iteration. This prototype also included our first revision of the item page, the checkout page, the cart, and the categories page.
Usability Testing
Conducting a usability test helped us reassure ourselves that we were in fact on the right track. It also helped us find features our app lacked but were important to the user.
Because I had experience conducting usability tests for previous projects, I was assigned to lead the usability testing for MODA as well. We conducted the test with three participants, results from which allowed us to iterate the high fidelity prototype. Analyzing the results from the usability test, we found a pattern among the complaints from the participants some of which were:
​
-
Concealed main menu navigation.
-
Inconveniently placed search bar.
-
Lack of information about the outfit.
-
Inability to view a breakdown of the outfits.
-
Confusing icons in the navigation bar.
High Fidelity Prototype II
The usability test provided us with valuable information regarding what had to be changed within the application. I started off by remodeling the navigation style using the usability test results. My team and I decided to go for a traditional bottom navigation bar and got rid of the pull-up menu. The icons were changed to be more straightforward and a title for each icon was added to make it clear what each tab led to.
The main menu was now embedded into the search tab, giving users an overview of categories available to them. The homepage now has a search bar of its own at the top. This allows users to quickly search for an outfit. The outfit page is now a lot more detailed–with a breakdown of each clothing item within the outfit. The breakdown includes information like description, designer, and price of each item. Users now also have an option to change the size and color of individual items within the outfit.
​
Besides updating existing features based on the usability test results, I added more features to the prototype. The articles section now has a different screen for our secondary persona. The checkout process was completed and labels for each outfit along with their price were added to the categories page. A confirmation screen was added once the user placed an order.
Takeaways
Working on Moda was an interesting experience as I got to work on multiple tasks, some of which I was completely new to. Taking the initial hypotheses and comparing it to the product at the end really shows how far we have come and developed this application based around users' needs and goals rather than what we as designers think users will like.
​
If I could do anything differently, it would be to conduct usability tests more frequently throughout the process. Spending a bit of time on usability testing helps save a lot of time down the road as iterations will only have to be minor ones.
​
Working with Lina and Leo was a pleasant experience and I appreciate their willingness to try something new. They provided honest feedback which is crucial in team projects like Moda.
