Contributors
Stephan Church - Web Design, Artist, Animator, Coding
Colin Verba - Media development, Management (EmStory 1.0)
Brad Lienhart - Management (EmStory 2.0)
Timeframe
May 2023 - Present Day
Programs
Animator | Figma | Illustrator | InDesign | Photoshop | Wordpress
EmStory was designed as a storytelling app with the purpose of creating fast and assessible stories. I was hired for three purposes:
redesign and recreate the website, redesign the mobile app, and create new advertisements for the apple store. I joined the team as Emspire group was developing their
marketing strategy. We started with a building a customer based marketing strategy before pivoting to a SME UGC model. During this time 'emstory' was rebranded to 'EmStory'.
App Design
I was tasked to create the design and structure of the app. My key goal for app development was to future proof the design
to accommodate for added features. I also wanted to create fun UX features that could allow for monetization opportunities for EmStory.
For more information, check out the EmStory Design document.
Create
Create an emstory with a selection of videos.
Simple Editing
Users can easily edit their story using story elements.
Collaborate
Users can invite others to collaborate on a story.
Export
stories can be exported to the server or as an individual video.
Web Design
EmStory 2.0
The Emspire Group rebranded emstory to EmStory in the beginning of 2024, with a change from customer based marketing to SME UGC.
The updated website models itself appropriately while taking in the lessons learned from the previous web version.
emstory 1.0
The initial website was created to capture the fun of storytelling and was customer focused rather than SME driven.
However it suffered from a lack of focus, a sloppy approach and budget constraints that prevented the full design to be realized.
Site Functionality
Host Communication
The site uses appropriate wordpress and woocommerce hooks that allows communication to the theme
through the backend of wordpress.
Custom Content Boxes
I created tools to allow the user to edit text or images on the site without having to work around a plugin or code.
Jump Scroll
Clicking on a blue will scroll down to the appropriate section. JS is used to ensure the section is always centered.
Marketing
Apple Store Advert
As part of my initial contract for emstory 1.0, I was tasked to create an advert for the apple store.
The advert utilizes design elements created for the website to synergize the budget.
Animation
Phone Slides
The animation to the left cycles through various screens to showcase the app in action.
Because the animation was made prior to the app redesign release, I used beta images
with the intention to switch to real photos once they became available.
Flipnotes
For the first release of the site, I created two flipnote animation sets that do not loop. I utilized javascript to create the animation on demand.
The animation shown below is made up of four different animations. On the site, the animation would play in reverse when users select the back button.
Conclusion
working on EmStory allowed me the opportunity to synergize my design work in ways that I
was unable to do in previous projects. The app design work afforded the opportunity to capture the fun
and imagination that was the basis for EmStory.
Even still, there were decisions that had to be made to ensure I met the deadline of the project and changing company needs and demands.
Specific elements had to be removed to make deadlines and certain aesthetic elements were not to my quality standards. EmStory 2.0 allowed me
the opportunity to correct these grievances.