Link to The White's Emporium website.
Link to The Capelin Creations website.
Introduction:
As a creative assistant at Capelin Creations, I was delighted to have been given the opportunity to collaborate on the website project for one of our esteemed clients, "The White's Emporium." My primary responsibility involved developing a user flow and wireframe sketches that accurately captured the client's business needs and requirements. This was essential in creating a vision for the website's framework, which would ultimately serve as the foundation for its design and development.
-
Create an Engaging and User-Friendly Website
Objective: Develop intuitive user flows and wireframe sketches to ensure a seamless browsing
and purchasing experience for visitors to The White's Emporium website.
​​
​
-
Showcase Artistic Products Effectively
​ Objective: Design visually appealing layouts and product display features that highlight the unique and diverse range of artistic products offered by The White's Emporium.
​​
​
-
Enhance Brand Identity and Recognition
Objective: Incorporate elements of The White's Emporium brand identity, such as logo, color palette, and typography, consistently throughout the website to reinforce brand recognition and foster customer trust.​
Goals:
To begin this project, my team and I first developed a set of personas. These personas were designed to serve as a guide and ensure that we were all aligned and working towards a shared goal throughout the project's process.
The personas helped us to better understand the needs, motivations, and preferences of our target audience, which in turn informed our decisions on the website's design and user flow.
Design Progress:
Personas:
To develop an effective user flow, I conducted a thorough analysis of our client's brand and their competitors' websites. This involved researching the strengths and weaknesses of each website, noting details that worked well and areas that could be improved upon. By doing so, I was able to ensure that our user flow would be both practical and efficient in guiding users towards their desired actions.
User flow:
After completing the user flow, I submitted it to my manager for review and approval. Their feedback was invaluable in ensuring that the user flow was effective in achieving our client's goals and guiding users towards desired actions such as making purchases or contacting customer support. Their input helped to refine the user flow and make necessary adjustments to ensure its overall effectiveness.
Following the approval of the user flow, I proceeded to design a basic wireframe for the website. This began with sketching out some initial ideas before moving onto creating a low-fidelity design using Figma. This allowed me to create a more detailed and visually understandable version of the design, which I could then share with my manager for further feedback and adjustments.
Wireframe & low-fidelity design:
After incorporating my manager's feedback, we sent the low-fidelity design to our client to ensure that they were satisfied with the base of the website and the design process thus far. This step was crucial in ensuring that we were aligned with our client's needs and expectations, as it allowed us to make any necessary changes before moving forward with the high-fidelity design.
Using Figma and incorporating feedback from both my manager and our client, I made necessary adjustments and moved to the next step to design the high-fidelity version of the website.
To maintain brand consistency, I used the client's designated Primary color with HEX: 253551 as the primary color throughout the design.
For the Typefaces, I incorporated my colleague's suggestion and used "Inknut Antiqua (Light)" as the primary font and "Acumin Pro Light" as the secondary font. These choices were made with careful consideration to ensure that the design not only looked visually appealing but also remained consistent with the client's brand identity.
Design Elements:
High fidelity wireframe:
Transitioning to the Next Phase of Design for Bringing the Website to Life
The Whites Emporium Homepage:
Lo-Fi Wireframe
Hi-Fi Wireframe
Final Result
Key Learnings and Insights
My time collaborating with the Capelin Creations team as a UX/UI designer for the Whites Emporium website was incredibly enlightening. Here's what I took away:
​
-
Delving into user-centric designs within CMS platforms like Shopify was eye-opening.
​
-
Learning about SEO and how it amps up website engagement was a game-changer.
​
-
Communication with the team proved crucial in keeping everyone on the same page.
​
-
Ensuring the website resonated with both our users and clients was our ultimate goal.
​
This project wasn't just about refining design skills; it was about developing a comprehensive approach to crafting digital experiences that truly hit the mark.
Acknowledgment:
I would like to express my sincere gratitude to the entire Capelin Creations team for their collaboration and support throughout the development of the Whites Emporium website. This project wouldn't have been possible without the collective effort and expertise of everyone involved.
​