While a co-op at Ronik Design I was lucky to have worked on Ryllace, a new e-commerce fashion brand. From the initial competitive research to the final details, I was able to be apart of the entire creation of the web experience.

One of the first steps me and the three other designers working on this project took was to start researching other successful e-commerce experiences. By collecting screenshots and notes about other sites that were tackling similar problems we were able to get situated with what is currently out there. This was also a great jumping off point to see how we could create unique and thoughtful designs for this new brand.

After exploring similar online experiences, we got to our first round of wireframes. With a sitemap that had been talked through and discussed and questioned and tested and then talked through again, we started by having each designer take on designing the main pages of the site. By having multiple designers creating their own versions of these important pages allowed us to explore and play with each aspect of the page. Then, we were able to compare the different solutions and piece together the most impactful parts.

Obsessing over the details of every single page became a satisfying perk. Understanding the importance of each decision and the later outcome it could produce lead to conversations with my manager about the difference between “cancel” vs “ok” at the bottom of a dialogue box and an exciting opportunity to personally tackle two large parts of the site, the entire check out process and the user’s account. Thrown back into competitive research and quickly exploring different possibilities, I was able to propose a smoother and more intuitive check out flow and a user friendly account portion of the site.

When delivering our low fi wireframes to the client, it was important to be as transparent and communicative as possible. To do this, we would present annotated wireframes to explain to the client and their developers how we envisioned each part of the page function.

With many rounds of low-fi wireframes down, the next step was to take the initial branding and apply it to the final low fidelity versions of each page. With this step came more exploration of how the brand could be used specifically to make the UX shine. Playing with the colors and type that we were given, I started to create version after version of how this brand could come to life online.

After playing around with the brand assets on the different types of pages we had on the site, I create three specific UI directions and applied them to the homepage. This was helpful in making mini UI rules for each direction so they could each be their own strong contender. Using the same brand elements but in completely different ways was such a playful part of the process.

After multiple rounds of high fidelity wireframes, we were able to work out how the brand would be expressed online and started to apply these new rules and styles to the rest of the pages. The final style ended up being a “Frankenstein” of the different directions that were presented to the client. The result was a fresh, colorful, bold but at the same time, mature and comforting, e-commerce site.