About
While brushing up on my wireframing and mockup skills, I fleshed out small bits of a nonexistent furniture website, solidifying my comfortability with Adobe XD and exploring my design capabilities within the realm of UX design. I wanted to work on a website design that would be in the same category as a deliverable I could possibly work on in the future, while wanting to make it lush and indulgent; something I’d want to use myself.
Fun Fact
I loved the project’s color palette so much, I added pieces featuring similar shades to my wardrobe.
What I Did
With this project, the main emphasis was on aesthetics, early stage ideation and brainstorming, persona creation, and UI design.
Design Vision
I wanted to make the UI for Lyon intentional, so I determined that moodboarding and scouring Dribbble were my best bets. Ultimately I settled on a spring-inspired palette and redesign, but wanted to keep the pastels to a minimum. White space and close comforts, contrasts. Rich colors, textured designs. Modern but with the warmth of vintage design trends.
Bright and inviting
PICTURED: I wanted to do a spring page takeover, and I wanted to make it airy, but I also wanted to give it depth. I picked a color palette that reminded me of the poignant aspects of spring shades: sun, earth, sky. Those three elements have the ability to be cool and warm, giving variety to the same theme.
The User
While I wanted this project to be mostly about aesthetics, I still wanted to make my design feel grounded. I decided to make a persona to give myself a North Star. It made the most sense for me to design for a person with a different lived experience than me in order to challenge myself. A wealthy, middle-aged woman fit the ticket.
PICTURED: When working with Inspired Isla in mind, I eventually came to the decision that when adding inspiration elements, they needed to be easily viewed and made easily accessible to her. I knew she’d want to browse with inspirational images juxtaposed to items she’s interested in, or with inspiration ideas being just an easy click away.
Wireframes + Prototype
Embarking on the wireframing process, I wanted to make sure inspiration interaction was at the forefront of my brainstorming, since that’s what Inspired Isla is really all about. She’s the type of user who needs to be given all the tools to make her decisions easily, but most importantly she needs to be confident in them. Collections versus individual products would be of value, and that’s the approach I took when arranging inspirational images alongside products.
Details to big picture
PICTURED: Initially, I felt it was best to go with a typical category page layout (Living Room is shown) featuring shopping by product category (left). But upon conferring with Isla, we determined it’d be best to have an option to shop by style genre instead of product type (right). Isla is all about the big picture; she wants to see a space collectively put together, to see what it can become. From there, she makes purchase decisions based on the style she’s drawn to.
The Mockup
Melding heavy design with function was the aim for this mockup, since our user is a particularly visual person herself. It’s easy to get caught up in the way something looks rather than how it feels, but I worked to stay clear of that by focusing on usability. It’s interesting how even an “aesthetics only” project really turns into something that ultimately has to be rooted in user needs to be any good.
One simple, functional choice rewrites the whole experience
PICTURED: Upon designing the homepage, having the option to browse products via an image of an existing stylized room is the epitome of features Isla wants. Implementing more opportunities for interactive moments like this throughout the website would increase Isla’s interest.
Textural variety makes all the difference
PICTURED: This is the wireframe example from page 21 brought to fruition. Understanding the user’s preferences doesn’t mean offering just one way to interact with a website in order to solve your main design problem and call it a day. I believe design motivated by the same task executed in multiple methods increases engagement. Only offering inspirational images would get boring to Isla. They lack depth. Adding options like the embedded image links and style genres adds texture and interest without getting complicated.
Final Thoughts
Getting to mock up a low pressure, visuals-oriented project was a fun flex of my design muscles. It was also a lesson in how creating a UI with no real user in mind is just... not possible, at least not for me. If you don’t have a user to design for, how do you know whether what you’re designing is as applicable to real life as it is beautiful? You can’t. On another note, I also liked making up a persona on the fly, but it was immediately obvious how much having a persona/target audience in mind is what gives design real depth.
I think the design for Lyon captures the experience I envisioned and does justice to the user’s needs, and ultimately I’m glad I hashed out this little project and learned more than I was anticipating.