Storyworks
Client- Blue Elephant Productions
WEBSITE RE-DESIGN
Role
User Research, UI Design, UX Design
Duration
4 - 5 Months
Tools
Miro, Google Forms, Figma, MS Office 365 Canva and more.
Overview
This project is based on the Storyworks course in my first semester in my Interactive Media Management Program at Centennial College - Story Arts Center. My team and I were given a real world client to work with. Our main resolution was "Website Redesign". Our Team name was "Fuelsion", and we were a group of five design thinkers
Client
Needs
Objectives
A 6-year-old full-stack digital marketing agency based in Toronto.
-
Update the website with current marketing needs
-
Growth their business and reach out to more new clients
-
Can show their services, case study
-
Customize the blue elephant production's website
-
Aim to redesign and create their website with wireframes and prototypes.
-
Create new experiences for use journey and gain more potential clients
Current State Analysis
-
Unorganized and missing information.
-
No display of their strengths.
-
Not up-to-date comparatively in digital marketing.
-
Why?
-
Hinder company's reach to greater height of achievement
-
Lack of engagement with target audience.
2. Not the best user experience with current user needs.
-
Heavy text format
-
Less balance on visual and text format.
Why?
-
Miss business chance (Digital marketing is in high demand)
-
May leave a bad impression
User Interviews
We performed user interviews in order to acquire a comprehensive grasp of our users' requirements, aspirations, and points of contention. We questioned people about their experiences with BEP Digital Marketing Services.
Research &
Findings
Current Website
-
The homepage design is straightforward but a bit bland.
-
Good to use icons to represent different services. Only a few images are used on the pages.
-
The list of services is clearly described but only the names are provided.
-
A navigation bar is missing so users may be hard to find what they want. so users may be difficult to track the path, which helps to identify if the link has been visited before.
Suggestions
-
More information with graphics or images can be added.
-
Graphics can be utilized more on other pages. Some icons are repeated several times. Unique but consistent icons can be used.
-
Details of each can be added.
-
A navigation bar with several options and a search bar can be provided.
Theme - Guiding
Approach
Strategy
-
Based on our research findings, our target audience has limited experience in digital marketing. Unlike large brands, they only have limited manpower to handle marketing items.
-
Besides showing the strengths of Blue Elephant Productions, we would like users to have guiding experiences on the website.
-
They will be guided on digital marketing solutions and working with Blue Elephant Productions. They can feel secure and confident about the digital marketing solutions Blue Elephant Productions provided.
Voice and Tone
-
Confident yet approachable
-
Informative but not chaotic
-
Fun but not childish
-
Use "we" and "you"
Ease of Use
-
Clear navigation bar for users to track their paths
-
Make use of easy-to-understand icons
GET A SOLID SUGGESTION
-
Understand their goals and provide a brief yet clear solution for them instantly
-
Reach out to the team and get consultations easily
MARKETING KNOWLEDGE
-
Provide tips and information about marketing
-
Generic workflow of the agency so users can have a brief picture of how to work with an agency
Persona
We then began sketching low-fidelity wireframes with a pen and paper. Then, for our mid- and high-fidelity wireframes, we switched to Figma. Continuous revisions were done to improve the app's functionality and UX over the various fidelity phases.
Wireframe
Low Fidelity Prototype
Homepage
About Us
Services & Case Study
High Fidelity
Prototype/
Final Mockup
_edited.jpg)
_edited.jpg)
_edited.jpg)
_edited.jpg)
_edited.jpg)
_edited.jpg)
Brand Style Guide:
Typography &
Colors
Final Reflection
​Over the course of this project, it taught me a lot of things, communication with teammates, responsibility, and accountability. For myself I think being a mediator was one of the strengths I didn't know was in me, because we all were from very different places around the world, but I could keep and help everyone communicate in a better and more efficient way. Secondly, I feel I saw myself shine in designing the website, it made me feel happy and so much excited to do this, I never thought I would do this good with my imagination for designing.