Project Introduction
The Project Brief for peau et beauté mentions the importance to the brand for easy shopping and shipping for their users from multiple devices: mobile, tablet, and desktop. It was important that the design for peau et beauté accommodate their returning customers, as well as their new customers. To fulfill business objectives, a responsive web design was created to accommodate returning and new users to easily shop from any device.
Brand Guidelines
Peau et beauté also listed in the Project Brief, that they would need brand definition through values, tone, typography, colors, imagery, and writing style.
I developed these, and then a Brand Guidelines Book was designed to fulfill their business objectives.
Style Guide
The Style Guide features key elements from the Brand Guidelines to incorporate into the User Interface responsive web design.
Information Architecture Diagram
The Project Brief listed three key User Flows required for peau et beauté, so I set up the app navigation with these specific User Flows in mind.
Low Fidelity Wireframes
The Project Brief listed three key user flows. I started with designing Low Fidelity Wireframes for User Flow 3, so I could test the design early with users before designing further to incorporate an Agile Product Development.
In order to follow the UX Best Practices you are not the user and prototype before you deliver a real product, I created a Low Fidelity Prototype to test the design with real users through Usability Testing.
User Flow 3: “As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history.”
The design for a returning customer once signed in included not only Order History and Search History, but also the brand’s focus on Shipping and easy Returns. On the user’s Profile, users can quickly access their Order History for Returns. The Order History includes key information a user needs, such as if an order has been Returned or is In Transit. The Profile includes quick access to the brand’s Return Policy, as well as a Help section. Once Signed in, the Search feature includes the user’s Search History.
User Testing on Low Fidelity Prototype
During User Testing, I asked four users to find their Order History from the Home screen on a Low Fidelity Prototype.
“The navigation makes sense, but I got discouraged that I had to login. I thought my Order History would be in the hamburger icon. I feel like it’s intuitive to me to find my Sign in and Sign out in the menu. If I’m not logged in, I’m not thinking to look for my Profile.” - William
“I was confused at first, but then it made more sense. I thought of clicking on the hamburger menu icon in the top corner first, but I think the Profile icon does make sense.” - Alexa
“I assume that the user icon or the menu icon in the top right is where I need to go for Order History. It didn’t seem to work when I tried to go into the hamburger menu. Maybe having only one of those two icons would be less confusing.” - Waz
“It is intuitive that I’d have to sign in, but I feel like my main reason to be on a website like this is to shop, so I’d go to the menu for less important tasks like finding my Order History. Especially since the Profile icon isn’t as intuitive when I’m looking for ‘Sign In’ wording.” - Daniel
User Testing: Analysis
It was important that the responsive design follow UX Best Practice keep things simple and consistent by being intuitive. I knew I needed target users to be able to navigate a key User Flow without needing instruction.
While every user who tested this User Flow 3 thought it was intuitive to Sign In to access their Order History, they didn’t think this was done through the Profile icon, and they were confused that they couldn’t access this in the hamburger menu on the top navigation. Every user tested said they thought they would need to start in the hamburger menu icon.
Implemented from feedback during User Testing, small breakpoints feature a minimal top navigation bar with all profile access in the hamburger menu, where users intuitively expect to find it. While implementing User Feedback, I wanted to help the user be able to still quickly locate their Profile and Order History, so in the hamburger menu drop down, “Account Sign In” is not only highlighted in a separate color, but features a higher typography hierarchy to incorporate a UI Best Practice “typography hierarchy” to guide the user and increase usability.
High Fidelity Wireframes: Mobile
Implementing the three key user flows, the High Fidelity Wireframes feature a shop accessible to users without an account yet, and for users with an account, the ability to add items to Wishlist, as well as to access Search History and Order History.
The High Fidelity Wireframes for the final UI Design incorporate UI Best Practices from Nielsen - Molich's Ten Usability Heuristics for User Interface Design, such as:
Visibility of system status by keeping users informed on such screens as the item screen, when a user clicks the Add to Cart button, a screen pops up to confirm to the user that the item has been added to their Cart.
User control and freedom by allowing users on the Cart screen to Remove an item from their cart.
Consistency and standards by incorporating that users use other digital products more than yours, so you must maintain consistency: this is exampled in moving the Sign In to the hamburger menu icon where users intuitively think to find their Sign In.
Aesthetic and minimal design by not cluttering the design with anything that would compete with the user’s attention from completing their goals. This was confirmed in User Feedback during User Testing in the High Fidelity Prototype.
Flexibility and efficiency of use with a design that accommodates a users frequent actions. This was confirmed in User Feedback during User Testing in the High Fidelity Prototype.
High Fidelity Wireframe: Tablet and Desktop
The design was then made responsive for a total of three breakpoints to accommodate users to shop from phone, tablet, and computer browsers. This design for the large breakpoint examples how responsive design adjustments were made to customize the design perfectly to the desktop breakpoint.
With more space, frequent user actions are accommodated in the top navigation:
The tablet design includes an added Profile icon.
The desktop design includes an expanded “Account Sign In” instead of the Profile icon, as well as a Search icon.
Retrospective
What Went Well
The final design is what I imagined for the user, and I’m glad that User Feedback confirmed that the design is both easy to navigate and intuitive, with interesting design pattern variations. The color palette and imagery are calming and beautiful, providing not only a well branded design, but an enjoyable user experience.
The design layout for all three breakpoints came out well: each breakpoint features a design that perfectly accommodates it’s size.
I enjoyed created a Brand Book for this project, and am happy with how the Brand Book and it’s mockup came out.
Challenges/What Can Be Improved
Designing for small breakpoints comes naturally to me, but adjusting for larger breakpoints has been a challenge. I intend to practice redesigning for larger breakpoints more, and finding design inspiration for larger breakpoints to save and reference for later design projects.
Coming up with color palettes and typography tends to take my awhile to solidify, and goes through changes, so I want to be more aware of and save daily design inspiration, so I can reference it at the start of a project, or when I’m facing a design challenge.
For future iterations, I would conduct User Testing of more User Flows, and design a High Fidelity Desktop Prototype. I would also design for more user flow screens of the app.