UI/UX DESIGN
A website redesign was created for Natural Body & Spa to promote their specialty products, attract new customers, and provide a user experience to users visiting the webpage.
INTRODUCTION
Natural Body & Spa (NBS) is a local spa in Georgia, “dedicated to creating new and exciting ways to promote natural beauty and wellness.” While working as a media/UI designer at Cumulus Media, NBS approached our digital marketing team with a task to redesign their current website primarily to create a more usable experience for their customers and promote their products/services. They requested our team to not stray too far away from their current branding, but were open to modernize their look.
DESIGN TEAM
The Team
The digital design team consisted of myself, another designer, and the design director.
My Role
My main role as one of the UI designers was to research, create wireframes and the UI mockups for the new website. Additionally, I worked to understand how this web experience perfectly fits into the overall user journey.
USER RESEARCH
CLIENT NEEDS
Natural Body & Spa requested a proposal of the design mockup within a week’s time. This forced us to set a game plan in order to quickly iterate through this design, as efficiently as possible while still keeping the users in mind.
Step 1: Quick user research, just enough to understand who the users are and what their needs/expectations are.
Step 2: Work through the information architecture, conducting a few card sorting user tests.
Step 3: Create a website map to show the client and create the structure for our new design.
Step 4: Quickly sketch low-fidelity wireframes to brainstorm ideas
Step 5: Create high-fidelity mockups of the main site pages & mobile responsive view
Identifying Users & Expectations
In this case, we narrowed it down to 2 main user groups: (1) returning spa customers & (2) new potential customers interested in spa services. We identified what makes these 2 groups different and how to best provide a solution that caters to both groups.
Users will expect to be able to…
Low-Fidelity WireFrames
With the research we gathered, we set off to create a solution that addressed our user’s goals & needs. Our goal in this step was to brainstorm ideas for each page, seeing if we could simplify the UI/UX. We worked with the design director to discuss which ideas made the most sense to the potential user.
High Fidelity Mockups
Due to time and budget restrictions, my partner and I were unable to create a 2nd low fidelity wireframe from our sketches. While we would have preferred to complete a basic round of user testing on an interactive digitized mockup, we transitioned to creating high fidelity mockups using Adobe XD.
Note: The mockup featured here is the Proposed mockup design created.